ClintchizandClaude Opus 5.5
c0ac38c572
- Sync app, public, scripts, test and examples from the framework's component-showcase: redesigned component demos, marketing blocks under /blocks, template and preview galleries, distinct Timeline/Section variants, Chat Bubble receipts, a top-placement Drawer demo, and the playground code panel fix (objects in array props no longer blank out). - Standalone adaptations kept: the generator and tests read component-reference.json from the published @wrnexus/ui, and tests use the published @wrnexus/compiler and @wrnexus/syntax. - Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88, styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
88 lines
9.4 KiB
Plaintext
88 lines
9.4 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page AdvancedFormsShowcase {
|
|
layout = "showcase"
|
|
seo {
|
|
title = "Advanced Forms components"
|
|
description = "7 advanced-forms components from @wrnexus/ui."
|
|
}
|
|
view {
|
|
<header class="showcase-hero showcase-hero--category">
|
|
<span class="showcase-eyebrow">Component category</span>
|
|
<h1 class="showcase-title">Advanced Forms</h1>
|
|
<p class="showcase-description">7 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
|
<div class="category-meta"><span>7 components</span><span>Multiple use cases</span><span>109 live configurations</span></div>
|
|
</header>
|
|
<div class="catalog-grid">
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Advanced Select</h2><p>Theme-aware, responsive advanced select component.</p></div>
|
|
<div class="catalog-card-footer"><span>51 props · 0 slots</span><a href="/components/advanced-select">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Combo Box</h2><p>Editable autocomplete combobox with local and remote suggestions.</p></div>
|
|
<div class="catalog-card-footer"><span>41 props · 0 slots</span><a href="/components/combo-box">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Input Number</h2><p>Theme-aware, responsive input number component.</p></div>
|
|
<div class="catalog-card-footer"><span>40 props · 0 slots</span><a href="/components/input-number">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Pin Input</h2><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p></div>
|
|
<div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/pin-input">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><StrongPassword label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Strong Password</h2><p>Theme-aware, responsive strong password component.</p></div>
|
|
<div class="catalog-card-footer"><span>29 props · 0 slots</span><a href="/components/strong-password">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 1 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Count</h2><p>Theme-aware, responsive toggle count component.</p></div>
|
|
<div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/toggle-count">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article>
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><TogglePassword size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
|
</div>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Password</h2><p>Accessible password field with optional show and hide controls.</p></div>
|
|
<div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/toggle-password">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article></div>
|
|
}
|
|
}
|