WRNexusJS/examples/component-showcase/app/pages/components/input-number.wrn

// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page InputNumberDetail {
  layout = "showcase"
  state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Number"
  state playground_name = ctx.url.searchParams.get("pg_name") ?? "default-quantity"
  state playground_value = ctx.url.searchParams.get("pg_value") ?? "1"
  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
  state playground_type = ctx.url.searchParams.get("pg_type") ?? "number"
  state playground_min = ctx.url.searchParams.get("pg_min") ?? "0"
  state playground_max = ctx.url.searchParams.get("pg_max") ?? "99"
  state playground_step = ctx.url.searchParams.get("pg_step") ?? "1"
  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
  seo {
    title = "Input Number"
    description = "Theme-aware, responsive input number component."
  }
  view {
    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/advanced-forms">Advanced Forms</a><span aria-hidden="true">/</span><span>Input Number</span>
    </nav>
    <header class="detail-hero">
      <div class="detail-hero-copy">
        <span class="showcase-eyebrow">Advanced Forms component</span>
        <h1>Input Number</h1>
        <p>Theme-aware, responsive input number component.</p>
        <div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
      </div>
      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
    </header>
    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="InputNumber" data-playground-public-tag="true" data-playground-has-slot="false">
      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Input Number</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
      <div class="playground-workbench">
        <div class="playground-preview">
          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
          <div class="playground-preview-source" data-playground-preview><div data-component="InputNumber" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
          <section class="playground-code" aria-label="Current component code">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
            <pre><code data-playground-code>&lt;InputNumber
  size="md"
  name="default-quantity"
  value="1"
  min="0"
  max="99"
  step="1"
/&gt;</code></pre>
          </section>
          <div class="playground-status" data-playground-status aria-live="polite"></div>
        </div>
        <form class="playground-controls" data-playground-form>
          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
          <div class="playground-fields"><label class="playground-field" for="playground-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="Input Number" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="default-quantity" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-number-value" name="pg_value" type="text" value="1" /></label><label class="playground-field" for="playground-input-number-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-number-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-input-number-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-number-type" name="pg_type" type="text" value="number" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="0" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="99" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>string</small></span><input id="playground-input-number-step" name="pg_step" type="text" value="1" /></label><label class="playground-toggle" for="playground-input-number-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-number-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-number-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="" /></label></div>
        </form>
      </div>
    </section>
    <div class="detail-layout">
      <main class="detail-content">
        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Default controls</h2><p>Use standard decrement and increment buttons alongside a numeric input field.</p></div>
          <span class="demo-case-number">01</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-1" class="demo-canvas demo-canvas--1">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
          </div>
          <section class="demo-code" aria-label="Default controls usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="default-quantity"
  value="1"
  min="0"
  max="99"
  step="1"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Labeled input style</h2><p>Add supporting label text and rounded controls for a more form-like number input.</p></div>
          <span class="demo-case-number">02</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-2" class="demo-canvas demo-canvas--2">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" label="Select quantity" name="labeled-quantity" value="1" min="1" max="25" step="1"></div></div>
          </div>
          <section class="demo-code" aria-label="Labeled input style usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  label="Select quantity"
  name="labeled-quantity"
  value="1"
  min="1"
  max="25"
  step="1"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Layout</span><h2>Vertical buttons</h2><p>Stack the increment and decrement buttons vertically beside the field.</p></div>
          <span class="demo-case-number">03</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-3" class="demo-canvas demo-canvas--3">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" label="Select quantity" name="vertical-quantity" value="1" min="0" max="20"></div></div>
          </div>
          <section class="demo-code" aria-label="Vertical buttons usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  label="Select quantity"
  name="vertical-quantity"
  value="1"
  min="0"
  max="20"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Layout</span><h2>Horizontal buttons</h2><p>Place the increment and decrement buttons on opposite sides of the value.</p></div>
          <span class="demo-case-number">04</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-4" class="demo-canvas demo-canvas--4">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="horizontal-quantity" value="1" min="0" max="20"></div></div>
          </div>
          <section class="demo-code" aria-label="Horizontal buttons usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="horizontal-quantity"
  value="1"
  min="0"
  max="20"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Sizing</span><h2>Compact size</h2><p>Use a smaller compact control when the available space is limited.</p></div>
          <span class="demo-case-number">05</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-5" class="demo-canvas demo-canvas--5">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="sm" color="primary" name="compact-quantity" value="0" min="0" max="10"></div></div>
          </div>
          <section class="demo-code" aria-label="Compact size usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="sm"
  name="compact-quantity"
  value="0"
  min="0"
  max="10"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Commerce</span><h2>Seat quantity selector</h2><p>Pair the control with pricing information for seat counts or plan add-ons.</p></div>
          <span class="demo-case-number">06</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-6" class="demo-canvas demo-canvas--6">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" label="Additional seats" name="additional-seats" value="0" min="0" max="50"></div></div>
          </div>
          <section class="demo-code" aria-label="Seat quantity selector usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  label="Additional seats"
  name="additional-seats"
  value="0"
  min="0"
  max="50"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">States</span><h2>Disabled input</h2><p>Disable manual entry while keeping supported quantity controls available.</p></div>
          <span class="demo-case-number">07</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-7" class="demo-canvas demo-canvas--7">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="disabled-input" value="10"></div></div>
          </div>
          <section class="demo-code" aria-label="Disabled input usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="disabled-input"
  value="10"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">States</span><h2>Disabled buttons</h2><p>Disable increment and decrement controls while leaving the current value visible.</p></div>
          <span class="demo-case-number">08</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-8" class="demo-canvas demo-canvas--8">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="disabled-buttons" value="10"></div></div>
          </div>
          <section class="demo-code" aria-label="Disabled buttons usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="disabled-buttons"
  value="10"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Behaviour</span><h2>Custom step size</h2><p>Set a custom step so every button press changes the value by two.</p></div>
          <span class="demo-case-number">09</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-9" class="demo-canvas demo-canvas--9">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2"></div></div>
          </div>
          <section class="demo-code" aria-label="Custom step size usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="custom-step"
  value="0"
  min="0"
  max="20"
  step="2"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Limits</span><h2>Negative values</h2><p>Use the min option to permit controlled negative values.</p></div>
          <span class="demo-case-number">010</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-10" class="demo-canvas demo-canvas--10">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="negative-values" value="-10" min="-100" max="100"></div></div>
          </div>
          <section class="demo-code" aria-label="Negative values usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="negative-values"
  value="-10"
  min="-100"
  max="100"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Limits</span><h2>Maximum limit</h2><p>Set an upper limit and disable incrementing when that limit is reached.</p></div>
          <span class="demo-case-number">011</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-11" class="demo-canvas demo-canvas--11">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="maximum-limit" value="10" min="0" max="10"></div></div>
          </div>
          <section class="demo-code" aria-label="Maximum limit usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="maximum-limit"
  value="10"
  min="0"
  max="10"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Validation</span><h2>Validation states</h2><p>Communicate whether the current numerical value is valid.</p></div>
          <span class="demo-case-number">012</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-12" class="demo-canvas demo-canvas--12">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            <div class="demo-render"><div data-component="InputNumber" size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5"></div></div>
          </div>
          <section class="demo-code" aria-label="Validation states usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="invalid-quantity"
  value="10"
  min="0"
  max="5"
/&gt;</code></pre>
          </section>
        </div>
      </article></div></section>
        
        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input Number"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"number"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
      </main>
      <aside class="detail-aside">
        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-number-demo-1">Default controls</a><a href="#input-number-demo-2">Labeled input style</a><a href="#input-number-demo-3">Vertical buttons</a><a href="#input-number-demo-4">Horizontal buttons</a><a href="#input-number-demo-5">Compact size</a><a href="#input-number-demo-6">Seat quantity selector</a><a href="#input-number-demo-7">Disabled input</a><a href="#input-number-demo-8">Disabled buttons</a><a href="#input-number-demo-9">Custom step size</a><a href="#input-number-demo-10">Negative values</a><a href="#input-number-demo-11">Maximum limit</a><a href="#input-number-demo-12">Validation states</a><a href="#api">Props API</a></div>
      </aside>
    </div>
    <nav class="detail-pagination">
      <a href="/components/copy-markup"><small>Previous</small><strong>← Copy Markup</strong></a>
      <a href="/components/pin-input"><small>Next</small><strong>Pin Input →</strong></a>
    </nav>
  }
}