docs(ui): publish complete component catalog
This commit is contained in:
@@ -60,6 +60,38 @@ test("every package page contains installation, guide, and complete API sections
|
||||
}
|
||||
});
|
||||
|
||||
test("UI components have a dedicated catalog and complete detail pages", () => {
|
||||
const reference = JSON.parse(
|
||||
readFileSync(join(root, "node_modules", "@wrnexus", "ui", "component-reference.json"), "utf8"),
|
||||
) as { count: number; components: Array<{ name: string; props: unknown[] }> };
|
||||
const catalog = readFileSync(join(root, "app", "pages", "components.wrn"), "utf8");
|
||||
const details = readdirSync(join(root, "app", "pages", "components")).filter((file) =>
|
||||
file.endsWith(".wrn"),
|
||||
);
|
||||
expect(catalog).toContain(`@wrnexus/ui · ${reference.count} components`);
|
||||
expect(catalog.match(/class="component-card"/g)).toHaveLength(reference.count);
|
||||
expect(details).toHaveLength(reference.count);
|
||||
const button = readFileSync(join(root, "app", "pages", "components", "button.wrn"), "utf8");
|
||||
expect(button).toContain("Props and attributes");
|
||||
expect(button).toContain("Requirement");
|
||||
expect(button).toContain("Default");
|
||||
expect(button).toContain('id="usage"');
|
||||
expect(button).toContain('id="source"');
|
||||
const uiPackage = readFileSync(join(packagePages, "ui.wrn"), "utf8");
|
||||
expect(uiPackage).toContain('href="/components"');
|
||||
expect(uiPackage).not.toContain("All 901 UI components and props");
|
||||
});
|
||||
|
||||
test("primary navigation exposes the component catalog", () => {
|
||||
for (const file of [
|
||||
join(root, "app", "pages", "index.wrn"),
|
||||
join(root, "app", "pages", "getting-started.wrn"),
|
||||
join(root, "app", "pages", "packages", "core.wrn"),
|
||||
]) {
|
||||
expect(readFileSync(file, "utf8")).toContain('<a href="/components">Components</a>');
|
||||
}
|
||||
});
|
||||
|
||||
test("every package page shows multiple named usage examples", () => {
|
||||
for (const name of expected) {
|
||||
const source = readFileSync(join(packagePages, `${name}.wrn`), "utf8");
|
||||
|
||||
+2
-2
@@ -7,8 +7,8 @@ page Pagenotfound {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<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">Preview · v0.2.64</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>
|
||||
<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="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</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="/components">Components</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 id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Error</span><span aria-hidden="true">/</span><span aria-current="page">Page not found</span></nav><article class="documentation prose standalone"><span class="eyebrow">404</span><h1>Page not found</h1><p>The address may be outdated or misspelled. No private or duplicate route is exposed here.</p><div class="actions"><a class="primary" href="/search">Search documentation</a><a href="/getting-started">Getting started</a><a href="/packages">Package reference</a></div></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
|
||||
@@ -7,8 +7,8 @@ page Access {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<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">Preview · v0.2.64</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>
|
||||
<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="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</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="/components">Components</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 id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Status</span><span aria-hidden="true">/</span><span aria-current="page">Access</span></nav><article class="documentation prose standalone"><Badge class="status status-beta" label="Private Developer Preview" variant="info" /><h1>Request preview access</h1><p>WRNexusJS 0.2.64 packages are not available from the public npm registry. Installation requires approval and private registry credentials supplied by WorkRoot. Never paste registry tokens into source control, issue reports, or support messages.</p><h2>Request process</h2><ol><li>Contact WorkRoot through the public contact path at <a href="https://workroot.in/">workroot.in</a>.</li><li>Describe the application, team, expected deployment, and Bun environment.</li><li>After approval, follow the registry instructions supplied privately.</li><li>Use the canonical scaffold command below only after authentication.</li></ol><pre><code>bunx @wrnexus/cli@0.2.64 create my-app</code></pre><p>Access approval, response time, licensing terms, and support level remain owner-controlled. This site does not collect access requests directly.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
|
||||
@@ -7,8 +7,8 @@ page Architecture {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<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">Preview · v0.2.64</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>
|
||||
<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="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</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="/components">Components</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 id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Architecture</span></nav><article class="documentation prose standalone"><span class="status status-beta">Framework architecture · 0.2.64</span><h1>Architecture</h1><p>WRNexusJS is Bun-native and SSR-first. File discovery maps pages and API handlers; middleware enriches or short-circuits a request; the compiler turns <code>.wrn</code> declarations into server render functions and small feature runtimes.</p><h2>Request and build lifecycle</h2><ol class="lifecycle"><li><strong>Discover</strong><span>Pages, APIs, middleware, components, layouts, schemas, rooms</span></li><li><strong>Compile</strong><span>Parse .wrn, validate grammar, generate server code</span></li><li><strong>Request</strong><span>Limits, security, locale, session, middleware</span></li><li><strong>Match</strong><span>Static and dynamic file route</span></li><li><strong>Render</strong><span>SSR data, escaped interpolation, components, metadata</span></li><li><strong>Enhance</strong><span>Only required reactive/directive runtimes</span></li></ol><h2>Package boundaries</h2><p><code>core</code> owns contexts, middleware, sessions and rooms; <code>router</code> discovers routes; <code>compiler</code> parses <code>.wrn</code>; <code>ssr</code> renders documents; <code>csr</code> supplies browser runtimes; <code>dev-server</code> and <code>cli</code> orchestrate development and builds.</p><h2>Security and data flow</h2><p>Validation happens at trust boundaries. Session authentication establishes identity; authorization makes resource decisions. CSP, Trusted Types, CSRF, upload checks, WebSocket origins, request limits, and output escaping are layered controls—not substitutes for application policy.</p><h2>Realtime and scale</h2><p>Rooms are process-local unless connected through pub/sub. Redis-backed pub/sub distributes events. Queue durability depends on the selected driver and must be evaluated explicitly.</p><h2>Workspaces and gateways</h2><p>The gateway can dispatch multiple applications while preserving route, component, asset, config, and session boundaries. Validate host routing and isolation before production.</p><h2>Build and deployment</h2><p><code>wrnexus build .</code> produces <code>dist/server.js</code> and hashed/static assets. Run the server with Bun, apply migrations before traffic, terminate TLS at a trusted edge, and forward only expected proxy headers.</p><h2>Mobile</h2><p>Mobile compatibility bridges SSR-safe Capacitor capabilities; native route generation is experimental and is not general web portability. Test each target platform.</p><h2>Generated files and limits</h2><p><code>app/routes.gen.ts</code>, <code>.wrnexus/</code>, and <code>dist/</code> are generated. The runtime is Bun-only. Preview packages are private. Historical compatibility and long-term support policy are not yet published.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
|
||||
@@ -7,8 +7,8 @@ page Benchmarks {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<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">Preview · v0.2.64</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>
|
||||
<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="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</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="/components">Components</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 id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Benchmarks</span></nav><article class="documentation prose standalone"><h1>Benchmarks</h1><span class="status status-planned">No publishable benchmark dataset yet</span><p>No comparative speed claims are published. A valid baseline must record scripts, commit, Bun/framework versions, hardware, OS, warmup, samples, workload, raw results, median, percentiles, memory, HTML size, browser JavaScript size, and run date.</p><p>The roadmap starts with WRNexusJS-only measurements before any maintained equivalent-workload comparison.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
|
||||
@@ -7,8 +7,8 @@ page Changelog {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<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">Preview · v0.2.64</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>
|
||||
<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="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</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="/components">Components</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 id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Changelog</span></nav><article class="documentation prose standalone"><h1>Changelog</h1><h2>0.2.64 <small>2026-07-13</small></h2><p>Documentation is aligned to all 26 installed packages. This release adds <code>@wrnexus/helpers</code>, original-request URL helpers, safe login redirects, working <code>wrnexus workspace add</code>, and forward-auth redirect propagation.</p><h3>Migration notes</h3><p>Run <code>wrnexus update --latest</code> and keep every <code>@wrnexus/*</code> package on 0.2.64. Existing applications must explicitly add <code>@wrnexus/helpers</code> before importing it; newly scaffolded applications include it automatically.</p><h2>Versioning and support</h2><p>The packages use semantic-looking versions, but a formal compatibility and old-release support policy has not been approved. Preview consumers should treat minor releases as potentially requiring migration review.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
|
||||
@@ -0,0 +1,923 @@
|
||||
page Components {
|
||||
seo {
|
||||
title = "Components"
|
||||
description = "Browse all 901 themeable WRNexusJS UI components, props, slots, events, and examples."
|
||||
}
|
||||
state query = ""
|
||||
state category = "All"
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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 id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · 901 components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>901</span></button><button type="button" @click="category = 'actions'">Actions<span>64</span></button><button type="button" @click="category = 'content'">Content<span>255</span></button><button type="button" @click="category = 'core'">Core<span>67</span></button><button type="button" @click="category = 'data'">Data<span>79</span></button><button type="button" @click="category = 'feedback'">Feedback<span>72</span></button><button type="button" @click="category = 'forms'">Forms<span>211</span></button><button type="button" @click="category = 'layout'">Layout<span>74</span></button><button type="button" @click="category = 'overlays'">Overlays<span>33</span></button><button type="button" @click="category = 'visualization'">Visualization<span>46</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accept-all-cookies-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'acceptallcookiesbutton acceptallcookiesbutton actions reusable accept all cookies button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>AcceptAllCookiesButton</h2><p>Reusable accept all cookies button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-accordion" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleaccordion accessibleaccordion content reusable accessible accordion component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleAccordion</h2><p>Reusable accessible accordion component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessiblecarousel accessiblecarousel content reusable accessible carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleCarousel</h2><p>Reusable accessible carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-chart-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessiblechartsummary accessiblechartsummary content reusable accessible chart summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleChartSummary</h2><p>Reusable accessible chart summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accessibledialog accessibledialog overlays reusable accessible dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccessibleDialog</h2><p>Reusable accessible dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-error-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleerrorsummary accessibleerrorsummary content reusable accessible error summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleErrorSummary</h2><p>Reusable accessible error summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleicon accessibleicon content reusable accessible icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleIcon</h2><p>Reusable accessible icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accessiblemenu accessiblemenu overlays reusable accessible menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccessibleMenu</h2><p>Reusable accessible menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibletabs accessibletabs content reusable accessible tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleTabs</h2><p>Reusable accessible tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accessible-tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibletooltip accessibletooltip content reusable accessible tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleTooltip</h2><p>Reusable accessible tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accordion accordion content reusable accordion component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Accordion</h2><p>Reusable accordion component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/account-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accountmenu accountmenu overlays reusable account menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccountMenu</h2><p>Reusable account menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/account-status-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'accountstatusbanner accountstatusbanner feedback reusable account status banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>AccountStatusBanner</h2><p>Reusable account status banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/action-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'actionmenu actionmenu overlays reusable action menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ActionMenu</h2><p>Reusable action menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/active-filter-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'activefilterlist activefilterlist data reusable active filter list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ActiveFilterList</h2><p>Reusable active filter list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/activity-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'activitylist activitylist data reusable activity list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ActivityList</h2><p>Reusable activity list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/add-on-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'addoncard addoncard content reusable add on card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AddOnCard</h2><p>Reusable add on card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'addressinput addressinput forms reusable address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AddressInput</h2><p>Reusable address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/address-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'addresspreview addresspreview content reusable address preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AddressPreview</h2><p>Reusable address preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/advanced-filter-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'advancedfilterbuilder advancedfilterbuilder content reusable advanced filter builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AdvancedFilterBuilder</h2><p>Reusable advanced filter builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'alert alert feedback reusable alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Alert</h2><p>Reusable alert component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/alert-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'alertdialog alertdialog overlays reusable alert dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AlertDialog</h2><p>Reusable alert dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/amount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'amountinput amountinput forms reusable amount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AmountInput</h2><p>Reusable amount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/analytics-dashboard-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'analyticsdashboardpreview analyticsdashboardpreview content reusable analytics dashboard preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AnalyticsDashboardPreview</h2><p>Reusable analytics dashboard preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/anchor-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'anchornavigation anchornavigation layout reusable anchor navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>AnchorNavigation</h2><p>Reusable anchor navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/announcement-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'announcementbar announcementbar core reusable announcement bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>AnnouncementBar</h2><p>Reusable announcement bar component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/apartment-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'apartmentinput apartmentinput forms reusable apartment input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ApartmentInput</h2><p>Reusable apartment input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-authentication-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiauthenticationnotice apiauthenticationnotice feedback reusable api authentication notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiAuthenticationNotice</h2><p>Reusable api authentication notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-endpoint-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apiendpointcard apiendpointcard content reusable api endpoint card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiEndpointCard</h2><p>Reusable api endpoint card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-error-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apierrorexample apierrorexample content reusable api error example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiErrorExample</h2><p>Reusable api error example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-header-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apiheadertable apiheadertable data reusable api header table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiHeaderTable</h2><p>Reusable api header table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-key-create-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'apikeycreatedialog apikeycreatedialog overlays reusable api key create dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ApiKeyCreateDialog</h2><p>Reusable api key create dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-key-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apikeydisplay apikeydisplay content reusable api key display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiKeyDisplay</h2><p>Reusable api key display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-key-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'apikeyinput apikeyinput forms reusable api key input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ApiKeyInput</h2><p>Reusable api key input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-method-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apimethodbadge apimethodbadge feedback reusable api method badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiMethodBadge</h2><p>Reusable api method badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-parameter-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apiparametertable apiparametertable data reusable api parameter table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiParameterTable</h2><p>Reusable api parameter table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-rate-limit-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiratelimitnotice apiratelimitnotice feedback reusable api rate limit notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiRateLimitNotice</h2><p>Reusable api rate limit notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-request-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apirequestexample apirequestexample content reusable api request example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiRequestExample</h2><p>Reusable api request example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-response-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apiresponseexample apiresponseexample content reusable api response example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiResponseExample</h2><p>Reusable api response example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-schema-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apischematable apischematable data reusable api schema table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiSchemaTable</h2><p>Reusable api schema table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-schema-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apischemaviewer apischemaviewer content reusable api schema viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiSchemaViewer</h2><p>Reusable api schema viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/api-version-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiversionbadge apiversionbadge feedback reusable api version badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiVersionBadge</h2><p>Reusable api version badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/app-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'appheader appheader layout reusable app header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>AppHeader</h2><p>Reusable app header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/architecture-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'architecturesection architecturesection layout reusable architecture section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArchitectureSection</h2><p>Reusable architecture section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/area-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'areachart areachart visualization reusable area chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>AreaChart</h2><p>Reusable area chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/article-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlehero articlehero layout reusable article hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticleHero</h2><p>Reusable article hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/article-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlelayout articlelayout layout reusable article layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticleLayout</h2><p>Reusable article layout component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/article-newsletter-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'articlenewslettercta articlenewslettercta actions reusable article newsletter c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ArticleNewsletterCTA</h2><p>Reusable article newsletter c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/article-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlepageshell articlepageshell layout reusable article page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticlePageShell</h2><p>Reusable article page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/article-share-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'articleshareactions articleshareactions actions reusable article share actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ArticleShareActions</h2><p>Reusable article share actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/aspect-ratio" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'aspectratio aspectratio core reusable aspect ratio component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>AspectRatio</h2><p>Reusable aspect ratio component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/asset-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'assetcard assetcard content reusable asset card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AssetCard</h2><p>Reusable asset card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/attachment-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'attachmentpicker attachmentpicker forms reusable attachment picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AttachmentPicker</h2><p>Reusable attachment picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/attachment-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'attachmentupload attachmentupload content reusable attachment upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AttachmentUpload</h2><p>Reusable attachment upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/audio-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'audioupload audioupload content reusable audio upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AudioUpload</h2><p>Reusable audio upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/audit-log-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'auditlogpreview auditlogpreview content reusable audit log preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuditLogPreview</h2><p>Reusable audit log preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/audit-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'audittable audittable data reusable audit table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>AuditTable</h2><p>Reusable audit table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/authenticator-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'authenticatorcodeinput authenticatorcodeinput forms reusable authenticator code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AuthenticatorCodeInput</h2><p>Reusable authenticator code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/author-avatar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authoravatar authoravatar content reusable author avatar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorAvatar</h2><p>Reusable author avatar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/author-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authorcard authorcard content reusable author card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorCard</h2><p>Reusable author card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/authorized-application-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authorizedapplicationcard authorizedapplicationcard content reusable authorized application card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorizedApplicationCard</h2><p>Reusable authorized application card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/auto-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'autogrid autogrid data reusable auto grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>AutoGrid</h2><p>Reusable auto grid component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/automation-example-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'automationexamplecard automationexamplecard content reusable automation example card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AutomationExampleCard</h2><p>Reusable automation example card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/availability-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'availabilitycalendar availabilitycalendar content reusable availability calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AvailabilityCalendar</h2><p>Reusable availability calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/avatar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'avatar avatar content reusable avatar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Avatar</h2><p>Reusable avatar component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/avatar-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'avatargroup avatargroup forms reusable avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AvatarGroup</h2><p>Reusable avatar group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/avatar-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'avatarupload avatarupload content reusable avatar upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AvatarUpload</h2><p>Reusable avatar upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/back-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'backbutton backbutton actions reusable back button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>BackButton</h2><p>Reusable back button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/back-to-top" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'backtotop backtotop core reusable back to top component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>BackToTop</h2><p>Reusable back to top component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'badge badge feedback reusable badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Badge</h2><p>Reusable badge component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/bank-transfer-details" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'banktransferdetails banktransferdetails content reusable bank transfer details component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BankTransferDetails</h2><p>Reusable bank transfer details component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'banner banner feedback reusable banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Banner</h2><p>Reusable banner component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/bar-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'barchart barchart visualization reusable bar chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>BarChart</h2><p>Reusable bar chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/beta-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'betabadge betabadge feedback reusable beta badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>BetaBadge</h2><p>Reusable beta badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/billing-address-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'billingaddressform billingaddressform content reusable billing address form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BillingAddressForm</h2><p>Reusable billing address form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/billing-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'billingexample billingexample content reusable billing example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BillingExample</h2><p>Reusable billing example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/billing-period-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'billingperiodtoggle billingperiodtoggle forms reusable billing period toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BillingPeriodToggle</h2><p>Reusable billing period toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/blackout-date-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'blackoutdatepicker blackoutdatepicker forms reusable blackout date picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BlackoutDatePicker</h2><p>Reusable blackout date picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/blog-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'blogcard blogcard content reusable blog card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BlogCard</h2><p>Reusable blog card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/blog-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'bloggrid bloggrid data reusable blog grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>BlogGrid</h2><p>Reusable blog grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/blog-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'bloglist bloglist data reusable blog list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>BlogList</h2><p>Reusable blog list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/blog-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'blogsearch blogsearch content reusable blog search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BlogSearch</h2><p>Reusable blog search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/body-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'bodytext bodytext content reusable body text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BodyText</h2><p>Reusable body text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/border-radius-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'borderradiuspicker borderradiuspicker forms reusable border radius picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BorderRadiusPicker</h2><p>Reusable border radius picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/bottom-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'bottomnavigation bottomnavigation layout reusable bottom navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>BottomNavigation</h2><p>Reusable bottom navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/brand-color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'brandcolorpicker brandcolorpicker forms reusable brand color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BrandColorPicker</h2><p>Reusable brand color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/brand-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'brandselector brandselector forms reusable brand selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BrandSelector</h2><p>Reusable brand selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/breadcrumbs" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'breadcrumbs breadcrumbs core reusable breadcrumbs component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Breadcrumbs</h2><p>Reusable breadcrumbs component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/browser-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'browserframe browserframe layout reusable browser frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>BrowserFrame</h2><p>Reusable browser frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/budget-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'budgetrangeslider budgetrangeslider content reusable budget range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BudgetRangeSlider</h2><p>Reusable budget range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/budget-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'budgetselector budgetselector forms reusable budget selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BudgetSelector</h2><p>Reusable budget selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/business-hours-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'businesshourspicker businesshourspicker forms reusable business hours picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BusinessHoursPicker</h2><p>Reusable business hours picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'button button actions reusable button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>Button</h2><p>Reusable button component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/button-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'buttongroup buttongroup forms reusable button group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ButtonGroup</h2><p>Reusable button group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/button-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'buttonselector buttonselector forms reusable button selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ButtonSelector</h2><p>Reusable button selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'calendar calendar content reusable calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Calendar</h2><p>Reusable calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/calendar-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'calendargrid calendargrid data reusable calendar grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CalendarGrid</h2><p>Reusable calendar grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/calendar-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'calendarheader calendarheader layout reusable calendar header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CalendarHeader</h2><p>Reusable calendar header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/calendar-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'calendarnavigation calendarnavigation layout reusable calendar navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CalendarNavigation</h2><p>Reusable calendar navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/callback-url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'callbackurlinput callbackurlinput forms reusable callback url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CallbackUrlInput</h2><p>Reusable callback url input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/campaign-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'campaigncard campaigncard content reusable campaign card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CampaignCard</h2><p>Reusable campaign card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/campaign-performance-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'campaignperformancepreview campaignperformancepreview content reusable campaign performance preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CampaignPerformancePreview</h2><p>Reusable campaign performance preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/campaign-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'campaignprogress campaignprogress visualization reusable campaign progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CampaignProgress</h2><p>Reusable campaign progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/capability-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'capabilitygrid capabilitygrid data reusable capability grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CapabilityGrid</h2><p>Reusable capability grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/captcha-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'captchafield captchafield forms reusable captcha field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CaptchaField</h2><p>Reusable captcha field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'card card content reusable card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Card</h2><p>Reusable card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/card-payment-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'cardpaymentform cardpaymentform content reusable card payment form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CardPaymentForm</h2><p>Reusable card payment form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/card-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cardselector cardselector forms reusable card selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CardSelector</h2><p>Reusable card selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/card-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'cardskeleton cardskeleton feedback reusable card skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CardSkeleton</h2><p>Reusable card skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/career-application-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'careerapplicationform careerapplicationform content reusable career application form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CareerApplicationForm</h2><p>Reusable career application form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/career-benefits-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'careerbenefitsgrid careerbenefitsgrid data reusable career benefits grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CareerBenefitsGrid</h2><p>Reusable career benefits grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'carousel carousel content reusable carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Carousel</h2><p>Reusable carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/case-study-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'casestudycard casestudycard content reusable case study card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CaseStudyCard</h2><p>Reusable case study card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/case-study-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'casestudyhero casestudyhero layout reusable case study hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CaseStudyHero</h2><p>Reusable case study hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/case-study-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'casestudypreview casestudypreview content reusable case study preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CaseStudyPreview</h2><p>Reusable case study preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/centered-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'centeredcta centeredcta actions reusable centered c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CenteredCTA</h2><p>Reusable centered c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/centered-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'centeredhero centeredhero layout reusable centered hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CenteredHero</h2><p>Reusable centered hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/centered-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'centeredsectionheader centeredsectionheader layout reusable centered section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CenteredSectionHeader</h2><p>Reusable centered section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/certificate-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'certificateupload certificateupload content reusable certificate upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CertificateUpload</h2><p>Reusable certificate upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/certification-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'certificationbadge certificationbadge feedback reusable certification badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CertificationBadge</h2><p>Reusable certification badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/challenge-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'challengesection challengesection layout reusable challenge section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ChallengeSection</h2><p>Reusable challenge section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'channelbadge channelbadge feedback reusable channel badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ChannelBadge</h2><p>Reusable channel badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'channelcard channelcard content reusable channel card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChannelCard</h2><p>Reusable channel card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-comparison-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelcomparisonchart channelcomparisonchart visualization reusable channel comparison chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelComparisonChart</h2><p>Reusable channel comparison chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'channelcomparisontable channelcomparisontable data reusable channel comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ChannelComparisonTable</h2><p>Reusable channel comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-fallback-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelfallbackdiagram channelfallbackdiagram visualization reusable channel fallback diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelFallbackDiagram</h2><p>Reusable channel fallback diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-flow" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelflow channelflow visualization reusable channel flow component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelFlow</h2><p>Reusable channel flow component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'channelicon channelicon content reusable channel icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChannelIcon</h2><p>Reusable channel icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-rate-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'channelratetable channelratetable data reusable channel rate table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ChannelRateTable</h2><p>Reusable channel rate table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/channel-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'channelselector channelselector forms reusable channel selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ChannelSelector</h2><p>Reusable channel selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/character-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'charactercounter charactercounter feedback reusable character counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CharacterCounter</h2><p>Reusable character counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chart-empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'chartemptystate chartemptystate feedback reusable chart empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ChartEmptyState</h2><p>Reusable chart empty state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chart-tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'charttooltip charttooltip content reusable chart tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChartTooltip</h2><p>Reusable chart tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'checkbox checkbox core reusable checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Checkbox</h2><p>Reusable checkbox component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/checkbox-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkboxgroup checkboxgroup forms reusable checkbox group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CheckboxGroup</h2><p>Reusable checkbox group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'checklist checklist content reusable checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Checklist</h2><p>Reusable checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/checklist-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'checklistprogress checklistprogress visualization reusable checklist progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChecklistProgress</h2><p>Reusable checklist progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chip" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'chip chip core reusable chip component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Chip</h2><p>Reusable chip component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chip-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'chipinput chipinput forms reusable chip input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ChipInput</h2><p>Reusable chip input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/circular-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'circularprogress circularprogress visualization reusable circular progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CircularProgress</h2><p>Reusable circular progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/city-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cityselector cityselector forms reusable city selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CitySelector</h2><p>Reusable city selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/clear-filters-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'clearfiltersbutton clearfiltersbutton actions reusable clear filters button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ClearFiltersButton</h2><p>Reusable clear filters button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/clickable-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'clickablecard clickablecard content reusable clickable card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ClickableCard</h2><p>Reusable clickable card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/close-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'closebutton closebutton actions reusable close button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CloseButton</h2><p>Reusable close button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cluster" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'cluster cluster core reusable cluster component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Cluster</h2><p>Reusable cluster component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'code code content reusable code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Code</h2><p>Reusable code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codeblock codeblock content reusable code block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeBlock</h2><p>Reusable code block component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code-copy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'codecopybutton codecopybutton actions reusable code copy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CodeCopyButton</h2><p>Reusable code copy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'codeheader codeheader layout reusable code header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CodeHeader</h2><p>Reusable code header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'codeinput codeinput forms reusable code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CodeInput</h2><p>Reusable code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code-language-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'codelanguagebadge codelanguagebadge feedback reusable code language badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CodeLanguageBadge</h2><p>Reusable code language badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codetabs codetabs content reusable code tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeTabs</h2><p>Reusable code tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/code-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codetext codetext content reusable code text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeText</h2><p>Reusable code text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cohort-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'cohortchart cohortchart visualization reusable cohort chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CohortChart</h2><p>Reusable cohort chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/color-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'colorgrid colorgrid data reusable color grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ColorGrid</h2><p>Reusable color grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/color-hex-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorhexinput colorhexinput forms reusable color hex input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorHexInput</h2><p>Reusable color hex input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorpicker colorpicker forms reusable color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Reusable color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/color-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorselector colorselector forms reusable color selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorSelector</h2><p>Reusable color selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/color-swatch" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'colorswatch colorswatch content reusable color swatch component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ColorSwatch</h2><p>Reusable color swatch component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/combobox" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'combobox combobox core reusable combobox component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Combobox</h2><p>Reusable combobox component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/coming-soon-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'comingsoonbadge comingsoonbadge feedback reusable coming soon badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ComingSoonBadge</h2><p>Reusable coming soon badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/coming-soon-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'comingsoonstate comingsoonstate feedback reusable coming soon state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ComingSoonState</h2><p>Reusable coming soon state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/command-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'commandblock commandblock content reusable command block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CommandBlock</h2><p>Reusable command block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/command-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'commandmenu commandmenu overlays reusable command menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>CommandMenu</h2><p>Reusable command menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/command-search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'commandsearchinput commandsearchinput forms reusable command search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CommandSearchInput</h2><p>Reusable command search input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/company-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'companyhero companyhero layout reusable company hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CompanyHero</h2><p>Reusable company hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/company-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'companynameinput companynameinput forms reusable company name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CompanyNameInput</h2><p>Reusable company name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/company-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'companypageshell companypageshell layout reusable company page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CompanyPageShell</h2><p>Reusable company page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/company-size-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'companysizeselector companysizeselector forms reusable company size selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CompanySizeSelector</h2><p>Reusable company size selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/comparison-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'comparisondaterangepicker comparisondaterangepicker forms reusable comparison date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ComparisonDateRangePicker</h2><p>Reusable comparison date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'comparisontable comparisontable data reusable comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ComparisonTable</h2><p>Reusable comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/completion-meter" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'completionmeter completionmeter visualization reusable completion meter component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CompletionMeter</h2><p>Reusable completion meter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/compliance-badge-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'compliancebadgelist compliancebadgelist data reusable compliance badge list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ComplianceBadgeList</h2><p>Reusable compliance badge list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/compliance-program-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'complianceprogramcard complianceprogramcard content reusable compliance program card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ComplianceProgramCard</h2><p>Reusable compliance program card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/confirmation-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'confirmationdialog confirmationdialog overlays reusable confirmation dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ConfirmationDialog</h2><p>Reusable confirmation dialog component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/confirm-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'confirmpasswordinput confirmpasswordinput forms reusable confirm password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ConfirmPasswordInput</h2><p>Reusable confirm password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/connected-account-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'connectedaccountcard connectedaccountcard content reusable connected account card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConnectedAccountCard</h2><p>Reusable connected account card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/connection-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'connectioncard connectioncard content reusable connection card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConnectionCard</h2><p>Reusable connection card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/consent-timeline-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'consenttimelinepreview consenttimelinepreview content reusable consent timeline preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConsentTimelinePreview</h2><p>Reusable consent timeline preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactcard contactcard content reusable contact card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactCard</h2><p>Reusable contact card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'contactcta contactcta actions reusable contact c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ContactCTA</h2><p>Reusable contact c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactform contactform content reusable contact form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactForm</h2><p>Reusable contact form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'contacthero contacthero layout reusable contact hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ContactHero</h2><p>Reusable contact hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'contactpageshell contactpageshell layout reusable contact page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ContactPageShell</h2><p>Reusable contact page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-sales-banner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'contactsalesbanner contactsalesbanner core reusable contact sales banner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ContactSalesBanner</h2><p>Reusable contact sales banner component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-sales-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'contactsalesbutton contactsalesbutton actions reusable contact sales button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ContactSalesButton</h2><p>Reusable contact sales button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/contact-sales-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactsalesform contactsalesform content reusable contact sales form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactSalesForm</h2><p>Reusable contact sales form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'container container core reusable container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Container</h2><p>Reusable container component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays reusable context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Reusable context menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/context-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contextswitcher contextswitcher content reusable context switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContextSwitcher</h2><p>Reusable context switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/conversation-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'conversationlist conversationlist data reusable conversation list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ConversationList</h2><p>Reusable conversation list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/conversation-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'conversationpreview conversationpreview content reusable conversation preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConversationPreview</h2><p>Reusable conversation preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/conversion-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'conversionchart conversionchart visualization reusable conversion chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ConversionChart</h2><p>Reusable conversion chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cookie-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'cookiebanner cookiebanner feedback reusable cookie banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CookieBanner</h2><p>Reusable cookie banner component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cookie-category-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookiecategorylist cookiecategorylist data reusable cookie category list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieCategoryList</h2><p>Reusable cookie category list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cookie-category-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cookiecategorytoggle cookiecategorytoggle forms reusable cookie category toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CookieCategoryToggle</h2><p>Reusable cookie category toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cookie-consent" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'cookieconsent cookieconsent core reusable cookie consent component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>CookieConsent</h2><p>Reusable cookie consent component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cookie-details-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookiedetailstable cookiedetailstable data reusable cookie details table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieDetailsTable</h2><p>Reusable cookie details table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cookie-preferences-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'cookiepreferencesdialog cookiepreferencesdialog overlays reusable cookie preferences dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>CookiePreferencesDialog</h2><p>Reusable cookie preferences dialog component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cookie-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookietable cookietable data reusable cookie table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieTable</h2><p>Reusable cookie table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/coordinates-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'coordinatesinput coordinatesinput forms reusable coordinates input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CoordinatesInput</h2><p>Reusable coordinates input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/coordinates-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'coordinatespicker coordinatespicker forms reusable coordinates picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CoordinatesPicker</h2><p>Reusable coordinates picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/copy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'copybutton copybutton actions reusable copy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CopyButton</h2><p>Reusable copy button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/copy-code-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'copycodebutton copycodebutton actions reusable copy code button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CopyCodeButton</h2><p>Reusable copy code button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/copy-secret-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'copysecretfield copysecretfield forms reusable copy secret field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CopySecretField</h2><p>Reusable copy secret field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cost-breakdown-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'costbreakdownchart costbreakdownchart visualization reusable cost breakdown chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CostBreakdownChart</h2><p>Reusable cost breakdown chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cost-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'costsummary costsummary content reusable cost summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CostSummary</h2><p>Reusable cost summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'counter counter feedback reusable counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Counter</h2><p>Reusable counter component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/country-calling-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countrycallingcodeinput countrycallingcodeinput forms reusable country calling code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountryCallingCodeInput</h2><p>Reusable country calling code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/country-calling-code-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countrycallingcodeselector countrycallingcodeselector forms reusable country calling code selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountryCallingCodeSelector</h2><p>Reusable country calling code selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/country-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countryselector countryselector forms reusable country selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountrySelector</h2><p>Reusable country selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/coupon-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'couponinput couponinput forms reusable coupon input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CouponInput</h2><p>Reusable coupon input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/credit-amount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'creditamountinput creditamountinput forms reusable credit amount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CreditAmountInput</h2><p>Reusable credit amount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cron-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'cronbuilder cronbuilder content reusable cron builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CronBuilder</h2><p>Reusable cron builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/cron-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'croninput croninput forms reusable cron input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CronInput</h2><p>Reusable cron input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/csv-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'csvupload csvupload content reusable csv upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CsvUpload</h2><p>Reusable csv upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/ctasection" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'ctasection ctasection layout reusable c t a section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CTASection</h2><p>Reusable c t a section component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/currency-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currencyinput currencyinput forms reusable currency input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrencyInput</h2><p>Reusable currency input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/currency-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currencyselector currencyselector forms reusable currency selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrencySelector</h2><p>Reusable currency selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/current-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currentpasswordinput currentpasswordinput forms reusable current password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrentPasswordInput</h2><p>Reusable current password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/customer-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'customerlogo customerlogo content reusable customer logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CustomerLogo</h2><p>Reusable customer logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/customer-story-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'customerstorycard customerstorycard content reusable customer story card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CustomerStoryCard</h2><p>Reusable customer story card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/danger-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'dangerbutton dangerbutton actions reusable danger button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DangerButton</h2><p>Reusable danger button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/data-protection-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'dataprotectioncard dataprotectioncard content reusable data protection card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DataProtectionCard</h2><p>Reusable data protection card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/data-retention-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'dataretentiontable dataretentiontable data reusable data retention table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DataRetentionTable</h2><p>Reusable data retention table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/data-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'datatable datatable data reusable data table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DataTable</h2><p>Reusable data table component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'dateinput dateinput forms reusable date input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateInput</h2><p>Reusable date input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datepicker datepicker forms reusable date picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DatePicker</h2><p>Reusable date picker component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-range-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'daterangecalendar daterangecalendar content reusable date range calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DateRangeCalendar</h2><p>Reusable date range calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'daterangepicker daterangepicker forms reusable date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateRangePicker</h2><p>Reusable date range picker component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'daterangeslider daterangeslider content reusable date range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DateRangeSlider</h2><p>Reusable date range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-time-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimeinput datetimeinput forms reusable date time input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimeInput</h2><p>Reusable date time input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimepicker datetimepicker forms reusable date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimePicker</h2><p>Reusable date time picker component.</p><div class="component-card-meta"><span>9 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-time-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimerangepicker datetimerangepicker forms reusable date time range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimeRangePicker</h2><p>Reusable date time range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/decimal-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'decimalinput decimalinput forms reusable decimal input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DecimalInput</h2><p>Reusable decimal input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/definition-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'definitionlist definitionlist data reusable definition list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DefinitionList</h2><p>Reusable definition list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/delete-confirmation-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'deleteconfirmationdialog deleteconfirmationdialog overlays reusable delete confirmation dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DeleteConfirmationDialog</h2><p>Reusable delete confirmation dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/delivery-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'deliverypreview deliverypreview content reusable delivery preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeliveryPreview</h2><p>Reusable delivery preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/delivery-status-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'deliverystatuschart deliverystatuschart visualization reusable delivery status chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DeliveryStatusChart</h2><p>Reusable delivery status chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/delivery-status-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'deliverystatustimeline deliverystatustimeline visualization reusable delivery status timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DeliveryStatusTimeline</h2><p>Reusable delivery status timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/demo-request-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'demorequestform demorequestform content reusable demo request form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DemoRequestForm</h2><p>Reusable demo request form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/department-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'departmentinput departmentinput forms reusable department input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DepartmentInput</h2><p>Reusable department input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/deprecated-feature-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'deprecatedfeaturealert deprecatedfeaturealert feedback reusable deprecated feature alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>DeprecatedFeatureAlert</h2><p>Reusable deprecated feature alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/description-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'descriptionlist descriptionlist data reusable description list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DescriptionList</h2><p>Reusable description list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/desktop-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'desktopnavigation desktopnavigation layout reusable desktop navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DesktopNavigation</h2><p>Reusable desktop navigation component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/developer-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'developercta developercta actions reusable developer c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DeveloperCTA</h2><p>Reusable developer c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/developer-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'developerhero developerhero layout reusable developer hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DeveloperHero</h2><p>Reusable developer hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/developer-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'developerpageshell developerpageshell layout reusable developer page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DeveloperPageShell</h2><p>Reusable developer page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/developer-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'developersearch developersearch content reusable developer search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeveloperSearch</h2><p>Reusable developer search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/developers-mega-menu" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'developersmegamenu developersmegamenu core reusable developers mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>DevelopersMegaMenu</h2><p>Reusable developers mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/developers-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'developersmenu developersmenu overlays reusable developers menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DevelopersMenu</h2><p>Reusable developers menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/device-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'devicecard devicecard content reusable device card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeviceCard</h2><p>Reusable device card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/disclosure" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'disclosure disclosure core reusable disclosure component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>disclosure</h2><p>Reusable disclosure component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/discount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'discountinput discountinput forms reusable discount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DiscountInput</h2><p>Reusable discount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/display-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'displayheading displayheading core reusable display heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>DisplayHeading</h2><p>Reusable display heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/display-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'displaynameinput displaynameinput forms reusable display name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DisplayNameInput</h2><p>Reusable display name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/divider" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'divider divider core reusable divider component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Divider</h2><p>Reusable divider component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/document-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'documentpreview documentpreview content reusable document preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DocumentPreview</h2><p>Reusable document preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/document-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'documentupload documentupload content reusable document upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DocumentUpload</h2><p>Reusable document upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/domain-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'domaininput domaininput forms reusable domain input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DomainInput</h2><p>Reusable domain input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/do-not-sell-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'donotselllink donotselllink actions reusable do not sell link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DoNotSellLink</h2><p>Reusable do not sell link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/donut-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'donutchart donutchart visualization reusable donut chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DonutChart</h2><p>Reusable donut chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/download-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadaction downloadaction actions reusable download action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadAction</h2><p>Reusable download action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/download-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadbutton downloadbutton actions reusable download button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadButton</h2><p>Reusable download button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/download-gate-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'downloadgateform downloadgateform content reusable download gate form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DownloadGateForm</h2><p>Reusable download gate form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/download-policy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadpolicybutton downloadpolicybutton actions reusable download policy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadPolicyButton</h2><p>Reusable download policy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/download-resource-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'downloadresourceform downloadresourceform content reusable download resource form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DownloadResourceForm</h2><p>Reusable download resource form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'drawer drawer core reusable drawer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Drawer</h2><p>Reusable drawer component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/dropdown-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdownmenu dropdownmenu overlays reusable dropdown menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DropdownMenu</h2><p>Reusable dropdown menu component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/dropdown-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'dropdownnavigation dropdownnavigation layout reusable dropdown navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DropdownNavigation</h2><p>Reusable dropdown navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/duration-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'durationinput durationinput forms reusable duration input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DurationInput</h2><p>Reusable duration input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/duration-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'durationpicker durationpicker forms reusable duration picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DurationPicker</h2><p>Reusable duration picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/duration-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'durationslider durationslider content reusable duration slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DurationSlider</h2><p>Reusable duration slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/elevated-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'elevatedcard elevatedcard content reusable elevated card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ElevatedCard</h2><p>Reusable elevated card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/email-body-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emailbodyeditor emailbodyeditor forms reusable email body editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmailBodyEditor</h2><p>Reusable email body editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/email-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'emailcomposer emailcomposer content reusable email composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EmailComposer</h2><p>Reusable email composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/email-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emailinput emailinput forms reusable email input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmailInput</h2><p>Reusable email input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/emoji-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emojipicker emojipicker forms reusable emoji picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmojiPicker</h2><p>Reusable emoji picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'emptystate emptystate feedback reusable empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>EmptyState</h2><p>Reusable empty state component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/encryption-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'encryptiondiagram encryptiondiagram visualization reusable encryption diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>EncryptionDiagram</h2><p>Reusable encryption diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/enterprise-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'enterprisecta enterprisecta actions reusable enterprise c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>EnterpriseCTA</h2><p>Reusable enterprise c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/enterprise-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'enterprisehero enterprisehero layout reusable enterprise hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>EnterpriseHero</h2><p>Reusable enterprise hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/enterprise-pricing-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'enterprisepricingcard enterprisepricingcard content reusable enterprise pricing card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EnterprisePricingCard</h2><p>Reusable enterprise pricing card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/environment-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'environmentselector environmentselector forms reusable environment selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EnvironmentSelector</h2><p>Reusable environment selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/environment-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'environmentswitcher environmentswitcher content reusable environment switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EnvironmentSwitcher</h2><p>Reusable environment switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'erroractions erroractions actions reusable error actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ErrorActions</h2><p>Reusable error actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorcard errorcard content reusable error card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorCard</h2><p>Reusable error card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorcode errorcode content reusable error code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorCode</h2><p>Reusable error code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'errorhero errorhero layout reusable error hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ErrorHero</h2><p>Reusable error hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-illustration" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorillustration errorillustration content reusable error illustration component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorIllustration</h2><p>Reusable error illustration component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorpage errorpage content reusable error page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorPage</h2><p>Reusable error page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'errorpageshell errorpageshell layout reusable error page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ErrorPageShell</h2><p>Reusable error page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'errorstate errorstate feedback reusable error state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ErrorState</h2><p>Reusable error state component.</p><div class="component-card-meta"><span>16 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/error-support-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'errorsupportlink errorsupportlink actions reusable error support link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ErrorSupportLink</h2><p>Reusable error support link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/estimated-cost-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'estimatedcostsummary estimatedcostsummary content reusable estimated cost summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EstimatedCostSummary</h2><p>Reusable estimated cost summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/event-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'eventtable eventtable data reusable event table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>EventTable</h2><p>Reusable event table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/expandable-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'expandabletext expandabletext content reusable expandable text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ExpandableText</h2><p>Reusable expandable text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/expiry-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'expirydatetimepicker expirydatetimepicker forms reusable expiry date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ExpiryDateTimePicker</h2><p>Reusable expiry date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/export-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'exportprogress exportprogress visualization reusable export progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ExportProgress</h2><p>Reusable export progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/external-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'externallink externallink actions reusable external link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ExternalLink</h2><p>Reusable external link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/eyebrow-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'eyebrowtext eyebrowtext content reusable eyebrow text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EyebrowText</h2><p>Reusable eyebrow text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/factor-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'factorcard factorcard content reusable factor card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FactorCard</h2><p>Reusable factor card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/fallback-route-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'fallbackroutebuilder fallbackroutebuilder content reusable fallback route builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FallbackRouteBuilder</h2><p>Reusable fallback route builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/fallback-route-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'fallbackroutediagram fallbackroutediagram visualization reusable fallback route diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FallbackRouteDiagram</h2><p>Reusable fallback route diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/faq" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'faq faq core reusable faq component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FAQ</h2><p>Reusable faq component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/faqaccordion" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'faqaccordion faqaccordion core reusable faqaccordion component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FAQAccordion</h2><p>Reusable faqaccordion component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/favicon-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'faviconupload faviconupload content reusable favicon upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FaviconUpload</h2><p>Reusable favicon upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/fax-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'faxinput faxinput forms reusable fax input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FaxInput</h2><p>Reusable fax input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featurecard featurecard content reusable feature card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureCard</h2><p>Reusable feature card component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featurechecklist featurechecklist content reusable feature checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureChecklist</h2><p>Reusable feature checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featurecomparisontable featurecomparisontable data reusable feature comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureComparisonTable</h2><p>Reusable feature comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/featured-blog-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featuredblogcard featuredblogcard content reusable featured blog card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeaturedBlogCard</h2><p>Reusable featured blog card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-details-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'featuredetailspanel featuredetailspanel layout reusable feature details panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>FeatureDetailsPanel</h2><p>Reusable feature details panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featuregrid featuregrid data reusable feature grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureGrid</h2><p>Reusable feature grid component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-icon-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featureiconcard featureiconcard content reusable feature icon card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureIconCard</h2><p>Reusable feature icon card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featurelist featurelist data reusable feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureList</h2><p>Reusable feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featuretabs featuretabs content reusable feature tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureTabs</h2><p>Reusable feature tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'featuretimeline featuretimeline visualization reusable feature timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FeatureTimeline</h2><p>Reusable feature timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/feature-unavailable-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'featureunavailablestate featureunavailablestate feedback reusable feature unavailable state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FeatureUnavailableState</h2><p>Reusable feature unavailable state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/field-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'fieldactions fieldactions actions reusable field actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FieldActions</h2><p>Reusable field actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-upload-primitive" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'file-upload file-upload core reusable file-upload component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>file-upload</h2><p>Reusable file-upload component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fileinput fileinput forms reusable file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Reusable file input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'filelist filelist data reusable file list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FileList</h2><p>Reusable file list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-size-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'filesizeinput filesizeinput forms reusable file size input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileSizeInput</h2><p>Reusable file size input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-size-label" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'filesizelabel filesizelabel content reusable file size label component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FileSizeLabel</h2><p>Reusable file size label component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-type-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'filetypebadge filetypebadge feedback reusable file type badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FileTypeBadge</h2><p>Reusable file type badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'fileupload fileupload content reusable file upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FileUpload</h2><p>Reusable file upload component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/filterable-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'filterabletable filterabletable data reusable filterable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FilterableTable</h2><p>Reusable filterable table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/filter-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'filterbar filterbar core reusable filter bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FilterBar</h2><p>Reusable filter bar component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/filter-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'filtermenu filtermenu overlays reusable filter menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FilterMenu</h2><p>Reusable filter menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/filter-search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'filtersearchinput filtersearchinput forms reusable filter search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FilterSearchInput</h2><p>Reusable filter search input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/final-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'finalcta finalcta actions reusable final c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FinalCTA</h2><p>Reusable final c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/first-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'firstnameinput firstnameinput forms reusable first name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FirstNameInput</h2><p>Reusable first name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/flex" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'flex flex core reusable flex component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Flex</h2><p>Reusable flex component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/font-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontpicker fontpicker forms reusable font picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontPicker</h2><p>Reusable font picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/font-size-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontsizepicker fontsizepicker forms reusable font size picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontSizePicker</h2><p>Reusable font size picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/font-weight-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontweightpicker fontweightpicker forms reusable font weight picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontWeightPicker</h2><p>Reusable font weight picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/footer-language-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'footerlanguageswitcher footerlanguageswitcher content reusable footer language switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FooterLanguageSwitcher</h2><p>Reusable footer language switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/footer-status-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'footerstatusindicator footerstatusindicator feedback reusable footer status indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FooterStatusIndicator</h2><p>Reusable footer status indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/forbidden-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'forbiddenpage forbiddenpage content reusable forbidden page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ForbiddenPage</h2><p>Reusable forbidden page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/forbidden-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'forbiddenstate forbiddenstate feedback reusable forbidden state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ForbiddenState</h2><p>Reusable forbidden state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/forgot-password-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'forgotpasswordform forgotpasswordform content reusable forgot password form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ForgotPasswordForm</h2><p>Reusable forgot password form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'form form content reusable form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Form</h2><p>Reusable form component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'formactions formactions actions reusable form actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FormActions</h2><p>Reusable form actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'formalert formalert feedback reusable form alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FormAlert</h2><p>Reusable form alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'formdialog formdialog overlays reusable form dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FormDialog</h2><p>Reusable form dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-error" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'formerror formerror core reusable form error component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FormError</h2><p>Reusable form error component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-error-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formerrorsummary formerrorsummary content reusable form error summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormErrorSummary</h2><p>Reusable form error summary component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'formfield formfield forms reusable form field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FormField</h2><p>Reusable form field component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'formgrid formgrid data reusable form grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FormGrid</h2><p>Reusable form grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'formgroup formgroup forms reusable form group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FormGroup</h2><p>Reusable form group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-help-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formhelptext formhelptext content reusable form help text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormHelpText</h2><p>Reusable form help text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-label" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formlabel formlabel content reusable form label component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormLabel</h2><p>Reusable form label component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'formprogress formprogress visualization reusable form progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FormProgress</h2><p>Reusable form progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'formrow formrow data reusable form row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FormRow</h2><p>Reusable form row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/form-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'formsection formsection layout reusable form section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>FormSection</h2><p>Reusable form section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/full-bleed" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'fullbleed fullbleed core reusable full bleed component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FullBleed</h2><p>Reusable full bleed component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/fullscreen-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'fullscreendialog fullscreendialog overlays reusable fullscreen dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FullscreenDialog</h2><p>Reusable fullscreen dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/funnel-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'funnelchart funnelchart visualization reusable funnel chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FunnelChart</h2><p>Reusable funnel chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/geo-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'geochart geochart visualization reusable geo chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>GeoChart</h2><p>Reusable geo chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/geofence-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'geofenceeditor geofenceeditor forms reusable geofence editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GeofenceEditor</h2><p>Reusable geofence editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/ghost-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'ghostbutton ghostbutton actions reusable ghost button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>GhostButton</h2><p>Reusable ghost button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/glass-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'glasscard glasscard content reusable glass card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GlassCard</h2><p>Reusable glass card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/global-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'globalsearch globalsearch content reusable global search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GlobalSearch</h2><p>Reusable global search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/gradient-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'gradientcta gradientcta actions reusable gradient c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>GradientCTA</h2><p>Reusable gradient c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/gradient-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'gradientpicker gradientpicker forms reusable gradient picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GradientPicker</h2><p>Reusable gradient picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/gradient-stop-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'gradientstopeditor gradientstopeditor forms reusable gradient stop editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GradientStopEditor</h2><p>Reusable gradient stop editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'grid grid data reusable grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>Grid</h2><p>Reusable grid component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/guide-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidecard guidecard content reusable guide card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideCard</h2><p>Reusable guide card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/guide-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidechecklist guidechecklist content reusable guide checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideChecklist</h2><p>Reusable guide checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/guide-difficulty-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'guidedifficultybadge guidedifficultybadge feedback reusable guide difficulty badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>GuideDifficultyBadge</h2><p>Reusable guide difficulty badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/guide-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'guidegrid guidegrid data reusable guide grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>GuideGrid</h2><p>Reusable guide grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/guide-step" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidestep guidestep content reusable guide step component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideStep</h2><p>Reusable guide step component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'header header layout reusable header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Header</h2><p>Reusable header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/header-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'headeractions headeractions actions reusable header actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeaderActions</h2><p>Reusable header actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/health-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'healthindicator healthindicator feedback reusable health indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>HealthIndicator</h2><p>Reusable health indicator component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'hero hero layout reusable hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Hero</h2><p>Reusable hero component.</p><div class="component-card-meta"><span>10 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'heroactions heroactions actions reusable hero actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroActions</h2><p>Reusable hero actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero-code-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'herocodepanel herocodepanel layout reusable hero code panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>HeroCodePanel</h2><p>Reusable hero code panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero-gradient-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'herogradienttext herogradienttext content reusable hero gradient text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroGradientText</h2><p>Reusable hero gradient text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero-primary-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'heroprimaryaction heroprimaryaction actions reusable hero primary action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroPrimaryAction</h2><p>Reusable hero primary action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero-product-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'heroproductpreview heroproductpreview content reusable hero product preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroProductPreview</h2><p>Reusable hero product preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero-secondary-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'herosecondaryaction herosecondaryaction actions reusable hero secondary action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroSecondaryAction</h2><p>Reusable hero secondary action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hero-trust-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'herotrusttext herotrusttext content reusable hero trust text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroTrustText</h2><p>Reusable hero trust text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hex-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hexcolorinput hexcolorinput forms reusable hex color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HexColorInput</h2><p>Reusable hex color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hidden-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hiddenfield hiddenfield forms reusable hidden field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HiddenField</h2><p>Reusable hidden field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/highlight-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'highlighttext highlighttext content reusable highlight text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HighlightText</h2><p>Reusable highlight text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/holiday-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'holidaycalendar holidaycalendar content reusable holiday calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HolidayCalendar</h2><p>Reusable holiday calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hostname-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hostnameinput hostnameinput forms reusable hostname input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HostnameInput</h2><p>Reusable hostname input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hour-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hourpicker hourpicker forms reusable hour picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HourPicker</h2><p>Reusable hour picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hsl-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hslcolorinput hslcolorinput forms reusable hsl color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HslColorInput</h2><p>Reusable hsl color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/hstack" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'hstack hstack core reusable hstack component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>hstack</h2><p>Reusable hstack component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/html-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'htmleditor htmleditor forms reusable html editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HtmlEditor</h2><p>Reusable html editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/human-approval-step" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'humanapprovalstep humanapprovalstep content reusable human approval step component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HumanApprovalStep</h2><p>Reusable human approval step component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'icon icon content reusable icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Icon</h2><p>Reusable icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/icon-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'iconbutton iconbutton actions reusable icon button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>IconButton</h2><p>Reusable icon button component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/icon-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'iconpicker iconpicker forms reusable icon picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IconPicker</h2><p>Reusable icon picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/icon-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'iconselector iconselector forms reusable icon selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IconSelector</h2><p>Reusable icon selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/identifier-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'identifierinput identifierinput forms reusable identifier input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IdentifierInput</h2><p>Reusable identifier input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/illustration" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'illustration illustration content reusable illustration component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Illustration</h2><p>Reusable illustration component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/image-compression-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'imagecompressionpreview imagecompressionpreview content reusable image compression preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ImageCompressionPreview</h2><p>Reusable image compression preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/image-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'imageeditor imageeditor forms reusable image editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ImageEditor</h2><p>Reusable image editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/image-preview-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'imagepreviewdialog imagepreviewdialog overlays reusable image preview dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ImagePreviewDialog</h2><p>Reusable image preview dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/image-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'imageselector imageselector forms reusable image selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ImageSelector</h2><p>Reusable image selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/image-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'imageupload imageupload content reusable image upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ImageUpload</h2><p>Reusable image upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/import-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'importprogress importprogress visualization reusable import progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ImportProgress</h2><p>Reusable import progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/incident-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentalert incidentalert feedback reusable incident alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentAlert</h2><p>Reusable incident alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/incident-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentbanner incidentbanner feedback reusable incident banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentBanner</h2><p>Reusable incident banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/incident-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'incidentcard incidentcard content reusable incident card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>IncidentCard</h2><p>Reusable incident card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/incident-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'incidentlist incidentlist data reusable incident list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>IncidentList</h2><p>Reusable incident list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/incident-response-flow" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'incidentresponseflow incidentresponseflow visualization reusable incident response flow component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>IncidentResponseFlow</h2><p>Reusable incident response flow component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/incident-severity-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentseveritybadge incidentseveritybadge feedback reusable incident severity badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentSeverityBadge</h2><p>Reusable incident severity badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/incident-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'incidenttimeline incidenttimeline visualization reusable incident timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>IncidentTimeline</h2><p>Reusable incident timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/industry-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'industrybadge industrybadge feedback reusable industry badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IndustryBadge</h2><p>Reusable industry badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/industry-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'industryselector industryselector forms reusable industry selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IndustrySelector</h2><p>Reusable industry selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/info-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'infocard infocard content reusable info card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InfoCard</h2><p>Reusable info card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/inline" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'inline inline core reusable inline component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Inline</h2><p>Reusable inline component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/inline-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'inlinealert inlinealert feedback reusable inline alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>InlineAlert</h2><p>Reusable inline alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/inline-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'inlinecode inlinecode content reusable inline code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InlineCode</h2><p>Reusable inline code component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'input input core reusable input component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>input</h2><p>Reusable input component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/input-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'inputgroup inputgroup forms reusable input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Reusable input group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/inset-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'insetpanel insetpanel layout reusable inset panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>InsetPanel</h2><p>Reusable inset panel component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/integer-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'integerinput integerinput forms reusable integer input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IntegerInput</h2><p>Reusable integer input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/integration-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'integrationcard integrationcard content reusable integration card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>IntegrationCard</h2><p>Reusable integration card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/invoice-line-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'invoicelineitem invoicelineitem content reusable invoice line item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InvoiceLineItem</h2><p>Reusable invoice line item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/invoice-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'invoicesummary invoicesummary content reusable invoice summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InvoiceSummary</h2><p>Reusable invoice summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/ip-address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'ipaddressinput ipaddressinput forms reusable ip address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IpAddressInput</h2><p>Reusable ip address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/job-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'jobcard jobcard content reusable job card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>JobCard</h2><p>Reusable job card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/job-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'jobprogress jobprogress visualization reusable job progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>JobProgress</h2><p>Reusable job progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/job-title-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'jobtitleinput jobtitleinput forms reusable job title input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>JobTitleInput</h2><p>Reusable job title input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/json-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'jsoninput jsoninput forms reusable json input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>JsonInput</h2><p>Reusable json input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/json-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'jsonviewer jsonviewer content reusable json viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>JsonViewer</h2><p>Reusable json viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/key-value-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'keyvaluetable keyvaluetable data reusable key value table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>KeyValueTable</h2><p>Reusable key value table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/kyc-document-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'kycdocumentupload kycdocumentupload content reusable kyc document upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>KycDocumentUpload</h2><p>Reusable kyc document upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'languageselector languageselector forms reusable language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LanguageSelector</h2><p>Reusable language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/language-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'languageswitcher languageswitcher content reusable language switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LanguageSwitcher</h2><p>Reusable language switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/last-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'lastnameinput lastnameinput forms reusable last name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LastNameInput</h2><p>Reusable last name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/latency-metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'latencymetric latencymetric visualization reusable latency metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>LatencyMetric</h2><p>Reusable latency metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/latitude-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'latitudeinput latitudeinput forms reusable latitude input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LatitudeInput</h2><p>Reusable latitude input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/leadership-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'leadershipgrid leadershipgrid data reusable leadership grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LeadershipGrid</h2><p>Reusable leadership grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/lead-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'leadtext leadtext content reusable lead text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LeadText</h2><p>Reusable lead text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-acceptance-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalacceptancenotice legalacceptancenotice feedback reusable legal acceptance notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalAcceptanceNotice</h2><p>Reusable legal acceptance notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-bullet-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legalbulletlist legalbulletlist data reusable legal bullet list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalBulletList</h2><p>Reusable legal bullet list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-contact-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'legalcontactblock legalcontactblock content reusable legal contact block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LegalContactBlock</h2><p>Reusable legal contact block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-definition-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legaldefinitionlist legaldefinitionlist data reusable legal definition list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalDefinitionList</h2><p>Reusable legal definition list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-document-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legaldocumentheader legaldocumentheader layout reusable legal document header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalDocumentHeader</h2><p>Reusable legal document header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-document-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legaldocumentlayout legaldocumentlayout layout reusable legal document layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalDocumentLayout</h2><p>Reusable legal document layout component.</p><div class="component-card-meta"><span>4 props</span><span>2 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalhero legalhero layout reusable legal hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalHero</h2><p>Reusable legal hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'legallanguageselector legallanguageselector forms reusable legal language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LegalLanguageSelector</h2><p>Reusable legal language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalnotice legalnotice feedback reusable legal notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalNotice</h2><p>Reusable legal notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalpageshell legalpageshell layout reusable legal page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalPageShell</h2><p>Reusable legal page shell component.</p><div class="component-card-meta"><span>1 props</span><span>2 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-print-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'legalprintbutton legalprintbutton actions reusable legal print button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LegalPrintButton</h2><p>Reusable legal print button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-region-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'legalregionselector legalregionselector forms reusable legal region selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LegalRegionSelector</h2><p>Reusable legal region selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalsection legalsection layout reusable legal section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalSection</h2><p>Reusable legal section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'legalsummary legalsummary content reusable legal summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LegalSummary</h2><p>Reusable legal summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legaltable legaltable data reusable legal table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalTable</h2><p>Reusable legal table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-table-of-contents" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'legaltableofcontents legaltableofcontents core reusable legal table of contents component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>LegalTableOfContents</h2><p>Reusable legal table of contents component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legal-version-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalversionbadge legalversionbadge feedback reusable legal version badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalVersionBadge</h2><p>Reusable legal version badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/letter-spacing-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'letterspacingpicker letterspacingpicker forms reusable letter spacing picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LetterSpacingPicker</h2><p>Reusable letter spacing picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/license-key-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'licensekeyinput licensekeyinput forms reusable license key input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LicenseKeyInput</h2><p>Reusable license key input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/lightbox" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'lightbox lightbox overlays reusable lightbox component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Lightbox</h2><p>Reusable lightbox component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/line-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'linechart linechart visualization reusable line chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>LineChart</h2><p>Reusable line chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/line-height-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'lineheightpicker lineheightpicker forms reusable line height picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LineHeightPicker</h2><p>Reusable line height picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'link link core reusable link component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Link</h2><p>Reusable link component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/link-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'linkbutton linkbutton actions reusable link button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LinkButton</h2><p>Reusable link button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'list list data reusable list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>List</h2><p>Reusable list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/loading-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'loadingbutton loadingbutton actions reusable loading button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LoadingButton</h2><p>Reusable loading button component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/locale-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'localeselector localeselector forms reusable locale selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LocaleSelector</h2><p>Reusable locale selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/localized-route-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'localizedroutelink localizedroutelink actions reusable localized route link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LocalizedRouteLink</h2><p>Reusable localized route link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/location-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'locationpicker locationpicker forms reusable location picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LocationPicker</h2><p>Reusable location picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'logo logo content reusable logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Logo</h2><p>Reusable logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/logo-cloud" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'logocloud logocloud core reusable logo cloud component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>LogoCloud</h2><p>Reusable logo cloud component.</p><div class="component-card-meta"><span>11 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/logo-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'logoupload logoupload content reusable logo upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LogoUpload</h2><p>Reusable logo upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/logout-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'logoutdialog logoutdialog overlays reusable logout dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>LogoutDialog</h2><p>Reusable logout dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/log-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'logtable logtable data reusable log table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LogTable</h2><p>Reusable log table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/longitude-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'longitudeinput longitudeinput forms reusable longitude input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LongitudeInput</h2><p>Reusable longitude input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/maintenance-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancealert maintenancealert feedback reusable maintenance alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceAlert</h2><p>Reusable maintenance alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/maintenance-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancebanner maintenancebanner feedback reusable maintenance banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceBanner</h2><p>Reusable maintenance banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/maintenance-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'maintenancecard maintenancecard content reusable maintenance card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MaintenanceCard</h2><p>Reusable maintenance card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/maintenance-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'maintenancepage maintenancepage content reusable maintenance page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MaintenancePage</h2><p>Reusable maintenance page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/maintenance-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancestate maintenancestate feedback reusable maintenance state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceState</h2><p>Reusable maintenance state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/maintenance-window-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'maintenancewindowpicker maintenancewindowpicker forms reusable maintenance window picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MaintenanceWindowPicker</h2><p>Reusable maintenance window picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/map-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mappicker mappicker forms reusable map picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MapPicker</h2><p>Reusable map picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/markdown-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'markdowneditor markdowneditor forms reusable markdown editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MarkdownEditor</h2><p>Reusable markdown editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/marketing-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'marketingpageshell marketingpageshell layout reusable marketing page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MarketingPageShell</h2><p>Reusable marketing page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/marketing-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'marketingsectionheader marketingsectionheader layout reusable marketing section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MarketingSectionHeader</h2><p>Reusable marketing section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/masked-secret-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'maskedsecretfield maskedsecretfield forms reusable masked secret field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MaskedSecretField</h2><p>Reusable masked secret field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'megamenu megamenu overlays reusable mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>MegaMenu</h2><p>Reusable mega menu component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/member-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'memberlist memberlist data reusable member list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>MemberList</h2><p>Reusable member list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mention-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mentioninput mentioninput forms reusable mention input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MentionInput</h2><p>Reusable mention input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/message-character-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'messagecharactercounter messagecharactercounter feedback reusable message character counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MessageCharacterCounter</h2><p>Reusable message character counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/message-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagecomposer messagecomposer content reusable message composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageComposer</h2><p>Reusable message composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/message-composer-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagecomposerpreview messagecomposerpreview content reusable message composer preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageComposerPreview</h2><p>Reusable message composer preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/message-limit-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'messagelimitinput messagelimitinput forms reusable message limit input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MessageLimitInput</h2><p>Reusable message limit input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/message-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagepreview messagepreview content reusable message preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessagePreview</h2><p>Reusable message preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/message-volume-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagevolumeslider messagevolumeslider content reusable message volume slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageVolumeSlider</h2><p>Reusable message volume slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'metric metric visualization reusable metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>Metric</h2><p>Reusable metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/metric-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'metriccard metriccard content reusable metric card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MetricCard</h2><p>Reusable metric card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/metric-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'metricgrid metricgrid data reusable metric grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>MetricGrid</h2><p>Reusable metric grid component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/metric-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'metrictext metrictext content reusable metric text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MetricText</h2><p>Reusable metric text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/minute-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'minutepicker minutepicker forms reusable minute picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MinutePicker</h2><p>Reusable minute picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mission-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'missionsection missionsection layout reusable mission section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MissionSection</h2><p>Reusable mission section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mobile-device-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'mobiledeviceframe mobiledeviceframe layout reusable mobile device frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MobileDeviceFrame</h2><p>Reusable mobile device frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mobile-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mobileinput mobileinput forms reusable mobile input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MobileInput</h2><p>Reusable mobile input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mobile-menu-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'mobilemenubutton mobilemenubutton actions reusable mobile menu button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>MobileMenuButton</h2><p>Reusable mobile menu button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mobile-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'mobilenavigation mobilenavigation layout reusable mobile navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MobileNavigation</h2><p>Reusable mobile navigation component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mobile-table-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'mobiletablecard mobiletablecard content reusable mobile table card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MobileTableCard</h2><p>Reusable mobile table card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'modal modal core reusable modal component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Modal</h2><p>Reusable modal component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/monthly-volume-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthlyvolumeselector monthlyvolumeselector forms reusable monthly volume selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthlyVolumeSelector</h2><p>Reusable monthly volume selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/month-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthpicker monthpicker forms reusable month picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthPicker</h2><p>Reusable month picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/month-year-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthyearpicker monthyearpicker forms reusable month year picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthYearPicker</h2><p>Reusable month year picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/multi-file-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'multifileupload multifileupload content reusable multi file upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MultiFileUpload</h2><p>Reusable multi file upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/multiple-email-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'multipleemailinput multipleemailinput forms reusable multiple email input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MultipleEmailInput</h2><p>Reusable multiple email input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/multi-select" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'multiselect multiselect core reusable multi select component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>MultiSelect</h2><p>Reusable multi select component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/muted-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'mutedtext mutedtext content reusable muted text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MutedText</h2><p>Reusable muted text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'nameinput nameinput forms reusable name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NameInput</h2><p>Reusable name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/narrow-container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'narrowcontainer narrowcontainer core reusable narrow container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>NarrowContainer</h2><p>Reusable narrow container component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'navigation navigation layout reusable navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Navigation</h2><p>Reusable navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/navigation-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'navigationitem navigationitem content reusable navigation item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NavigationItem</h2><p>Reusable navigation item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/navigation-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'navigationmegamenu navigationmegamenu overlays reusable navigation mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>NavigationMegaMenu</h2><p>Reusable navigation mega menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/new-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'newbadge newbadge feedback reusable new badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NewBadge</h2><p>Reusable new badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/new-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'newpasswordinput newpasswordinput forms reusable new password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NewPasswordInput</h2><p>Reusable new password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/newsletter-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'newslettercta newslettercta actions reusable newsletter c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>NewsletterCTA</h2><p>Reusable newsletter c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/newsletter-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'newsletterform newsletterform content reusable newsletter form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NewsletterForm</h2><p>Reusable newsletter form component.</p><div class="component-card-meta"><span>19 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/no-results-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'noresultsstate noresultsstate feedback reusable no results state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NoResultsState</h2><p>Reusable no results state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/not-found-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'notfoundpage notfoundpage content reusable not found page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NotFoundPage</h2><p>Reusable not found page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/not-found-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'notfoundstate notfoundstate feedback reusable not found state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NotFoundState</h2><p>Reusable not found state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/notification-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'notificationcard notificationcard content reusable notification card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NotificationCard</h2><p>Reusable notification card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/notification-dot" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'notificationdot notificationdot core reusable notification dot component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>NotificationDot</h2><p>Reusable notification dot component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/notification-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'notificationlist notificationlist data reusable notification list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>NotificationList</h2><p>Reusable notification list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'numberinput numberinput forms reusable number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NumberInput</h2><p>Reusable number input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/office-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'officecard officecard content reusable office card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OfficeCard</h2><p>Reusable office card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/offline-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'offlinepage offlinepage content reusable offline page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OfflinePage</h2><p>Reusable offline page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/offline-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'offlinestate offlinestate feedback reusable offline state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OfflineState</h2><p>Reusable offline state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/onboarding-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'onboardingprogress onboardingprogress visualization reusable onboarding progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>OnboardingProgress</h2><p>Reusable onboarding progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/one-time-secret-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'onetimesecretdisplay onetimesecretdisplay content reusable one time secret display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OneTimeSecretDisplay</h2><p>Reusable one time secret display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/online-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'onlineindicator onlineindicator feedback reusable online indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OnlineIndicator</h2><p>Reusable online indicator component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/opacity-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'opacityslider opacityslider content reusable opacity slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OpacitySlider</h2><p>Reusable opacity slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/open-apicta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'openapicta openapicta actions reusable open a p i c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>OpenAPICTA</h2><p>Reusable open a p i c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/optional-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'optionalindicator optionalindicator feedback reusable optional indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OptionalIndicator</h2><p>Reusable optional indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/organization-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'organizationselector organizationselector forms reusable organization selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>OrganizationSelector</h2><p>Reusable organization selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/otp-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'otpinput otpinput forms reusable otp input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>OtpInput</h2><p>Reusable otp input component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/otp-verification-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'otpverificationform otpverificationform content reusable otp verification form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OtpVerificationForm</h2><p>Reusable otp verification form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/outlined-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'outlinedcard outlinedcard content reusable outlined card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OutlinedCard</h2><p>Reusable outlined card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/page-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'pagealert pagealert feedback reusable page alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PageAlert</h2><p>Reusable page alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/page-header" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageheader pageheader core reusable page header component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageHeader</h2><p>Reusable page header component.</p><div class="component-card-meta"><span>16 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/page-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageheading pageheading core reusable page heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageHeading</h2><p>Reusable page heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/page-shell" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageshell pageshell core reusable page shell component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageShell</h2><p>Reusable page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/page-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'pageskeleton pageskeleton feedback reusable page skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PageSkeleton</h2><p>Reusable page skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pagination pagination core reusable pagination component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Pagination</h2><p>Reusable pagination component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'panel panel layout reusable panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Panel</h2><p>Reusable panel component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/partner-application-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'partnerapplicationform partnerapplicationform content reusable partner application form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PartnerApplicationForm</h2><p>Reusable partner application form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/partner-logo-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'partnerlogogrid partnerlogogrid data reusable partner logo grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PartnerLogoGrid</h2><p>Reusable partner logo grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/partner-program-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'partnerprogramcard partnerprogramcard content reusable partner program card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PartnerProgramCard</h2><p>Reusable partner program card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/passkey-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'passkeybutton passkeybutton actions reusable passkey button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PasskeyButton</h2><p>Reusable passkey button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'passwordinput passwordinput forms reusable password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PasswordInput</h2><p>Reusable password input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/password-requirement-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'passwordrequirementlist passwordrequirementlist data reusable password requirement list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PasswordRequirementList</h2><p>Reusable password requirement list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/password-strength-meter" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'passwordstrengthmeter passwordstrengthmeter visualization reusable password strength meter component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>PasswordStrengthMeter</h2><p>Reusable password strength meter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/password-visibility-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'passwordvisibilitytoggle passwordvisibilitytoggle forms reusable password visibility toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PasswordVisibilityToggle</h2><p>Reusable password visibility toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/path-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pathinput pathinput forms reusable path input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PathInput</h2><p>Reusable path input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/payment-method-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'paymentmethodcard paymentmethodcard content reusable payment method card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PaymentMethodCard</h2><p>Reusable payment method card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pdf-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pdfpreview pdfpreview content reusable pdf preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PdfPreview</h2><p>Reusable pdf preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/percentage-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'percentageinput percentageinput forms reusable percentage input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PercentageInput</h2><p>Reusable percentage input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/permission-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'permissionselector permissionselector forms reusable permission selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PermissionSelector</h2><p>Reusable permission selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/phone-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'phoneinput phoneinput forms reusable phone input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PhoneInput</h2><p>Reusable phone input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pie-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'piechart piechart visualization reusable pie chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>PieChart</h2><p>Reusable pie chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pill" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pill pill core reusable pill component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Pill</h2><p>Reusable pill component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pin-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pininput pininput forms reusable pin input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PinInput</h2><p>Reusable pin input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/plain-text-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'plaintexteditor plaintexteditor forms reusable plain text editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PlainTextEditor</h2><p>Reusable plain text editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/plan-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'plancta plancta actions reusable plan c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PlanCTA</h2><p>Reusable plan c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/plan-feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'planfeaturelist planfeaturelist data reusable plan feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PlanFeatureList</h2><p>Reusable plan feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/plan-limit-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'planlimitlist planlimitlist data reusable plan limit list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PlanLimitList</h2><p>Reusable plan limit list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/plan-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'planselector planselector forms reusable plan selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PlanSelector</h2><p>Reusable plan selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/platform-pillar-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'platformpillarcard platformpillarcard content reusable platform pillar card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PlatformPillarCard</h2><p>Reusable platform pillar card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/policy-version-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'policyversiontable policyversiontable data reusable policy version table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PolicyVersionTable</h2><p>Reusable policy version table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/popover" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'popover popover overlays reusable popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Reusable popover component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/port-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'portinput portinput forms reusable port input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PortInput</h2><p>Reusable port input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/port-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'portnumberinput portnumberinput forms reusable port number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PortNumberInput</h2><p>Reusable port number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/positive-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'positivenumberinput positivenumberinput forms reusable positive number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PositiveNumberInput</h2><p>Reusable positive number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/postal-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'postalcodeinput postalcodeinput forms reusable postal code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PostalCodeInput</h2><p>Reusable postal code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/postman-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'postmancta postmancta actions reusable postman c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PostmanCTA</h2><p>Reusable postman c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/preset-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'presetdaterangepicker presetdaterangepicker forms reusable preset date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PresetDateRangePicker</h2><p>Reusable preset date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/press-release-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pressreleasecard pressreleasecard content reusable press release card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PressReleaseCard</h2><p>Reusable press release card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/preview-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'previewbadge previewbadge feedback reusable preview badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PreviewBadge</h2><p>Reusable preview badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/previous-next-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'previousnextnavigation previousnextnavigation layout reusable previous next navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PreviousNextNavigation</h2><p>Reusable previous next navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/price-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'priceinput priceinput forms reusable price input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PriceInput</h2><p>Reusable price input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/price-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricerangeslider pricerangeslider content reusable price range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PriceRangeSlider</h2><p>Reusable price range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/price-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricetext pricetext content reusable price text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PriceText</h2><p>Reusable price text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingcard pricingcard content reusable pricing card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingCard</h2><p>Reusable pricing card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricingcomparisontable pricingcomparisontable data reusable pricing comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingComparisonTable</h2><p>Reusable pricing comparison table component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-contact-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingcontactform pricingcontactform content reusable pricing contact form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingContactForm</h2><p>Reusable pricing contact form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-feature-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pricingfeaturegroup pricingfeaturegroup forms reusable pricing feature group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PricingFeatureGroup</h2><p>Reusable pricing feature group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricinggrid pricinggrid data reusable pricing grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingGrid</h2><p>Reusable pricing grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'pricinghero pricinghero layout reusable pricing hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PricingHero</h2><p>Reusable pricing hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-plan-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingplancard pricingplancard content reusable pricing plan card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingPlanCard</h2><p>Reusable pricing plan card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricingtable pricingtable data reusable pricing table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingTable</h2><p>Reusable pricing table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pricing-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pricingtoggle pricingtoggle forms reusable pricing toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PricingToggle</h2><p>Reusable pricing toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/primary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'primarybutton primarybutton actions reusable primary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrimaryButton</h2><p>Reusable primary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/print-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'printaction printaction actions reusable print action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrintAction</h2><p>Reusable print action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/print-policy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'printpolicybutton printpolicybutton actions reusable print policy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrintPolicyButton</h2><p>Reusable print policy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/priority-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'priorityselector priorityselector forms reusable priority selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PrioritySelector</h2><p>Reusable priority selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/privacy-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'privacynotice privacynotice feedback reusable privacy notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PrivacyNotice</h2><p>Reusable privacy notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-architecture-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'productarchitecturediagram productarchitecturediagram visualization reusable product architecture diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProductArchitectureDiagram</h2><p>Reusable product architecture diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productcard productcard content reusable product card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductCard</h2><p>Reusable product card component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-category-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'productcategorysection productcategorysection layout reusable product category section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductCategorySection</h2><p>Reusable product category section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'productcta productcta actions reusable product c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ProductCTA</h2><p>Reusable product c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productfeaturelist productfeaturelist data reusable product feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductFeatureList</h2><p>Reusable product feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productgrid productgrid data reusable product grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductGrid</h2><p>Reusable product grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'producthero producthero layout reusable product hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductHero</h2><p>Reusable product hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'producticon producticon content reusable product icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductIcon</h2><p>Reusable product icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-integration-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productintegrationlist productintegrationlist data reusable product integration list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductIntegrationList</h2><p>Reusable product integration list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productlist productlist data reusable product list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductList</h2><p>Reusable product list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productlogo productlogo content reusable product logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductLogo</h2><p>Reusable product logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-mega-menu" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'productmegamenu productmegamenu core reusable product mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ProductMegaMenu</h2><p>Reusable product mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-mini-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productminicard productminicard content reusable product mini card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductMiniCard</h2><p>Reusable product mini card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-navigation-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productnavigationcard productnavigationcard content reusable product navigation card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductNavigationCard</h2><p>Reusable product navigation card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'productpageshell productpageshell layout reusable product page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductPageShell</h2><p>Reusable product page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'productselector productselector forms reusable product selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProductSelector</h2><p>Reusable product selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/products-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'productsmegamenu productsmegamenu overlays reusable products mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ProductsMegaMenu</h2><p>Reusable products mega menu component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'productstatusbadge productstatusbadge feedback reusable product status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ProductStatusBadge</h2><p>Reusable product status badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/product-use-case-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productusecaselist productusecaselist data reusable product use case list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductUseCaseList</h2><p>Reusable product use case list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/progress" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'progress progress core reusable progress component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>progress</h2><p>Reusable progress component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/progress-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'progressbar progressbar core reusable progress bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ProgressBar</h2><p>Reusable progress bar component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/progress-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'progresschart progresschart visualization reusable progress chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProgressChart</h2><p>Reusable progress chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/progress-ring" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'progressring progressring visualization reusable progress ring component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProgressRing</h2><p>Reusable progress ring component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/progress-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'progressslider progressslider content reusable progress slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProgressSlider</h2><p>Reusable progress slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/project-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'projectcard projectcard content reusable project card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProjectCard</h2><p>Reusable project card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/project-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'projectselector projectselector forms reusable project selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProjectSelector</h2><p>Reusable project selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/project-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'projectswitcher projectswitcher content reusable project switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProjectSwitcher</h2><p>Reusable project switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/promo-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'promocodeinput promocodeinput forms reusable promo code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PromoCodeInput</h2><p>Reusable promo code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/prompt-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'promptdialog promptdialog overlays reusable prompt dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>PromptDialog</h2><p>Reusable prompt dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/provider-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'providerselector providerselector forms reusable provider selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProviderSelector</h2><p>Reusable provider selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/public-footer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicfooter publicfooter core reusable public footer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicFooter</h2><p>Reusable public footer component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/public-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'publicheader publicheader layout reusable public header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PublicHeader</h2><p>Reusable public header component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/public-header-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'publicheaderlogo publicheaderlogo content reusable public header logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PublicHeaderLogo</h2><p>Reusable public header logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/public-mobile-navigation" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicmobilenavigation publicmobilenavigation core reusable public mobile navigation component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicMobileNavigation</h2><p>Reusable public mobile navigation component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/public-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'publicpageshell publicpageshell layout reusable public page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PublicPageShell</h2><p>Reusable public page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/public-search" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicsearch publicsearch core reusable public search component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicSearch</h2><p>Reusable public search component.</p><div class="component-card-meta"><span>15 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/publish-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'publishdatetimepicker publishdatetimepicker forms reusable publish date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PublishDateTimePicker</h2><p>Reusable publish date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/push-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pushcomposer pushcomposer content reusable push composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PushComposer</h2><p>Reusable push composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/push-notification-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pushnotificationeditor pushnotificationeditor forms reusable push notification editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PushNotificationEditor</h2><p>Reusable push notification editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/qr-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'qrcode qrcode content reusable qr code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QrCode</h2><p>Reusable qr code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/quantity-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'quantityinput quantityinput forms reusable quantity input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>QuantityInput</h2><p>Reusable quantity input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/quantity-stepper" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'quantitystepper quantitystepper content reusable quantity stepper component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QuantityStepper</h2><p>Reusable quantity stepper component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/quiet-hours-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'quiethourspicker quiethourspicker forms reusable quiet hours picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>QuietHoursPicker</h2><p>Reusable quiet hours picker component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/quote-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'quotetext quotetext content reusable quote text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QuoteText</h2><p>Reusable quote text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/radio" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'radio radio core reusable radio component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Radio</h2><p>Reusable radio component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/radio-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radiogroup radiogroup forms reusable radio group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RadioGroup</h2><p>Reusable radio group component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/range-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rangeinput rangeinput forms reusable range input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeInput</h2><p>Reusable range input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'rangeslider rangeslider content reusable range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RangeSlider</h2><p>Reusable range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rate-limited-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'ratelimitedstate ratelimitedstate feedback reusable rate limited state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RateLimitedState</h2><p>Reusable rate limited state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rate-limit-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'ratelimitinput ratelimitinput forms reusable rate limit input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RateLimitInput</h2><p>Reusable rate limit input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rate-limit-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'ratelimitpage ratelimitpage content reusable rate limit page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RateLimitPage</h2><p>Reusable rate limit page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rate-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'ratetable ratetable data reusable rate table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RateTable</h2><p>Reusable rate table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rating-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'ratingslider ratingslider content reusable rating slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RatingSlider</h2><p>Reusable rating slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/recipient-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recipientselector recipientselector forms reusable recipient selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecipientSelector</h2><p>Reusable recipient selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/recovery-code-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'recoverycodeform recoverycodeform content reusable recovery code form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RecoveryCodeForm</h2><p>Reusable recovery code form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/recovery-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recoverycodeinput recoverycodeinput forms reusable recovery code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecoveryCodeInput</h2><p>Reusable recovery code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/recurrence-rule-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'recurrencerulebuilder recurrencerulebuilder content reusable recurrence rule builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RecurrenceRuleBuilder</h2><p>Reusable recurrence rule builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/recurring-schedule-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recurringschedulepicker recurringschedulepicker forms reusable recurring schedule picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecurringSchedulePicker</h2><p>Reusable recurring schedule picker component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/redirect-uri-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'redirecturiinput redirecturiinput forms reusable redirect uri input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RedirectUriInput</h2><p>Reusable redirect uri input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/reference-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'referenceinput referenceinput forms reusable reference input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ReferenceInput</h2><p>Reusable reference input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/regex-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'regexinput regexinput forms reusable regex input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RegexInput</h2><p>Reusable regex input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/regional-privacy-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionalprivacybanner regionalprivacybanner feedback reusable regional privacy banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionalPrivacyBanner</h2><p>Reusable regional privacy banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/region-availability-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'regionavailabilitytable regionavailabilitytable data reusable region availability table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RegionAvailabilityTable</h2><p>Reusable region availability table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/region-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'regionselector regionselector forms reusable region selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RegionSelector</h2><p>Reusable region selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/region-unavailable-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionunavailablealert regionunavailablealert feedback reusable region unavailable alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionUnavailableAlert</h2><p>Reusable region unavailable alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/region-unavailable-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionunavailablestate regionunavailablestate feedback reusable region unavailable state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionUnavailableState</h2><p>Reusable region unavailable state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/reject-optional-cookies-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'rejectoptionalcookiesbutton rejectoptionalcookiesbutton actions reusable reject optional cookies button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>RejectOptionalCookiesButton</h2><p>Reusable reject optional cookies button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/reopen-cookie-settings-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'reopencookiesettingsbutton reopencookiesettingsbutton actions reusable reopen cookie settings button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ReopenCookieSettingsButton</h2><p>Reusable reopen cookie settings button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/report-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'reportcard reportcard content reusable report card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ReportCard</h2><p>Reusable report card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/request-response-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'requestresponseviewer requestresponseviewer content reusable request response viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RequestResponseViewer</h2><p>Reusable request response viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/request-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'requestviewer requestviewer content reusable request viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RequestViewer</h2><p>Reusable request viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/required-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'requiredindicator requiredindicator feedback reusable required indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RequiredIndicator</h2><p>Reusable required indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/reset-password-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resetpasswordform resetpasswordform content reusable reset password form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResetPasswordForm</h2><p>Reusable reset password form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/resizable-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resizablepanel resizablepanel layout reusable resizable panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResizablePanel</h2><p>Reusable resizable panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/resource-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcecard resourcecard content reusable resource card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceCard</h2><p>Reusable resource card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/resource-download-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcedownloadcard resourcedownloadcard content reusable resource download card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceDownloadCard</h2><p>Reusable resource download card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/resource-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resourcepageshell resourcepageshell layout reusable resource page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResourcePageShell</h2><p>Reusable resource page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/resource-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcesearch resourcesearch content reusable resource search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceSearch</h2><p>Reusable resource search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/resources-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'resourcesmegamenu resourcesmegamenu overlays reusable resources mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ResourcesMegaMenu</h2><p>Reusable resources mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/resource-type-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'resourcetypebadge resourcetypebadge feedback reusable resource type badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ResourceTypeBadge</h2><p>Reusable resource type badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/response-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'responseviewer responseviewer content reusable response viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResponseViewer</h2><p>Reusable response viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/responsible-disclosure-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'responsibledisclosurecta responsibledisclosurecta actions reusable responsible disclosure c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ResponsibleDisclosureCTA</h2><p>Reusable responsible disclosure c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/responsive-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'responsivetable responsivetable data reusable responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ResponsiveTable</h2><p>Reusable responsive table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/results-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resultssection resultssection layout reusable results section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResultsSection</h2><p>Reusable results section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/retention-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'retentiontable retentiontable data reusable retention table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RetentionTable</h2><p>Reusable retention table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/retry-count-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'retrycountinput retrycountinput forms reusable retry count input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RetryCountInput</h2><p>Reusable retry count input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/revenue-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'revenuechart revenuechart visualization reusable revenue chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>RevenueChart</h2><p>Reusable revenue chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rgb-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rgbcolorinput rgbcolorinput forms reusable rgb color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RgbColorInput</h2><p>Reusable rgb color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rich-text-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'richtexteditor richtexteditor forms reusable rich text editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RichTextEditor</h2><p>Reusable rich text editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rich-text-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'richtextinput richtextinput forms reusable rich text input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RichTextInput</h2><p>Reusable rich text input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/role-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'roleselector roleselector forms reusable role selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RoleSelector</h2><p>Reusable role selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rolling-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rollingdaterangepicker rollingdaterangepicker forms reusable rolling date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RollingDateRangePicker</h2><p>Reusable rolling date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/save-cookie-preferences-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'savecookiepreferencesbutton savecookiepreferencesbutton actions reusable save cookie preferences button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SaveCookiePreferencesButton</h2><p>Reusable save cookie preferences button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/saved-filter-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'savedfilterselector savedfilterselector forms reusable saved filter selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SavedFilterSelector</h2><p>Reusable saved filter selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/scheduled-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'scheduleddatetimepicker scheduleddatetimepicker forms reusable scheduled date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ScheduledDateTimePicker</h2><p>Reusable scheduled date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/schedule-message-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'schedulemessagepicker schedulemessagepicker forms reusable schedule message picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ScheduleMessagePicker</h2><p>Reusable schedule message picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/schedule-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'schedulepicker schedulepicker forms reusable schedule picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SchedulePicker</h2><p>Reusable schedule picker component.</p><div class="component-card-meta"><span>2 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/screenshot-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'screenshotframe screenshotframe layout reusable screenshot frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ScreenshotFrame</h2><p>Reusable screenshot frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/scroll-area" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'scrollarea scrollarea core reusable scroll area component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ScrollArea</h2><p>Reusable scroll area component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sdkcard" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sdkcard sdkcard content reusable s d k card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SDKCard</h2><p>Reusable s d k card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sdk-language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'sdklanguageselector sdklanguageselector forms reusable sdk language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SdkLanguageSelector</h2><p>Reusable sdk language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sdklanguage-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sdklanguagetabs sdklanguagetabs content reusable s d k language tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SDKLanguageTabs</h2><p>Reusable s d k language tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sdktabs" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sdktabs sdktabs core reusable sdktabs component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SDKTabs</h2><p>Reusable sdktabs component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'searchbutton searchbutton actions reusable search button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SearchButton</h2><p>Reusable search button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-category-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'searchcategorytabs searchcategorytabs content reusable search category tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SearchCategoryTabs</h2><p>Reusable search category tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'searchdialog searchdialog overlays reusable search dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SearchDialog</h2><p>Reusable search dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'searchemptystate searchemptystate feedback reusable search empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SearchEmptyState</h2><p>Reusable search empty state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'searchinput searchinput forms reusable search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SearchInput</h2><p>Reusable search input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-loading-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'searchloadingstate searchloadingstate feedback reusable search loading state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SearchLoadingState</h2><p>Reusable search loading state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-result-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'searchresultitem searchresultitem content reusable search result item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SearchResultItem</h2><p>Reusable search result item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/secondary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'secondarybutton secondarybutton actions reusable secondary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SecondaryButton</h2><p>Reusable secondary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/second-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'secondpicker secondpicker forms reusable second picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SecondPicker</h2><p>Reusable second picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/secret-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'secretdisplay secretdisplay content reusable secret display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecretDisplay</h2><p>Reusable secret display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/secret-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'secretinput secretinput forms reusable secret input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SecretInput</h2><p>Reusable secret input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/secret-reveal-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'secretrevealdialog secretrevealdialog overlays reusable secret reveal dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SecretRevealDialog</h2><p>Reusable secret reveal dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'section section layout reusable section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Section</h2><p>Reusable section component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/section-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'sectionactions sectionactions actions reusable section actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SectionActions</h2><p>Reusable section actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sectionheader sectionheader layout reusable section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SectionHeader</h2><p>Reusable section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/section-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sectionheading sectionheading core reusable section heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SectionHeading</h2><p>Reusable section heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/security-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'securityalert securityalert feedback reusable security alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SecurityAlert</h2><p>Reusable security alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/security-contact-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securitycontactcard securitycontactcard content reusable security contact card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityContactCard</h2><p>Reusable security contact card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/security-feature-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securityfeaturecard securityfeaturecard content reusable security feature card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityFeatureCard</h2><p>Reusable security feature card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/security-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'securityhero securityhero layout reusable security hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SecurityHero</h2><p>Reusable security hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/security-pillar-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'securitypillargrid securitypillargrid data reusable security pillar grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SecurityPillarGrid</h2><p>Reusable security pillar grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/security-practice-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'securitypracticelist securitypracticelist data reusable security practice list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SecurityPracticeList</h2><p>Reusable security practice list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/security-report-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securityreportform securityreportform content reusable security report form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityReportForm</h2><p>Reusable security report form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'select select core reusable select component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Select</h2><p>Reusable select component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sender-id-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'senderidinput senderidinput forms reusable sender id input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SenderIdInput</h2><p>Reusable sender id input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/server-error-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'servererrorpage servererrorpage content reusable server error page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ServerErrorPage</h2><p>Reusable server error page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/service-level-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'serviceleveltable serviceleveltable data reusable service level table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceLevelTable</h2><p>Reusable service level table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/service-status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'servicestatusbadge servicestatusbadge feedback reusable service status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ServiceStatusBadge</h2><p>Reusable service status badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/service-status-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'servicestatuslist servicestatuslist data reusable service status list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceStatusList</h2><p>Reusable service status list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/service-status-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'servicestatusrow servicestatusrow data reusable service status row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceStatusRow</h2><p>Reusable service status row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/session-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sessioncard sessioncard content reusable session card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SessionCard</h2><p>Reusable session card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/session-expired-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'sessionexpireddialog sessionexpireddialog overlays reusable session expired dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SessionExpiredDialog</h2><p>Reusable session expired dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/setup-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'setupchecklist setupchecklist content reusable setup checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SetupChecklist</h2><p>Reusable setup checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/severity-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'severityselector severityselector forms reusable severity selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SeveritySelector</h2><p>Reusable severity selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/shadow-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'shadowpicker shadowpicker forms reusable shadow picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ShadowPicker</h2><p>Reusable shadow picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/share-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'shareaction shareaction actions reusable share action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ShareAction</h2><p>Reusable share action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/share-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'sharebutton sharebutton actions reusable share button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ShareButton</h2><p>Reusable share button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sidebar-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sidebarlayout sidebarlayout layout reusable sidebar layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SidebarLayout</h2><p>Reusable sidebar layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/side-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sidepanel sidepanel layout reusable side panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SidePanel</h2><p>Reusable side panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sign-in-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'signinform signinform content reusable sign in form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SignInForm</h2><p>Reusable sign in form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sign-in-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'signinlink signinlink actions reusable sign in link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SignInLink</h2><p>Reusable sign in link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sign-up-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'signupform signupform content reusable sign up form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SignUpForm</h2><p>Reusable sign up form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/site-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sitesearch sitesearch content reusable site search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SiteSearch</h2><p>Reusable site search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'skeleton skeleton feedback reusable skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Skeleton</h2><p>Reusable skeleton component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/skip-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'skiplink skiplink actions reusable skip link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SkipLink</h2><p>Reusable skip link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sla-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'slatable slatable data reusable sla table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SlaTable</h2><p>Reusable sla table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'slider slider content reusable slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Slider</h2><p>Reusable slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/slug-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'sluginput sluginput forms reusable slug input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SlugInput</h2><p>Reusable slug input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/small-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'smalltext smalltext content reusable small text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SmallText</h2><p>Reusable small text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/smart-route-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'smartroutediagram smartroutediagram visualization reusable smart route diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>SmartRouteDiagram</h2><p>Reusable smart route diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sms-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'smscomposer smscomposer content reusable sms composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SmsComposer</h2><p>Reusable sms composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sms-message-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'smsmessageeditor smsmessageeditor forms reusable sms message editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SmsMessageEditor</h2><p>Reusable sms message editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sms-segment-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'smssegmentcounter smssegmentcounter feedback reusable sms segment counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SmsSegmentCounter</h2><p>Reusable sms segment counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/social-share" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'socialshare socialshare core reusable social share component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SocialShare</h2><p>Reusable social share component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/solution-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionhero solutionhero layout reusable solution hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionHero</h2><p>Reusable solution hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/solution-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionpageshell solutionpageshell layout reusable solution page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionPageShell</h2><p>Reusable solution page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/solution-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionsection solutionsection layout reusable solution section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionSection</h2><p>Reusable solution section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/solutions-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'solutionsmegamenu solutionsmegamenu overlays reusable solutions mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SolutionsMegaMenu</h2><p>Reusable solutions mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sortable-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'sortabletable sortabletable data reusable sortable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SortableTable</h2><p>Reusable sortable table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/spacer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'spacer spacer core reusable spacer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>spacer</h2><p>Reusable spacer component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/spinner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'spinner spinner core reusable spinner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Spinner</h2><p>Reusable spinner component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/split-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'splitbutton splitbutton actions reusable split button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SplitButton</h2><p>Reusable split button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/split-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'splitcta splitcta actions reusable split c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SplitCTA</h2><p>Reusable split c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/split-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splithero splithero layout reusable split hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitHero</h2><p>Reusable split hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/split-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splitlayout splitlayout layout reusable split layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitLayout</h2><p>Reusable split layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/split-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splitsectionheader splitsectionheader layout reusable split section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitSectionHeader</h2><p>Reusable split section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/stack" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'stack stack core reusable stack component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Stack</h2><p>Reusable stack component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/start-free-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'startfreebutton startfreebutton actions reusable start free button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>StartFreeButton</h2><p>Reusable start free button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/stat-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'statcard statcard content reusable stat card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>StatCard</h2><p>Reusable stat card component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/state-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stateselector stateselector forms reusable state selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StateSelector</h2><p>Reusable state selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'statusbadge statusbadge feedback reusable status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>StatusBadge</h2><p>Reusable status badge component.</p><div class="component-card-meta"><span>2 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/status-banner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'statusbanner statusbanner core reusable status banner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>StatusBanner</h2><p>Reusable status banner component.</p><div class="component-card-meta"><span>9 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/status-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'statuspageshell statuspageshell layout reusable status page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StatusPageShell</h2><p>Reusable status page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/status-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'statusselector statusselector forms reusable status selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StatusSelector</h2><p>Reusable status selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/status-subscribe-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'statussubscribeform statussubscribeform content reusable status subscribe form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>StatusSubscribeForm</h2><p>Reusable status subscribe form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/status-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'statustable statustable data reusable status table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>StatusTable</h2><p>Reusable status table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/step-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'stepnavigation stepnavigation layout reusable step navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StepNavigation</h2><p>Reusable step navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/stepper" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'stepper stepper content reusable stepper component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Stepper</h2><p>Reusable stepper component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/stepper-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stepperinput stepperinput forms reusable stepper input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StepperInput</h2><p>Reusable stepper input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/step-up-authentication-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'stepupauthenticationdialog stepupauthenticationdialog overlays reusable step up authentication dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>StepUpAuthenticationDialog</h2><p>Reusable step up authentication dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sticker-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stickerpicker stickerpicker forms reusable sticker picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StickerPicker</h2><p>Reusable sticker picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sticky" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sticky sticky core reusable sticky component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Sticky</h2><p>Reusable sticky component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sticky-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'stickylayout stickylayout layout reusable sticky layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StickyLayout</h2><p>Reusable sticky layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/street-address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'streetaddressinput streetaddressinput forms reusable street address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StreetAddressInput</h2><p>Reusable street address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/subdomain-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'subdomaininput subdomaininput forms reusable subdomain input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SubdomainInput</h2><p>Reusable subdomain input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/subject-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'subjectinput subjectinput forms reusable subject input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SubjectInput</h2><p>Reusable subject input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/subprocessor-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'subprocessortable subprocessortable data reusable subprocessor table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SubprocessorTable</h2><p>Reusable subprocessor table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/subsection-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'subsectionheading subsectionheading core reusable subsection heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SubsectionHeading</h2><p>Reusable subsection heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/success-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'successcard successcard content reusable success card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SuccessCard</h2><p>Reusable success card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/success-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'successstate successstate feedback reusable success state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SuccessState</h2><p>Reusable success state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/support-request-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'supportrequestform supportrequestform content reusable support request form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SupportRequestForm</h2><p>Reusable support request form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/surface" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'surface surface core reusable surface component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Surface</h2><p>Reusable surface component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/switch" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'switch switch core reusable switch component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Switch</h2><p>Reusable switch component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'table table data reusable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>Table</h2><p>Reusable table component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/table-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'tableheader tableheader layout reusable table header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>TableHeader</h2><p>Reusable table header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/table-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'tablerow tablerow data reusable table row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TableRow</h2><p>Reusable table row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/table-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'tableskeleton tableskeleton feedback reusable table skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TableSkeleton</h2><p>Reusable table skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'tabs tabs content reusable tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Tabs</h2><p>Reusable tabs component.</p><div class="component-card-meta"><span>2 props</span><span>2 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tag" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'tag tag core reusable tag component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>tag</h2><p>Reusable tag component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tag-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'taginput taginput forms reusable tag input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TagInput</h2><p>Reusable tag input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tax-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'taxnotice taxnotice feedback reusable tax notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TaxNotice</h2><p>Reusable tax notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tax-rate-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'taxrateinput taxrateinput forms reusable tax rate input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TaxRateInput</h2><p>Reusable tax rate input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/team-member-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'teammembercard teammembercard content reusable team member card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TeamMemberCard</h2><p>Reusable team member card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/team-size-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'teamsizeselector teamsizeselector forms reusable team size selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TeamSizeSelector</h2><p>Reusable team size selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/template-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'templatecard templatecard content reusable template card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TemplateCard</h2><p>Reusable template card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/template-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'templateselector templateselector forms reusable template selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TemplateSelector</h2><p>Reusable template selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/template-variable-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'templatevariableinput templatevariableinput forms reusable template variable input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TemplateVariableInput</h2><p>Reusable template variable input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tenant-isolation-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'tenantisolationdiagram tenantisolationdiagram visualization reusable tenant isolation diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>TenantIsolationDiagram</h2><p>Reusable tenant isolation diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/terminal-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'terminalblock terminalblock content reusable terminal block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TerminalBlock</h2><p>Reusable terminal block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tertiary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'tertiarybutton tertiarybutton actions reusable tertiary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>TertiaryButton</h2><p>Reusable tertiary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/testimonial-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'testimonialcard testimonialcard content reusable testimonial card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TestimonialCard</h2><p>Reusable testimonial card component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/testimonial-carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'testimonialcarousel testimonialcarousel content reusable testimonial carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TestimonialCarousel</h2><p>Reusable testimonial carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/test-message-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'testmessagedialog testmessagedialog overlays reusable test message dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>TestMessageDialog</h2><p>Reusable test message dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'textarea textarea core reusable textarea component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Textarea</h2><p>Reusable textarea component.</p><div class="component-card-meta"><span>11 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/text-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textinput textinput forms reusable text input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TextInput</h2><p>Reusable text input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/text-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'textlink textlink actions reusable text link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>TextLink</h2><p>Reusable text link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/text-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'textskeleton textskeleton feedback reusable text skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TextSkeleton</h2><p>Reusable text skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/theme-toggle" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'theme-toggle theme-toggle core reusable theme-toggle component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>theme-toggle</h2><p>Reusable theme-toggle component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/theme-color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'themecolorpicker themecolorpicker forms reusable theme color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ThemeColorPicker</h2><p>Reusable theme color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/theme-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'themeswitcher themeswitcher content reusable theme switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ThemeSwitcher</h2><p>Reusable theme switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/time-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timeinput timeinput forms reusable time input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeInput</h2><p>Reusable time input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'timeline timeline visualization reusable timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>Timeline</h2><p>Reusable timeline component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timeline-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'timelinechart timelinechart visualization reusable timeline chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>TimelineChart</h2><p>Reusable timeline chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timeline-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'timelineitem timelineitem content reusable timeline item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TimelineItem</h2><p>Reusable timeline item component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timeout-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timeoutinput timeoutinput forms reusable timeout input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeoutInput</h2><p>Reusable timeout input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms reusable time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Reusable time picker component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/time-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timerangepicker timerangepicker forms reusable time range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeRangePicker</h2><p>Reusable time range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timezone-aware-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timezoneawaretimepicker timezoneawaretimepicker forms reusable timezone aware time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimezoneAwareTimePicker</h2><p>Reusable timezone aware time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timezone-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timezoneselector timezoneselector forms reusable timezone selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimezoneSelector</h2><p>Reusable timezone selector component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'toast toast core reusable toast component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Toast</h2><p>Reusable toast component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'toastaction toastaction actions reusable toast action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ToastAction</h2><p>Reusable toast action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast-host" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'toasthost toasthost core reusable toast host component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ToastHost</h2><p>Reusable toast host component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'toasticon toasticon content reusable toast icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ToastIcon</h2><p>Reusable toast icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'toastprogress toastprogress visualization reusable toast progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ToastProgress</h2><p>Reusable toast progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'toggle toggle forms reusable toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Toggle</h2><p>Reusable toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toggle-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'togglegroup togglegroup forms reusable toggle group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ToggleGroup</h2><p>Reusable toggle group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/token-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'tokeninput tokeninput forms reusable token input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TokenInput</h2><p>Reusable token input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'tooltip tooltip content reusable tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Tooltip</h2><p>Reusable tooltip component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/totp-verification-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'totpverificationform totpverificationform content reusable totp verification form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TotpVerificationForm</h2><p>Reusable totp verification form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/translated-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'translatedtext translatedtext content reusable translated text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TranslatedText</h2><p>Reusable translated text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tree-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'treetable treetable data reusable tree table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TreeTable</h2><p>Reusable tree table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/trend-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'trendindicator trendindicator feedback reusable trend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TrendIndicator</h2><p>Reusable trend indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/truncated-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'truncatedtext truncatedtext content reusable truncated text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TruncatedText</h2><p>Reusable truncated text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/trust-badge-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'trustbadgelist trustbadgelist data reusable trust badge list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TrustBadgeList</h2><p>Reusable trust badge list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/typography" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'typography typography core reusable typography component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Typography</h2><p>Reusable typography component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/unavailable-region-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'unavailableregionstate unavailableregionstate feedback reusable unavailable region state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>UnavailableRegionState</h2><p>Reusable unavailable region state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/unified-timeline-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'unifiedtimelinepreview unifiedtimelinepreview content reusable unified timeline preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UnifiedTimelinePreview</h2><p>Reusable unified timeline preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/unsaved-changes-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'unsavedchangesdialog unsavedchangesdialog overlays reusable unsaved changes dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>UnsavedChangesDialog</h2><p>Reusable unsaved changes dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/upload-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'uploaditem uploaditem content reusable upload item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UploadItem</h2><p>Reusable upload item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/upload-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'uploadpreview uploadpreview content reusable upload preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UploadPreview</h2><p>Reusable upload preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/upload-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uploadprogress uploadprogress visualization reusable upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UploadProgress</h2><p>Reusable upload progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/uptime-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uptimechart uptimechart visualization reusable uptime chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UptimeChart</h2><p>Reusable uptime chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/uptime-metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uptimemetric uptimemetric visualization reusable uptime metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UptimeMetric</h2><p>Reusable uptime metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'urlinput urlinput forms reusable url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UrlInput</h2><p>Reusable url input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/usage-pricing-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'usagepricingtable usagepricingtable data reusable usage pricing table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>UsagePricingTable</h2><p>Reusable usage pricing table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/use-case-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'usecaseselector usecaseselector forms reusable use case selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UseCaseSelector</h2><p>Reusable use case selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/user-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'usercard usercard content reusable user card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UserCard</h2><p>Reusable user card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/username-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'usernameinput usernameinput forms reusable username input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UsernameInput</h2><p>Reusable username input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/value-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'valuecard valuecard content reusable value card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ValueCard</h2><p>Reusable value card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/values-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'valuesgrid valuesgrid data reusable values grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ValuesGrid</h2><p>Reusable values grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/verification-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'verificationcodeinput verificationcodeinput forms reusable verification code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VerificationCodeInput</h2><p>Reusable verification code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/verified-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'verifiedbadge verifiedbadge feedback reusable verified badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>VerifiedBadge</h2><p>Reusable verified badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/version-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'versionselector versionselector forms reusable version selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VersionSelector</h2><p>Reusable version selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/vertical-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'verticaltabs verticaltabs content reusable vertical tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VerticalTabs</h2><p>Reusable vertical tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/video-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'videocard videocard content reusable video card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VideoCard</h2><p>Reusable video card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/video-preview-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'videopreviewdialog videopreviewdialog overlays reusable video preview dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>VideoPreviewDialog</h2><p>Reusable video preview dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/video-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'videoupload videoupload content reusable video upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VideoUpload</h2><p>Reusable video upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/virtualized-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'virtualizedtable virtualizedtable data reusable virtualized table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>VirtualizedTable</h2><p>Reusable virtualized table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/vision-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'visionsection visionsection layout reusable vision section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>VisionSection</h2><p>Reusable vision section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/visually-hidden" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'visuallyhidden visuallyhidden core reusable visually hidden component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>VisuallyHidden</h2><p>Reusable visually hidden component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/voice-script-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'voicescriptcomposer voicescriptcomposer content reusable voice script composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VoiceScriptComposer</h2><p>Reusable voice script composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/voice-script-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'voicescripteditor voicescripteditor forms reusable voice script editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VoiceScriptEditor</h2><p>Reusable voice script editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/volume-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'volumeinput volumeinput forms reusable volume input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VolumeInput</h2><p>Reusable volume input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/volume-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'volumeslider volumeslider content reusable volume slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VolumeSlider</h2><p>Reusable volume slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/warning-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'warningcard warningcard content reusable warning card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WarningCard</h2><p>Reusable warning card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/webhook-event-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webhookeventcard webhookeventcard content reusable webhook event card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebhookEventCard</h2><p>Reusable webhook event card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/webhook-flow-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'webhookflowdiagram webhookflowdiagram visualization reusable webhook flow diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>WebhookFlowDiagram</h2><p>Reusable webhook flow diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/webhook-payload-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webhookpayloadviewer webhookpayloadviewer content reusable webhook payload viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebhookPayloadViewer</h2><p>Reusable webhook payload viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/webhook-url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'webhookurlinput webhookurlinput forms reusable webhook url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WebhookUrlInput</h2><p>Reusable webhook url input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/webinar-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webinarcard webinarcard content reusable webinar card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebinarCard</h2><p>Reusable webinar card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/webinar-registration-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webinarregistrationform webinarregistrationform content reusable webinar registration form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebinarRegistrationForm</h2><p>Reusable webinar registration form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/well" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'well well core reusable well component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Well</h2><p>Reusable well component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/whats-app-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'whatsappcomposer whatsappcomposer content reusable whats app composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WhatsAppComposer</h2><p>Reusable whats app composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/whats-app-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'whatsappnumberinput whatsappnumberinput forms reusable whats app number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WhatsAppNumberInput</h2><p>Reusable whats app number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/whats-app-template-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'whatsapptemplateeditor whatsapptemplateeditor forms reusable whats app template editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WhatsAppTemplateEditor</h2><p>Reusable whats app template editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/wide-container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'widecontainer widecontainer core reusable wide container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>WideContainer</h2><p>Reusable wide container component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/wizard" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'wizard wizard content reusable wizard component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Wizard</h2><p>Reusable wizard component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/wizard-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'wizardheader wizardheader layout reusable wizard header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>WizardHeader</h2><p>Reusable wizard header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/wizard-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'wizardnavigation wizardnavigation layout reusable wizard navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>WizardNavigation</h2><p>Reusable wizard navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/workflow-canvas-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workflowcanvaspreview workflowcanvaspreview content reusable workflow canvas preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkflowCanvasPreview</h2><p>Reusable workflow canvas preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/workflow-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'workflowprogress workflowprogress visualization reusable workflow progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>WorkflowProgress</h2><p>Reusable workflow progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/workspace-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workspacecard workspacecard content reusable workspace card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkspaceCard</h2><p>Reusable workspace card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/workspace-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'workspaceselector workspaceselector forms reusable workspace selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WorkspaceSelector</h2><p>Reusable workspace selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/workspace-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workspaceswitcher workspaceswitcher content reusable workspace switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkspaceSwitcher</h2><p>Reusable workspace switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/year-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'yearpicker yearpicker forms reusable year picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>YearPicker</h2><p>Reusable year picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/zoom-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'zoomslider zoomslider content reusable zoom slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ZoomSlider</h2><p>Reusable zoom slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a></section></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page AcceptAllCookiesButtoncomponent {
|
||||
seo {
|
||||
title = "AcceptAllCookiesButton component"
|
||||
description = "Reusable accept all cookies button component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AcceptAllCookiesButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>AcceptAllCookiesButton</h1><p>Reusable accept all cookies button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AcceptAllCookiesButton label="Action" href="href" type="button" variant="primary" disabled="false" /></code></pre><p>Legacy mount name: <code>data-component="AcceptAllCookiesButton"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Action"</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"button"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AcceptAllCookiesButton.wrn</code></p><pre data-language="wrn"><code>component AcceptAllCookiesButton {
|
||||
props {
|
||||
label = "Action"
|
||||
href = ""
|
||||
type = "button"
|
||||
variant = "primary"
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AccessibleAccordioncomponent {
|
||||
seo {
|
||||
title = "AccessibleAccordion component"
|
||||
description = "Reusable accessible accordion component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleAccordion</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleAccordion</h1><p>Reusable accessible accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleAccordion eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleAccordion"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleAccordion.wrn</code></p><pre data-language="wrn"><code>component AccessibleAccordion {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AccessibleCarouselcomponent {
|
||||
seo {
|
||||
title = "AccessibleCarousel component"
|
||||
description = "Reusable accessible carousel component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleCarousel</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleCarousel</h1><p>Reusable accessible carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleCarousel eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleCarousel"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleCarousel.wrn</code></p><pre data-language="wrn"><code>component AccessibleCarousel {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AccessibleChartSummarycomponent {
|
||||
seo {
|
||||
title = "AccessibleChartSummary component"
|
||||
description = "Reusable accessible chart summary component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleChartSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleChartSummary</h1><p>Reusable accessible chart summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleChartSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleChartSummary"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleChartSummary.wrn</code></p><pre data-language="wrn"><code>component AccessibleChartSummary {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page AccessibleDialogcomponent {
|
||||
seo {
|
||||
title = "AccessibleDialog component"
|
||||
description = "Reusable accessible dialog component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccessibleDialog</h1><p>Reusable accessible dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleDialog title="title" description="description" open="false" closeLabel="Close" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleDialog"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleDialog.wrn</code></p><pre data-language="wrn"><code>component AccessibleDialog {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
open = false
|
||||
closeLabel = "Close"
|
||||
class = ""
|
||||
}
|
||||
view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AccessibleErrorSummarycomponent {
|
||||
seo {
|
||||
title = "AccessibleErrorSummary component"
|
||||
description = "Reusable accessible error summary component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleErrorSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleErrorSummary</h1><p>Reusable accessible error summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleErrorSummary eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleErrorSummary"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleErrorSummary.wrn</code></p><pre data-language="wrn"><code>component AccessibleErrorSummary {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AccessibleIconcomponent {
|
||||
seo {
|
||||
title = "AccessibleIcon component"
|
||||
description = "Reusable accessible icon component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleIcon</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleIcon</h1><p>Reusable accessible icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleIcon eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleIcon"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleIcon.wrn</code></p><pre data-language="wrn"><code>component AccessibleIcon {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page AccessibleMenucomponent {
|
||||
seo {
|
||||
title = "AccessibleMenu component"
|
||||
description = "Reusable accessible menu component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccessibleMenu</h1><p>Reusable accessible menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleMenu title="title" description="description" open="false" closeLabel="Close" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleMenu"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleMenu.wrn</code></p><pre data-language="wrn"><code>component AccessibleMenu {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
open = false
|
||||
closeLabel = "Close"
|
||||
class = ""
|
||||
}
|
||||
view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AccessibleTabscomponent {
|
||||
seo {
|
||||
title = "AccessibleTabs component"
|
||||
description = "Reusable accessible tabs component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleTabs</h1><p>Reusable accessible tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleTabs eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleTabs"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleTabs.wrn</code></p><pre data-language="wrn"><code>component AccessibleTabs {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AccessibleTooltipcomponent {
|
||||
seo {
|
||||
title = "AccessibleTooltip component"
|
||||
description = "Reusable accessible tooltip component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleTooltip</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleTooltip</h1><p>Reusable accessible tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccessibleTooltip eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AccessibleTooltip"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleTooltip.wrn</code></p><pre data-language="wrn"><code>component AccessibleTooltip {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
page Accordioncomponent {
|
||||
seo {
|
||||
title = "Accordion component"
|
||||
description = "Reusable accordion component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Accordion</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Accordion</h1><p>Reusable accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Accordion title="Question" open="false" /></code></pre><p>Legacy mount name: <code>data-component="Accordion"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Question"</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Accordion.wrn</code></p><pre data-language="wrn"><code>component Accordion {
|
||||
props {
|
||||
class = ""
|
||||
title = "Question"
|
||||
open = false
|
||||
}
|
||||
|
||||
state expanded = open
|
||||
|
||||
view {
|
||||
<div class="border-b border-slate-200 dark:border-slate-800 {class}" >
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between gap-4 py-5 text-left font-semibold"
|
||||
aria-expanded="{expanded}"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<span >
|
||||
{title}
|
||||
</span>
|
||||
<span class="text-xl transition-transform {expanded ? 'rotate-45' : ''}">+</span>
|
||||
</button>
|
||||
<div
|
||||
data-show="expanded"
|
||||
class="pb-5 text-slate-600 dark:text-slate-300"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page AccountMenucomponent {
|
||||
seo {
|
||||
title = "AccountMenu component"
|
||||
description = "Reusable account menu component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccountMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccountMenu</h1><p>Reusable account menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccountMenu title="title" description="description" open="false" closeLabel="Close" /></code></pre><p>Legacy mount name: <code>data-component="AccountMenu"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccountMenu.wrn</code></p><pre data-language="wrn"><code>component AccountMenu {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
open = false
|
||||
closeLabel = "Close"
|
||||
class = ""
|
||||
}
|
||||
view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page AccountStatusBannercomponent {
|
||||
seo {
|
||||
title = "AccountStatusBanner component"
|
||||
description = "Reusable account status banner component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccountStatusBanner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>AccountStatusBanner</h1><p>Reusable account status banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AccountStatusBanner label="AccountStatus" title="title" description="description" value="value" variant="default" /></code></pre><p>Legacy mount name: <code>data-component="AccountStatusBanner"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"AccountStatus"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccountStatusBanner.wrn</code></p><pre data-language="wrn"><code>component AccountStatusBanner {
|
||||
props {
|
||||
label = "AccountStatus"
|
||||
title = ""
|
||||
description = ""
|
||||
value = ""
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ActionMenucomponent {
|
||||
seo {
|
||||
title = "ActionMenu component"
|
||||
description = "Reusable action menu component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ActionMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ActionMenu</h1><p>Reusable action menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ActionMenu title="title" description="description" open="false" closeLabel="Close" /></code></pre><p>Legacy mount name: <code>data-component="ActionMenu"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ActionMenu.wrn</code></p><pre data-language="wrn"><code>component ActionMenu {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
open = false
|
||||
closeLabel = "Close"
|
||||
class = ""
|
||||
}
|
||||
view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ActiveFilterListcomponent {
|
||||
seo {
|
||||
title = "ActiveFilterList component"
|
||||
description = "Reusable active filter list component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ActiveFilterList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ActiveFilterList</h1><p>Reusable active filter list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ActiveFilterList title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="ActiveFilterList"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ActiveFilterList.wrn</code></p><pre data-language="wrn"><code>component ActiveFilterList {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ActivityListcomponent {
|
||||
seo {
|
||||
title = "ActivityList component"
|
||||
description = "Reusable activity list component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ActivityList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ActivityList</h1><p>Reusable activity list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ActivityList title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="ActivityList"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ActivityList.wrn</code></p><pre data-language="wrn"><code>component ActivityList {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AddOnCardcomponent {
|
||||
seo {
|
||||
title = "AddOnCard component"
|
||||
description = "Reusable add on card component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AddOnCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AddOnCard</h1><p>Reusable add on card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AddOnCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AddOnCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AddOnCard.wrn</code></p><pre data-language="wrn"><code>component AddOnCard {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page AddressInputcomponent {
|
||||
seo {
|
||||
title = "AddressInput component"
|
||||
description = "Reusable address input component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AddressInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AddressInput</h1><p>Reusable address input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AddressInput label="Address" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="AddressInput"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Address"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AddressInput.wrn</code></p><pre data-language="wrn"><code>component AddressInput {
|
||||
props {
|
||||
label = "Address"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AddressPreviewcomponent {
|
||||
seo {
|
||||
title = "AddressPreview component"
|
||||
description = "Reusable address preview component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AddressPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AddressPreview</h1><p>Reusable address preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AddressPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AddressPreview"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AddressPreview.wrn</code></p><pre data-language="wrn"><code>component AddressPreview {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AdvancedFilterBuildercomponent {
|
||||
seo {
|
||||
title = "AdvancedFilterBuilder component"
|
||||
description = "Reusable advanced filter builder component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedFilterBuilder</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AdvancedFilterBuilder</h1><p>Reusable advanced filter builder component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedFilterBuilder eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AdvancedFilterBuilder"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedFilterBuilder.wrn</code></p><pre data-language="wrn"><code>component AdvancedFilterBuilder {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page AlertDialogcomponent {
|
||||
seo {
|
||||
title = "AlertDialog component"
|
||||
description = "Reusable alert dialog component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AlertDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AlertDialog</h1><p>Reusable alert dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AlertDialog title="title" description="description" open="false" closeLabel="Close" /></code></pre><p>Legacy mount name: <code>data-component="AlertDialog"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AlertDialog.wrn</code></p><pre data-language="wrn"><code>component AlertDialog {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
open = false
|
||||
closeLabel = "Close"
|
||||
class = ""
|
||||
}
|
||||
view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
page Alertcomponent {
|
||||
seo {
|
||||
title = "Alert component"
|
||||
description = "Reusable alert component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Alert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Alert</h1><p>Reusable alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Alert title="Notice" description="description" variant="info" dismissible="false" /></code></pre><p>Legacy mount name: <code>data-component="Alert"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Notice"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"info"</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Alert.wrn</code></p><pre data-language="wrn"><code>component Alert {
|
||||
props {
|
||||
class = ""
|
||||
title = "Notice"
|
||||
description = ""
|
||||
variant = "info"
|
||||
dismissible = false
|
||||
}
|
||||
|
||||
state visible = true
|
||||
|
||||
view {
|
||||
<div
|
||||
data-show="visible"
|
||||
role="alert"
|
||||
class="flex items-start gap-3 rounded-2xl border p-4 {variant === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200' : variant === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200' : variant === 'danger' ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'} {class}"
|
||||
>
|
||||
<div class="min-w-0 flex-1" >
|
||||
<h3 class="font-semibold" >
|
||||
{title}
|
||||
</h3>
|
||||
<p
|
||||
data-show="description"
|
||||
class="mt-1 text-sm opacity-80"
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
<div class="mt-2" >
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
data-show="dismissible"
|
||||
type="button"
|
||||
aria-label="Dismiss"
|
||||
@click="visible = false"
|
||||
class="rounded-lg p-1 hover:bg-black/5"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page AmountInputcomponent {
|
||||
seo {
|
||||
title = "AmountInput component"
|
||||
description = "Reusable amount input component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AmountInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AmountInput</h1><p>Reusable amount input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AmountInput label="Amount" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="AmountInput"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Amount"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AmountInput.wrn</code></p><pre data-language="wrn"><code>component AmountInput {
|
||||
props {
|
||||
label = "Amount"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AnalyticsDashboardPreviewcomponent {
|
||||
seo {
|
||||
title = "AnalyticsDashboardPreview component"
|
||||
description = "Reusable analytics dashboard preview component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AnalyticsDashboardPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AnalyticsDashboardPreview</h1><p>Reusable analytics dashboard preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AnalyticsDashboardPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AnalyticsDashboardPreview"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AnalyticsDashboardPreview.wrn</code></p><pre data-language="wrn"><code>component AnalyticsDashboardPreview {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page AnchorNavigationcomponent {
|
||||
seo {
|
||||
title = "AnchorNavigation component"
|
||||
description = "Reusable anchor navigation component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AnchorNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>AnchorNavigation</h1><p>Reusable anchor navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AnchorNavigation eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="AnchorNavigation"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AnchorNavigation.wrn</code></p><pre data-language="wrn"><code>component AnchorNavigation {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
page AnnouncementBarcomponent {
|
||||
seo {
|
||||
title = "AnnouncementBar component"
|
||||
description = "Reusable announcement bar component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AnnouncementBar</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>AnnouncementBar</h1><p>Reusable announcement bar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AnnouncementBar badge="New" message="WRNexusJS Organizations is now available." description="Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO." href="/organizations" actionLabel="Explore organizations" /></code></pre><p>Legacy mount name: <code>data-component="AnnouncementBar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>badge</code></td><td><code>string</code></td><td>Optional</td><td><code>"New"</code></td></tr><tr><td><code>message</code></td><td><code>string</code></td><td>Optional</td><td><code>"WRNexusJS Organizations is now available."</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>"Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>"/organizations"</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Explore organizations"</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Announcement"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AnnouncementBar.wrn</code></p><pre data-language="wrn"><code>component AnnouncementBar {
|
||||
props {
|
||||
class = ""
|
||||
badge = "New"
|
||||
message = "WRNexusJS Organizations is now available."
|
||||
description = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
|
||||
href = "/organizations"
|
||||
actionLabel = "Explore organizations"
|
||||
ariaLabel = "Announcement"
|
||||
}
|
||||
|
||||
state visible = true
|
||||
|
||||
view {
|
||||
<aside
|
||||
role="region"
|
||||
aria-label="{ariaLabel}"
|
||||
class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
|
||||
class:hidden="!visible"
|
||||
>
|
||||
<!-- Decorative background -->
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none absolute inset-0 overflow-hidden"
|
||||
>
|
||||
<div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10"></div>
|
||||
|
||||
<div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
|
||||
>
|
||||
<div class="flex min-w-0 flex-1 items-center justify-center gap-3">
|
||||
<!-- Badge -->
|
||||
<span
|
||||
class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
|
||||
>
|
||||
<span class="icon-[lucide--sparkles] h-3 w-3" aria-hidden="true" ></span>
|
||||
|
||||
{badge}
|
||||
</span>
|
||||
|
||||
<!-- Message -->
|
||||
<p
|
||||
class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
|
||||
>
|
||||
<span class="font-semibold text-slate-950 dark:text-white">
|
||||
{message}
|
||||
</span>
|
||||
|
||||
<span class="hidden md:inline">
|
||||
{description}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<!-- CTA -->
|
||||
<a
|
||||
href="{href}"
|
||||
class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
|
||||
>
|
||||
{actionLabel}
|
||||
|
||||
<span class="icon-[lucide--arrow-right] h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile CTA -->
|
||||
<a
|
||||
href="{href}"
|
||||
aria-label="{actionLabel}"
|
||||
class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
|
||||
>
|
||||
<span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" ></span>
|
||||
</a>
|
||||
|
||||
<!-- Close -->
|
||||
<button
|
||||
type="button"
|
||||
@click="visible = false"
|
||||
aria-label="Dismiss announcement"
|
||||
class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
|
||||
>
|
||||
<span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page ApartmentInputcomponent {
|
||||
seo {
|
||||
title = "ApartmentInput component"
|
||||
description = "Reusable apartment input component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApartmentInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ApartmentInput</h1><p>Reusable apartment input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApartmentInput label="Apartment" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="ApartmentInput"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Apartment"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApartmentInput.wrn</code></p><pre data-language="wrn"><code>component ApartmentInput {
|
||||
props {
|
||||
label = "Apartment"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page ApiAuthenticationNoticecomponent {
|
||||
seo {
|
||||
title = "ApiAuthenticationNotice component"
|
||||
description = "Reusable api authentication notice component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiAuthenticationNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiAuthenticationNotice</h1><p>Reusable api authentication notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiAuthenticationNotice label="ApiAuthentication" title="title" description="description" value="value" variant="default" /></code></pre><p>Legacy mount name: <code>data-component="ApiAuthenticationNotice"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"ApiAuthentication"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiAuthenticationNotice.wrn</code></p><pre data-language="wrn"><code>component ApiAuthenticationNotice {
|
||||
props {
|
||||
label = "ApiAuthentication"
|
||||
title = ""
|
||||
description = ""
|
||||
value = ""
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
page ApiEndpointCardcomponent {
|
||||
seo {
|
||||
title = "ApiEndpointCard component"
|
||||
description = "Reusable api endpoint card component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiEndpointCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiEndpointCard</h1><p>Reusable api endpoint card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiEndpointCard method="GET" path="/api/example" description="description" /></code></pre><p>Legacy mount name: <code>data-component="ApiEndpointCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>"GET"</code></td></tr><tr><td><code>path</code></td><td><code>string</code></td><td>Optional</td><td><code>"/api/example"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiEndpointCard.wrn</code></p><pre data-language="wrn"><code>component ApiEndpointCard {
|
||||
props {
|
||||
class = ""
|
||||
method = "GET"
|
||||
path = "/api/example"
|
||||
description = ""
|
||||
}
|
||||
|
||||
view {
|
||||
<article
|
||||
class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-3" >
|
||||
<span
|
||||
class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
|
||||
>
|
||||
{method}
|
||||
</span>
|
||||
<code class="text-sm font-semibold">
|
||||
{path}
|
||||
</code>
|
||||
</div>
|
||||
<p
|
||||
data-show="description"
|
||||
class="mt-3 text-sm text-slate-500"
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page ApiErrorExamplecomponent {
|
||||
seo {
|
||||
title = "ApiErrorExample component"
|
||||
description = "Reusable api error example component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiErrorExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiErrorExample</h1><p>Reusable api error example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiErrorExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="ApiErrorExample"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiErrorExample.wrn</code></p><pre data-language="wrn"><code>component ApiErrorExample {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ApiHeaderTablecomponent {
|
||||
seo {
|
||||
title = "ApiHeaderTable component"
|
||||
description = "Reusable api header table component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiHeaderTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiHeaderTable</h1><p>Reusable api header table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiHeaderTable title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="ApiHeaderTable"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiHeaderTable.wrn</code></p><pre data-language="wrn"><code>component ApiHeaderTable {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ApiKeyCreateDialogcomponent {
|
||||
seo {
|
||||
title = "ApiKeyCreateDialog component"
|
||||
description = "Reusable api key create dialog component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiKeyCreateDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ApiKeyCreateDialog</h1><p>Reusable api key create dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiKeyCreateDialog title="title" description="description" open="false" closeLabel="Close" /></code></pre><p>Legacy mount name: <code>data-component="ApiKeyCreateDialog"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiKeyCreateDialog.wrn</code></p><pre data-language="wrn"><code>component ApiKeyCreateDialog {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
open = false
|
||||
closeLabel = "Close"
|
||||
class = ""
|
||||
}
|
||||
view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page ApiKeyDisplaycomponent {
|
||||
seo {
|
||||
title = "ApiKeyDisplay component"
|
||||
description = "Reusable api key display component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiKeyDisplay</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiKeyDisplay</h1><p>Reusable api key display component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiKeyDisplay eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="ApiKeyDisplay"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiKeyDisplay.wrn</code></p><pre data-language="wrn"><code>component ApiKeyDisplay {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page ApiKeyInputcomponent {
|
||||
seo {
|
||||
title = "ApiKeyInput component"
|
||||
description = "Reusable api key input component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiKeyInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ApiKeyInput</h1><p>Reusable api key input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiKeyInput label="ApiKey" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="ApiKeyInput"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"ApiKey"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiKeyInput.wrn</code></p><pre data-language="wrn"><code>component ApiKeyInput {
|
||||
props {
|
||||
label = "ApiKey"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page ApiMethodBadgecomponent {
|
||||
seo {
|
||||
title = "ApiMethodBadge component"
|
||||
description = "Reusable api method badge component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiMethodBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiMethodBadge</h1><p>Reusable api method badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiMethodBadge label="ApiMethod" title="title" description="description" value="value" variant="default" /></code></pre><p>Legacy mount name: <code>data-component="ApiMethodBadge"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"ApiMethod"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiMethodBadge.wrn</code></p><pre data-language="wrn"><code>component ApiMethodBadge {
|
||||
props {
|
||||
label = "ApiMethod"
|
||||
title = ""
|
||||
description = ""
|
||||
value = ""
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ApiParameterTablecomponent {
|
||||
seo {
|
||||
title = "ApiParameterTable component"
|
||||
description = "Reusable api parameter table component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiParameterTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiParameterTable</h1><p>Reusable api parameter table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiParameterTable title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="ApiParameterTable"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiParameterTable.wrn</code></p><pre data-language="wrn"><code>component ApiParameterTable {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page ApiRateLimitNoticecomponent {
|
||||
seo {
|
||||
title = "ApiRateLimitNotice component"
|
||||
description = "Reusable api rate limit notice component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiRateLimitNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiRateLimitNotice</h1><p>Reusable api rate limit notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiRateLimitNotice label="ApiRateLimit" title="title" description="description" value="value" variant="default" /></code></pre><p>Legacy mount name: <code>data-component="ApiRateLimitNotice"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"ApiRateLimit"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiRateLimitNotice.wrn</code></p><pre data-language="wrn"><code>component ApiRateLimitNotice {
|
||||
props {
|
||||
label = "ApiRateLimit"
|
||||
title = ""
|
||||
description = ""
|
||||
value = ""
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page ApiRequestExamplecomponent {
|
||||
seo {
|
||||
title = "ApiRequestExample component"
|
||||
description = "Reusable api request example component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiRequestExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiRequestExample</h1><p>Reusable api request example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiRequestExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="ApiRequestExample"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiRequestExample.wrn</code></p><pre data-language="wrn"><code>component ApiRequestExample {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page ApiResponseExamplecomponent {
|
||||
seo {
|
||||
title = "ApiResponseExample component"
|
||||
description = "Reusable api response example component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiResponseExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiResponseExample</h1><p>Reusable api response example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiResponseExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="ApiResponseExample"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiResponseExample.wrn</code></p><pre data-language="wrn"><code>component ApiResponseExample {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ApiSchemaTablecomponent {
|
||||
seo {
|
||||
title = "ApiSchemaTable component"
|
||||
description = "Reusable api schema table component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiSchemaTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiSchemaTable</h1><p>Reusable api schema table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiSchemaTable title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="ApiSchemaTable"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiSchemaTable.wrn</code></p><pre data-language="wrn"><code>component ApiSchemaTable {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page ApiSchemaViewercomponent {
|
||||
seo {
|
||||
title = "ApiSchemaViewer component"
|
||||
description = "Reusable api schema viewer component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiSchemaViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiSchemaViewer</h1><p>Reusable api schema viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiSchemaViewer eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="ApiSchemaViewer"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiSchemaViewer.wrn</code></p><pre data-language="wrn"><code>component ApiSchemaViewer {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page ApiVersionBadgecomponent {
|
||||
seo {
|
||||
title = "ApiVersionBadge component"
|
||||
description = "Reusable api version badge component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiVersionBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiVersionBadge</h1><p>Reusable api version badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiVersionBadge label="ApiVersion" title="title" description="description" value="value" variant="default" /></code></pre><p>Legacy mount name: <code>data-component="ApiVersionBadge"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"ApiVersion"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiVersionBadge.wrn</code></p><pre data-language="wrn"><code>component ApiVersionBadge {
|
||||
props {
|
||||
label = "ApiVersion"
|
||||
title = ""
|
||||
description = ""
|
||||
value = ""
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page AppHeadercomponent {
|
||||
seo {
|
||||
title = "AppHeader component"
|
||||
description = "Reusable app header component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AppHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>AppHeader</h1><p>Reusable app header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AppHeader eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="AppHeader"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AppHeader.wrn</code></p><pre data-language="wrn"><code>component AppHeader {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ArchitectureSectioncomponent {
|
||||
seo {
|
||||
title = "ArchitectureSection component"
|
||||
description = "Reusable architecture section component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArchitectureSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArchitectureSection</h1><p>Reusable architecture section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ArchitectureSection eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="ArchitectureSection"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArchitectureSection.wrn</code></p><pre data-language="wrn"><code>component ArchitectureSection {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page AreaChartcomponent {
|
||||
seo {
|
||||
title = "AreaChart component"
|
||||
description = "Reusable area chart component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AreaChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>AreaChart</h1><p>Reusable area chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AreaChart title="title" value="value" description="description" summary="summary" loading="false" /></code></pre><p>Legacy mount name: <code>data-component="AreaChart"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AreaChart.wrn</code></p><pre data-language="wrn"><code>component AreaChart {
|
||||
props {
|
||||
title = ""
|
||||
value = ""
|
||||
description = ""
|
||||
summary = ""
|
||||
loading = false
|
||||
class = ""
|
||||
}
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ArticleHerocomponent {
|
||||
seo {
|
||||
title = "ArticleHero component"
|
||||
description = "Reusable article hero component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticleHero</h1><p>Reusable article hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ArticleHero eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="ArticleHero"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleHero.wrn</code></p><pre data-language="wrn"><code>component ArticleHero {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ArticleLayoutcomponent {
|
||||
seo {
|
||||
title = "ArticleLayout component"
|
||||
description = "Reusable article layout component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleLayout</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticleLayout</h1><p>Reusable article layout component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ArticleLayout eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="ArticleLayout"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleLayout.wrn</code></p><pre data-language="wrn"><code>component ArticleLayout {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page ArticleNewsletterCTAcomponent {
|
||||
seo {
|
||||
title = "ArticleNewsletterCTA component"
|
||||
description = "Reusable article newsletter c t a component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleNewsletterCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ArticleNewsletterCTA</h1><p>Reusable article newsletter c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ArticleNewsletterCTA label="Action" href="href" type="button" variant="primary" disabled="false" /></code></pre><p>Legacy mount name: <code>data-component="ArticleNewsletterCTA"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Action"</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"button"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleNewsletterCTA.wrn</code></p><pre data-language="wrn"><code>component ArticleNewsletterCTA {
|
||||
props {
|
||||
label = "Action"
|
||||
href = ""
|
||||
type = "button"
|
||||
variant = "primary"
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page ArticlePageShellcomponent {
|
||||
seo {
|
||||
title = "ArticlePageShell component"
|
||||
description = "Reusable article page shell component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticlePageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticlePageShell</h1><p>Reusable article page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ArticlePageShell eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="ArticlePageShell"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticlePageShell.wrn</code></p><pre data-language="wrn"><code>component ArticlePageShell {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page ArticleShareActionscomponent {
|
||||
seo {
|
||||
title = "ArticleShareActions component"
|
||||
description = "Reusable article share actions component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleShareActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ArticleShareActions</h1><p>Reusable article share actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ArticleShareActions label="Action" href="href" type="button" variant="primary" disabled="false" /></code></pre><p>Legacy mount name: <code>data-component="ArticleShareActions"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Action"</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"button"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleShareActions.wrn</code></p><pre data-language="wrn"><code>component ArticleShareActions {
|
||||
props {
|
||||
label = "Action"
|
||||
href = ""
|
||||
type = "button"
|
||||
variant = "primary"
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
page AspectRatiocomponent {
|
||||
seo {
|
||||
title = "AspectRatio component"
|
||||
description = "Reusable aspect ratio component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AspectRatio</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>AspectRatio</h1><p>Reusable aspect ratio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AspectRatio /></code></pre><p>Legacy mount name: <code>data-component="AspectRatio"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AspectRatio.wrn</code></p><pre data-language="wrn"><code>component AspectRatio {
|
||||
props {
|
||||
class = ""
|
||||
}
|
||||
view { <div class="wire-aspect-ratio {class}"><slot /></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
page AssetCardcomponent {
|
||||
seo {
|
||||
title = "AssetCard component"
|
||||
description = "Reusable asset card component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AssetCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AssetCard</h1><p>Reusable asset card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AssetCard title="title" description="description" href="href" /></code></pre><p>Legacy mount name: <code>data-component="AssetCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AssetCard.wrn</code></p><pre data-language="wrn"><code>component AssetCard {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--asset {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page AttachmentPickercomponent {
|
||||
seo {
|
||||
title = "AttachmentPicker component"
|
||||
description = "Reusable attachment picker component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AttachmentPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AttachmentPicker</h1><p>Reusable attachment picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AttachmentPicker label="Attachment" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="AttachmentPicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Attachment"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AttachmentPicker.wrn</code></p><pre data-language="wrn"><code>component AttachmentPicker {
|
||||
props {
|
||||
label = "Attachment"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AttachmentUploadcomponent {
|
||||
seo {
|
||||
title = "AttachmentUpload component"
|
||||
description = "Reusable attachment upload component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AttachmentUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AttachmentUpload</h1><p>Reusable attachment upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AttachmentUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AttachmentUpload"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AttachmentUpload.wrn</code></p><pre data-language="wrn"><code>component AttachmentUpload {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AudioUploadcomponent {
|
||||
seo {
|
||||
title = "AudioUpload component"
|
||||
description = "Reusable audio upload component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AudioUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AudioUpload</h1><p>Reusable audio upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AudioUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AudioUpload"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AudioUpload.wrn</code></p><pre data-language="wrn"><code>component AudioUpload {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AuditLogPreviewcomponent {
|
||||
seo {
|
||||
title = "AuditLogPreview component"
|
||||
description = "Reusable audit log preview component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuditLogPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuditLogPreview</h1><p>Reusable audit log preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AuditLogPreview eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AuditLogPreview"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuditLogPreview.wrn</code></p><pre data-language="wrn"><code>component AuditLogPreview {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page AuditTablecomponent {
|
||||
seo {
|
||||
title = "AuditTable component"
|
||||
description = "Reusable audit table component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuditTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>AuditTable</h1><p>Reusable audit table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AuditTable title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="AuditTable"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuditTable.wrn</code></p><pre data-language="wrn"><code>component AuditTable {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page AuthenticatorCodeInputcomponent {
|
||||
seo {
|
||||
title = "AuthenticatorCodeInput component"
|
||||
description = "Reusable authenticator code input component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthenticatorCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AuthenticatorCodeInput</h1><p>Reusable authenticator code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AuthenticatorCodeInput label="AuthenticatorCode" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="AuthenticatorCodeInput"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"AuthenticatorCode"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthenticatorCodeInput.wrn</code></p><pre data-language="wrn"><code>component AuthenticatorCodeInput {
|
||||
props {
|
||||
label = "AuthenticatorCode"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AuthorAvatarcomponent {
|
||||
seo {
|
||||
title = "AuthorAvatar component"
|
||||
description = "Reusable author avatar component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthorAvatar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorAvatar</h1><p>Reusable author avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AuthorAvatar eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AuthorAvatar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthorAvatar.wrn</code></p><pre data-language="wrn"><code>component AuthorAvatar {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AuthorCardcomponent {
|
||||
seo {
|
||||
title = "AuthorCard component"
|
||||
description = "Reusable author card component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthorCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorCard</h1><p>Reusable author card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AuthorCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AuthorCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthorCard.wrn</code></p><pre data-language="wrn"><code>component AuthorCard {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AuthorizedApplicationCardcomponent {
|
||||
seo {
|
||||
title = "AuthorizedApplicationCard component"
|
||||
description = "Reusable authorized application card component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthorizedApplicationCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorizedApplicationCard</h1><p>Reusable authorized application card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AuthorizedApplicationCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AuthorizedApplicationCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthorizedApplicationCard.wrn</code></p><pre data-language="wrn"><code>component AuthorizedApplicationCard {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
page AutoGridcomponent {
|
||||
seo {
|
||||
title = "AutoGrid component"
|
||||
description = "Reusable auto grid component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AutoGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>AutoGrid</h1><p>Reusable auto grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AutoGrid /></code></pre><p>Legacy mount name: <code>data-component="AutoGrid"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AutoGrid.wrn</code></p><pre data-language="wrn"><code>component AutoGrid {
|
||||
props {
|
||||
class = ""
|
||||
}
|
||||
view { <div class="wire-auto-grid {class}"><slot /></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AutomationExampleCardcomponent {
|
||||
seo {
|
||||
title = "AutomationExampleCard component"
|
||||
description = "Reusable automation example card component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AutomationExampleCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AutomationExampleCard</h1><p>Reusable automation example card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AutomationExampleCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AutomationExampleCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AutomationExampleCard.wrn</code></p><pre data-language="wrn"><code>component AutomationExampleCard {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AvailabilityCalendarcomponent {
|
||||
seo {
|
||||
title = "AvailabilityCalendar component"
|
||||
description = "Reusable availability calendar component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvailabilityCalendar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AvailabilityCalendar</h1><p>Reusable availability calendar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AvailabilityCalendar eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AvailabilityCalendar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvailabilityCalendar.wrn</code></p><pre data-language="wrn"><code>component AvailabilityCalendar {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page AvatarGroupcomponent {
|
||||
seo {
|
||||
title = "AvatarGroup component"
|
||||
description = "Reusable avatar group component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AvatarGroup</h1><p>Reusable avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AvatarGroup label="Avatar" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="AvatarGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Avatar"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvatarGroup.wrn</code></p><pre data-language="wrn"><code>component AvatarGroup {
|
||||
props {
|
||||
label = "Avatar"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page AvatarUploadcomponent {
|
||||
seo {
|
||||
title = "AvatarUpload component"
|
||||
description = "Reusable avatar upload component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AvatarUpload</h1><p>Reusable avatar upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AvatarUpload eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="AvatarUpload"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvatarUpload.wrn</code></p><pre data-language="wrn"><code>component AvatarUpload {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
page Avatarcomponent {
|
||||
seo {
|
||||
title = "Avatar component"
|
||||
description = "Reusable avatar component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Avatar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Avatar</h1><p>Reusable avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Avatar src="src" alt="alt" initials="WR" size="md" /></code></pre><p>Legacy mount name: <code>data-component="Avatar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>src</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>initials</code></td><td><code>string</code></td><td>Optional</td><td><code>"WR"</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Avatar.wrn</code></p><pre data-language="wrn"><code>component Avatar {
|
||||
props {
|
||||
class = ""
|
||||
src = ""
|
||||
alt = ""
|
||||
initials = "WR"
|
||||
size = "md"
|
||||
}
|
||||
view {
|
||||
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'} {class}"><img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" /><span data-show="!src" aria-hidden="true">{initials}</span></span>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
page BackButtoncomponent {
|
||||
seo {
|
||||
title = "BackButton component"
|
||||
description = "Reusable back button component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BackButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>BackButton</h1><p>Reusable back button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BackButton label="Action" type="button" disabled="false" /></code></pre><p>Legacy mount name: <code>data-component="BackButton"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Action"</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"button"</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BackButton.wrn</code></p><pre data-language="wrn"><code>component BackButton {
|
||||
props {
|
||||
label = "Action"
|
||||
type = "button"
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
page BackToTopcomponent {
|
||||
seo {
|
||||
title = "BackToTop component"
|
||||
description = "Reusable back to top component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BackToTop</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>BackToTop</h1><p>Reusable back to top component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BackToTop label="Back to top" assistiveLabel="Return to the top of the page" threshold="500" /></code></pre><p>Legacy mount name: <code>data-component="BackToTop"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Back to top"</code></td></tr><tr><td><code>assistiveLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Return to the top of the page"</code></td></tr><tr><td><code>threshold</code></td><td><code>number</code></td><td>Optional</td><td><code>500</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BackToTop.wrn</code></p><pre data-language="wrn"><code>component BackToTop {
|
||||
props {
|
||||
class = ""
|
||||
label = "Back to top"
|
||||
assistiveLabel = "Return to the top of the page"
|
||||
threshold = 500
|
||||
}
|
||||
|
||||
state visible = false
|
||||
|
||||
functions {
|
||||
function updateBackToTopVisibility() {
|
||||
visible = window.scrollY > threshold
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
lifecycle {
|
||||
mount {
|
||||
updateBackToTopVisibility()
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
updateBackToTopVisibility,
|
||||
{ passive: true }
|
||||
)
|
||||
}
|
||||
|
||||
unmount {
|
||||
window.removeEventListener(
|
||||
"scroll",
|
||||
updateBackToTopVisibility
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
watch visible {
|
||||
console.debug(
|
||||
"Back-to-top visibility:",
|
||||
value,
|
||||
previous
|
||||
)
|
||||
}
|
||||
|
||||
view {
|
||||
<div
|
||||
class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
|
||||
class:pointer-events-none="!visible"
|
||||
class:translate-y-5="!visible"
|
||||
class:scale-90="!visible"
|
||||
class:opacity-0="!visible"
|
||||
class:pointer-events-auto="visible"
|
||||
class:translate-y-0="visible"
|
||||
class:scale-100="visible"
|
||||
class:opacity-100="visible"
|
||||
>
|
||||
<!-- Hover label -->
|
||||
<span
|
||||
class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
|
||||
<!-- Gradient border wrapper -->
|
||||
<div
|
||||
class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
|
||||
>
|
||||
<!-- Glow -->
|
||||
<div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" ></div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="scrollToTop()"
|
||||
aria-label="{label}"
|
||||
title="{label}"
|
||||
class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
|
||||
>
|
||||
<!-- Arrow -->
|
||||
<span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
|
||||
|
||||
<span class="sr-only">
|
||||
{assistiveLabel}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page Badgecomponent {
|
||||
seo {
|
||||
title = "Badge component"
|
||||
description = "Reusable badge component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Badge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Badge</h1><p>Reusable badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Badge label="Badge" variant="neutral" /></code></pre><p>Legacy mount name: <code>data-component="Badge"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Badge"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"neutral"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Badge.wrn</code></p><pre data-language="wrn"><code>component Badge {
|
||||
props {
|
||||
class = ""
|
||||
label = "Badge"
|
||||
variant = "neutral"
|
||||
}
|
||||
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}</span>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page BankTransferDetailscomponent {
|
||||
seo {
|
||||
title = "BankTransferDetails component"
|
||||
description = "Reusable bank transfer details component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BankTransferDetails</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BankTransferDetails</h1><p>Reusable bank transfer details component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BankTransferDetails eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="BankTransferDetails"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BankTransferDetails.wrn</code></p><pre data-language="wrn"><code>component BankTransferDetails {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
page Bannercomponent {
|
||||
seo {
|
||||
title = "Banner component"
|
||||
description = "Reusable banner component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Banner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Banner</h1><p>Reusable banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Banner text="Announcement" href="href" actionLabel="Learn more" variant="brand" /></code></pre><p>Legacy mount name: <code>data-component="Banner"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>"Announcement"</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"brand"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Banner.wrn</code></p><pre data-language="wrn"><code>component Banner {
|
||||
props {
|
||||
class = ""
|
||||
text = "Announcement"
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
variant = "brand"
|
||||
}
|
||||
view {
|
||||
<aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'} {class}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
page BarChartcomponent {
|
||||
seo {
|
||||
title = "BarChart component"
|
||||
description = "Reusable bar chart component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BarChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>BarChart</h1><p>Reusable bar chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BarChart title="title" value="value" description="description" summary="summary" loading="false" /></code></pre><p>Legacy mount name: <code>data-component="BarChart"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BarChart.wrn</code></p><pre data-language="wrn"><code>component BarChart {
|
||||
props {
|
||||
title = ""
|
||||
value = ""
|
||||
description = ""
|
||||
summary = ""
|
||||
loading = false
|
||||
class = ""
|
||||
}
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
page BetaBadgecomponent {
|
||||
seo {
|
||||
title = "BetaBadge component"
|
||||
description = "Reusable beta badge component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BetaBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>BetaBadge</h1><p>Reusable beta badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BetaBadge label="Beta" variant="default" /></code></pre><p>Legacy mount name: <code>data-component="BetaBadge"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Beta"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BetaBadge.wrn</code></p><pre data-language="wrn"><code>component BetaBadge {
|
||||
props {
|
||||
label = "Beta"
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--betabadge {class}">{label}<slot /></span> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page BillingAddressFormcomponent {
|
||||
seo {
|
||||
title = "BillingAddressForm component"
|
||||
description = "Reusable billing address form component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BillingAddressForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BillingAddressForm</h1><p>Reusable billing address form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BillingAddressForm eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="BillingAddressForm"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BillingAddressForm.wrn</code></p><pre data-language="wrn"><code>component BillingAddressForm {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page BillingExamplecomponent {
|
||||
seo {
|
||||
title = "BillingExample component"
|
||||
description = "Reusable billing example component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BillingExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BillingExample</h1><p>Reusable billing example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BillingExample eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="BillingExample"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BillingExample.wrn</code></p><pre data-language="wrn"><code>component BillingExample {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page BillingPeriodTogglecomponent {
|
||||
seo {
|
||||
title = "BillingPeriodToggle component"
|
||||
description = "Reusable billing period toggle component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BillingPeriodToggle</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BillingPeriodToggle</h1><p>Reusable billing period toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BillingPeriodToggle label="BillingPeriod" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="BillingPeriodToggle"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"BillingPeriod"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BillingPeriodToggle.wrn</code></p><pre data-language="wrn"><code>component BillingPeriodToggle {
|
||||
props {
|
||||
label = "BillingPeriod"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page BlackoutDatePickercomponent {
|
||||
seo {
|
||||
title = "BlackoutDatePicker component"
|
||||
description = "Reusable blackout date picker component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlackoutDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BlackoutDatePicker</h1><p>Reusable blackout date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BlackoutDatePicker label="BlackoutDate" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="BlackoutDatePicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"BlackoutDate"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlackoutDatePicker.wrn</code></p><pre data-language="wrn"><code>component BlackoutDatePicker {
|
||||
props {
|
||||
label = "BlackoutDate"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page BlogCardcomponent {
|
||||
seo {
|
||||
title = "BlogCard component"
|
||||
description = "Reusable blog card component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BlogCard</h1><p>Reusable blog card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BlogCard eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="BlogCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogCard.wrn</code></p><pre data-language="wrn"><code>component BlogCard {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page BlogGridcomponent {
|
||||
seo {
|
||||
title = "BlogGrid component"
|
||||
description = "Reusable blog grid component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>BlogGrid</h1><p>Reusable blog grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BlogGrid title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="BlogGrid"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogGrid.wrn</code></p><pre data-language="wrn"><code>component BlogGrid {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page BlogListcomponent {
|
||||
seo {
|
||||
title = "BlogList component"
|
||||
description = "Reusable blog list component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>BlogList</h1><p>Reusable blog list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BlogList title="title" description="description" empty="false" emptyText="No items available." /></code></pre><p>Legacy mount name: <code>data-component="BlogList"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogList.wrn</code></p><pre data-language="wrn"><code>component BlogList {
|
||||
props {
|
||||
title = ""
|
||||
description = ""
|
||||
empty = false
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page BlogSearchcomponent {
|
||||
seo {
|
||||
title = "BlogSearch component"
|
||||
description = "Reusable blog search component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogSearch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BlogSearch</h1><p>Reusable blog search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BlogSearch eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="BlogSearch"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogSearch.wrn</code></p><pre data-language="wrn"><code>component BlogSearch {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
page BodyTextcomponent {
|
||||
seo {
|
||||
title = "BodyText component"
|
||||
description = "Reusable body text component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BodyText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BodyText</h1><p>Reusable body text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BodyText text="text" align="start" /></code></pre><p>Legacy mount name: <code>data-component="BodyText"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BodyText.wrn</code></p><pre data-language="wrn"><code>component BodyText {
|
||||
props {
|
||||
text = ""
|
||||
align = "start"
|
||||
class = ""
|
||||
}
|
||||
view { <div class="wire-type wire-type--body wire-text--{align} {class}">{text}<slot /></div> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page BorderRadiusPickercomponent {
|
||||
seo {
|
||||
title = "BorderRadiusPicker component"
|
||||
description = "Reusable border radius picker component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BorderRadiusPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BorderRadiusPicker</h1><p>Reusable border radius picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BorderRadiusPicker label="BorderRadius" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="BorderRadiusPicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"BorderRadius"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BorderRadiusPicker.wrn</code></p><pre data-language="wrn"><code>component BorderRadiusPicker {
|
||||
props {
|
||||
label = "BorderRadius"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page BottomNavigationcomponent {
|
||||
seo {
|
||||
title = "BottomNavigation component"
|
||||
description = "Reusable bottom navigation component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BottomNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>BottomNavigation</h1><p>Reusable bottom navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BottomNavigation eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="BottomNavigation"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BottomNavigation.wrn</code></p><pre data-language="wrn"><code>component BottomNavigation {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page BrandColorPickercomponent {
|
||||
seo {
|
||||
title = "BrandColorPicker component"
|
||||
description = "Reusable brand color picker component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BrandColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BrandColorPicker</h1><p>Reusable brand color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BrandColorPicker label="BrandColor" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="BrandColorPicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"BrandColor"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BrandColorPicker.wrn</code></p><pre data-language="wrn"><code>component BrandColorPicker {
|
||||
props {
|
||||
label = "BrandColor"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page BrandSelectorcomponent {
|
||||
seo {
|
||||
title = "BrandSelector component"
|
||||
description = "Reusable brand selector component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BrandSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BrandSelector</h1><p>Reusable brand selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BrandSelector label="Brand" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="BrandSelector"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Brand"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BrandSelector.wrn</code></p><pre data-language="wrn"><code>component BrandSelector {
|
||||
props {
|
||||
label = "Brand"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
page Breadcrumbscomponent {
|
||||
seo {
|
||||
title = "Breadcrumbs component"
|
||||
description = "Reusable breadcrumbs component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Breadcrumbs</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Breadcrumbs</h1><p>Reusable breadcrumbs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Breadcrumbs items="[]" centered="false" compact="false" showHome="true" homeLabel="Home" /></code></pre><p>Legacy mount name: <code>data-component="Breadcrumbs"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showHome</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>homeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Home"</code></td></tr><tr><td><code>homeHref</code></td><td><code>string</code></td><td>Optional</td><td><code>"/"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Breadcrumbs.wrn</code></p><pre data-language="wrn"><code>component Breadcrumbs {
|
||||
props {
|
||||
class: string = ""
|
||||
items = []
|
||||
centered = false
|
||||
compact = false
|
||||
showHome = true
|
||||
homeLabel = "Home"
|
||||
homeHref = "/"
|
||||
}
|
||||
|
||||
view {
|
||||
<nav
|
||||
aria-label="Breadcrumb"
|
||||
class="w-full {class}"
|
||||
class:hidden="items.length === 0 && !showHome"
|
||||
>
|
||||
<ol
|
||||
class="flex flex-wrap items-center text-slate-500 dark:text-slate-400"
|
||||
class:justify-center="centered"
|
||||
class:gap-1.5="compact"
|
||||
class:text-xs="compact"
|
||||
class:gap-2="!compact"
|
||||
class:text-sm="!compact"
|
||||
>
|
||||
<!-- Home -->
|
||||
<li
|
||||
class:hidden="!showHome"
|
||||
class:inline-flex="showHome"
|
||||
>
|
||||
<a
|
||||
href="{homeHref}"
|
||||
class="group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300"
|
||||
>
|
||||
<span class="icon-[lucide--home] h-3.5 w-3.5" aria-hidden="true" ></span>
|
||||
|
||||
<span class:hidden="compact">
|
||||
{homeLabel}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="sr-only"
|
||||
class:hidden="!compact"
|
||||
>
|
||||
{homeLabel}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Separator after home -->
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="text-slate-300 dark:text-slate-700"
|
||||
class:hidden="!showHome || items.length === 0"
|
||||
class:inline-flex="showHome && items.length > 0"
|
||||
>
|
||||
<span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
|
||||
</li>
|
||||
|
||||
<!-- Dynamic breadcrumb items -->
|
||||
{#each items as item, index}
|
||||
<li class="inline-flex min-w-0 items-center gap-2">
|
||||
<!-- Linked item -->
|
||||
<a
|
||||
href="{item.href}"
|
||||
class="max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64"
|
||||
class:hidden="item.current || item.href === ''"
|
||||
class:inline-flex="!item.current && item.href !== ''"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
|
||||
<!-- Current item -->
|
||||
<span
|
||||
aria-current="page"
|
||||
class="max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64"
|
||||
class:hidden="!item.current"
|
||||
class:inline-flex="item.current"
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
|
||||
<!-- Plain unlinked item -->
|
||||
<span
|
||||
class="max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64"
|
||||
class:hidden="item.current || item.href !== ''"
|
||||
class:inline-flex="!item.current && item.href === ''"
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
|
||||
<!-- Separator -->
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="inline-flex text-slate-300 dark:text-slate-700"
|
||||
class:hidden="index === items.length - 1"
|
||||
>
|
||||
<span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
|
||||
</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
page BrowserFramecomponent {
|
||||
seo {
|
||||
title = "BrowserFrame component"
|
||||
description = "Reusable browser frame component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BrowserFrame</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>BrowserFrame</h1><p>Reusable browser frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BrowserFrame eyebrow="eyebrow" title="title" description="description" align="start" /></code></pre><p>Legacy mount name: <code>data-component="BrowserFrame"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BrowserFrame.wrn</code></p><pre data-language="wrn"><code>component BrowserFrame {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
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> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
page BudgetRangeSlidercomponent {
|
||||
seo {
|
||||
title = "BudgetRangeSlider component"
|
||||
description = "Reusable budget range slider component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BudgetRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BudgetRangeSlider</h1><p>Reusable budget range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BudgetRangeSlider eyebrow="eyebrow" title="title" description="description" href="href" actionLabel="Learn more" /></code></pre><p>Legacy mount name: <code>data-component="BudgetRangeSlider"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BudgetRangeSlider.wrn</code></p><pre data-language="wrn"><code>component BudgetRangeSlider {
|
||||
props {
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "Learn more"
|
||||
image = ""
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page BudgetSelectorcomponent {
|
||||
seo {
|
||||
title = "BudgetSelector component"
|
||||
description = "Reusable budget selector component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BudgetSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BudgetSelector</h1><p>Reusable budget selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BudgetSelector label="Budget" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="BudgetSelector"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Budget"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BudgetSelector.wrn</code></p><pre data-language="wrn"><code>component BudgetSelector {
|
||||
props {
|
||||
label = "Budget"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page BusinessHoursPickercomponent {
|
||||
seo {
|
||||
title = "BusinessHoursPicker component"
|
||||
description = "Reusable business hours picker component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BusinessHoursPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BusinessHoursPicker</h1><p>Reusable business hours picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><BusinessHoursPicker label="BusinessHours" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="BusinessHoursPicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"BusinessHours"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BusinessHoursPicker.wrn</code></p><pre data-language="wrn"><code>component BusinessHoursPicker {
|
||||
props {
|
||||
label = "BusinessHours"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
page ButtonGroupcomponent {
|
||||
seo {
|
||||
title = "ButtonGroup component"
|
||||
description = "Reusable button group component."
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="docs-shell">
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<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="/components">Components</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.64</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="/components">Components</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="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ButtonGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ButtonGroup</h1><p>Reusable button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ButtonGroup label="Button" name="name" value="value" placeholder="placeholder" type="text" /></code></pre><p>Legacy mount name: <code>data-component="ButtonGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Button"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ButtonGroup.wrn</code></p><pre data-language="wrn"><code>component ButtonGroup {
|
||||
props {
|
||||
label = "Button"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
required = false
|
||||
disabled = false
|
||||
readonly = false
|
||||
help = ""
|
||||
error = ""
|
||||
class = ""
|
||||
}
|
||||
view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user