WorkRoot-WRNexusJSComponent/app/pages/forms.wrn

// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page FormsShowcase {
  layout = "showcase"
  seo {
    title = "Forms components"
    description = "11 forms components from @wrnexus/ui."
  }
  view {
    <header class="showcase-hero showcase-hero--category">
      <span class="showcase-eyebrow">Component category</span>
      <h1 class="showcase-title">Forms</h1>
      <p class="showcase-description">11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
      <div class="category-meta"><span>11 components</span><span>Multiple use cases</span><span>33 live configurations</span></div>
    </header>
    <div class="catalog-grid">
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Checkbox" size="default" label="Checkbox" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p></div>
          <div class="catalog-card-footer"><span>8 props · 0 slots</span><a href="/components/checkbox">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="ColorPicker" size="default" label="Color Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Color Picker</h2><p>Theme-aware, responsive color picker component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/color-picker">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="FileInput" size="default" label="File Input" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>File Input</h2><p>Theme-aware, responsive file input component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/file-input">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Input" size="default" label="Input" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/input">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="InputGroup" size="default" label="Input Group" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Input Group</h2><p>Theme-aware, responsive input group component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/input-group">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Radio" size="default" label="Radio" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p></div>
          <div class="catalog-card-footer"><span>8 props · 0 slots</span><a href="/components/radio">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="RangeSlider" size="default" label="Range Slider" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Range Slider</h2><p>Theme-aware, responsive range slider component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/range-slider">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Select" size="default" label="Select" value="sample-1" options="[{&quot;id&quot;:&quot;select-0-1&quot;,&quot;key&quot;:&quot;select-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#select-demo&quot;,&quot;actionHref&quot;:&quot;#select-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;select-0-2&quot;,&quot;key&quot;:&quot;select-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#select-demo&quot;,&quot;actionHref&quot;:&quot;#select-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" placeholder="Enter a sample value" multiple="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p></div>
          <div class="catalog-card-footer"><span>10 props · 0 slots</span><a href="/components/select">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Switch" size="default" label="Switch" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p></div>
          <div class="catalog-card-footer"><span>8 props · 0 slots</span><a href="/components/switch">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Textarea" size="default" label="Textarea" value="sample-1" placeholder="Enter a sample value" rows="5" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p></div>
          <div class="catalog-card-footer"><span>10 props · 0 slots</span><a href="/components/textarea">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="TimePicker" size="default" label="Time Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Forms</span><h2>Time Picker</h2><p>Theme-aware, responsive time picker component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/time-picker">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article></div>
  }
}