WorkRoot/WorkRoot-WRNexusJSComponent
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88

Browse Source 
- 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>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-09-30 16:50:22 +05:30
1 parent bec9ef2889
commit c0ac38c572
171 files changed
+21983 -35658
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/pages/components/date-picker.wrn
+531 -41
View File
@@ -6,14 +6,14 @@ page DatePickerDetail {
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker"
state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
state playground_value = ctx.url.searchParams.get("pg_value") ?? "2026-09-20"
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
state playground_type = ctx.url.searchParams.get("pg_type") ?? "date"
state playground_locale = ctx.url.searchParams.get("pg_locale") ?? "en-US"
state playground_firstDayOfWeek = Number(ctx.url.searchParams.get("pg_firstDayOfWeek") ?? "0")
state playground_months = ctx.url.searchParams.get("pg_months") ?? ""
state playground_days = ctx.url.searchParams.get("pg_days") ?? ""
state playground_years = ctx.url.searchParams.get("pg_years") ?? ""
state playground_months = JSON.parse(ctx.url.searchParams.get("pg_months") ?? "[{\"label\":\"Jan\",\"value\":\"01\"},{\"label\":\"Feb\",\"value\":\"02\"},{\"label\":\"Mar\",\"value\":\"03\"},{\"label\":\"Apr\",\"value\":\"04\"},{\"label\":\"May\",\"value\":\"05\"},{\"label\":\"Jun\",\"value\":\"06\"},{\"label\":\"Jul\",\"value\":\"07\"},{\"label\":\"Aug\",\"value\":\"08\"},{\"label\":\"Sep\",\"value\":\"09\"},{\"label\":\"Oct\",\"value\":\"10\"},{\"label\":\"Nov\",\"value\":\"11\"},{\"label\":\"Dec\",\"value\":\"12\"}]")
state playground_days = JSON.parse(ctx.url.searchParams.get("pg_days") ?? "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]")
state playground_years = JSON.parse(ctx.url.searchParams.get("pg_years") ?? "[2024,2025,2026,2027,2028,2029,2030]")
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
@@ -51,17 +51,205 @@ page DatePickerDetail {
<div class="playground-preview-source" data-playground-preview><DatePicker size='{playground_size}' color='{playground_color}' label='{playground_label}' id='{playground_id}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' locale='{playground_locale}' firstDayOfWeek='{playground_firstDayOfWeek}' months='{playground_months}' days='{playground_days}' years='{playground_years}' min='{playground_min}' max='{playground_max}' step='{playground_step}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' variant='{playground_variant}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></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;DatePicker
value="sample-1"
placeholder="Enter a sample value"
/&gt;</code></pre>
<pre><code data-playground-code>page DatePickerExample <span>&#123;</span>
state months = [
<span>&#123;</span>
"label": "Jan",
"value": "01"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
value="2026-09-20"
placeholder="Enter a sample value"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>25 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-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</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></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-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-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-date-picker-type" name="pg_type" type="text" value="date" /></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>string</small></span><input id="playground-date-picker-months" name="pg_months" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>string</small></span><input id="playground-date-picker-days" name="pg_days" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>string</small></span><input id="playground-date-picker-years" name="pg_years" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-date-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" forLine truncated
<div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</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></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-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-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="2026-09-20" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><select id="playground-date-picker-type" name="pg_type"><option value="date" selected>date</option><option value="datetime-local">datetime-local</option></select></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>{ label: string; value: string }[]</small></span><textarea id="playground-date-picker-months" name="pg_months" rows="5" spellcheck="false" data-playground-json>[
&#123;
"label": "Jan",
"value": "01"
&#125;,
&#123;
"label": "Feb",
"value": "02"
&#125;,
&#123;
"label": "Mar",
"value": "03"
&#125;,
&#123;
"label": "Apr",
"value": "04"
&#125;,
&#123;
"label": "May",
"value": "05"
&#125;,
&#123;
"label": "Jun",
"value": "06"
&#125;,
&#123;
"label": "Jul",
"value": "07"
&#125;,
&#123;
"label": "Aug",
"value": "08"
&#125;,
&#123;
"label": "Sep",
"value": "09"
&#125;,
&#123;
"label": "Oct",
"value": "10"
&#125;,
&#123;
"label": "Nov",
"value": "11"
&#125;,
&#123;
"label": "Dec",
"value": "12"
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>number[]</small></span><textarea id="playground-date-picker-days" name="pg_days" rows="5" spellcheck="false" data-playground-json>[
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>number[]</small></span><textarea id="playground-date-picker-years" name="pg_years" rows="5" spellcheck="false" data-playground-json>[
2024,
2025,
2026,
2027,
2028,
2029,
2030
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-date-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-date-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-date-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-date-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-date-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-date-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
@@ -70,67 +258,369 @@ page DatePickerDetail {
<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">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
<div><span class="demo-case-eyebrow">Recommended</span><h2>Date picker</h2><p>An anchored calendar that does not move surrounding content.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="date-picker-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"><DatePicker size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
<div class="demo-render"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Production default usage">
<section class="demo-code" aria-label="Date picker 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;DatePicker
value="sample-1"
placeholder="Enter a sample value"
/&gt;</code></pre>
<pre><code>page DatePickerExample <span>&#123;</span>
state months = [
<span>&#123;</span>
"label": "Jan",
"value": "01"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
label="Start date"
name="start-date"
value="2026-09-20"
placeholder="Enter a sample value"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
<div><span class="demo-case-eyebrow">Compact</span><h2>Date and time</h2><p>Choose a calendar date and a time in one field.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="date-picker-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"><DatePicker size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" firstDayOfWeek="0" variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
<div class="demo-render"><DatePicker size="sm" label="Schedule for" name="schedule" value="2026-09-20T09:30" placeholder="Enter a sample value" type="datetime-local" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact application usage">
<section class="demo-code" aria-label="Date and time 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;DatePicker
size="sm"
label="Compact example"
value="sample-2"
placeholder="Enter a sample value"
variant="secondary"
/&gt;</code></pre>
<pre><code>page DatePickerExample <span>&#123;</span>
state months = [
<span>&#123;</span>
"label": "Jan",
"value": "01"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
size="sm"
label="Schedule for"
name="schedule"
value="2026-09-20T09:30"
placeholder="Enter a sample value"
type="datetime-local"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
variant="secondary"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
<div><span class="demo-case-eyebrow">Advanced</span><h2>Disabled date</h2><p>A read-only scheduled date.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="date-picker-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"><DatePicker size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" variant="success" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
<div class="demo-render"><DatePicker size="lg" label="Scheduled date" value="2026-09-22" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="success" inline="false" readonly="true" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">
<section class="demo-code" aria-label="Disabled date 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;DatePicker
size="lg"
label="Advanced example"
value="sample-3"
placeholder="Search by name, email, or identifier"
variant="success"
/&gt;</code></pre>
<pre><code>page DatePickerExample <span>&#123;</span>
state months = [
<span>&#123;</span>
"label": "Jan",
"value": "01"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
size="lg"
label="Scheduled date"
value="2026-09-22"
placeholder="Search by name, email, or identifier"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
variant="success"
readonly="true"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article></div></section>
@@ -173,10 +663,10 @@ if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#
if (component) registerOutputHandler(component, "invalid", (payload) =&gt; <span>&#123;</span>
console.log("invalid", payload)
<span>&#125;</span>)</code></pre></section></div></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>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</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>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>string</td><td><code>[<span>&#123;</span> label: "Jan", value: "01" <span>&#125;</span>, <span>&#123;</span> label: "Feb", value: "02" <span>&#125;</span>, <span>&#123;</span> label: "Mar", value: "03" <span>&#125;</span>, <span>&#123;</span> label: "Apr", value: "04" <span>&#125;</span>, <span>&#123;</span> label: "May", value: "05" <span>&#125;</span>, <span>&#123;</span> label: "Jun", value: "06" <span>&#125;</span>, <span>&#123;</span> label: "Jul", value: "07" <span>&#125;</span>, <span>&#123;</span> label: "Aug", value: "08" <span>&#125;</span>, <span>&#123;</span> label: "Sep", value: "09" <span>&#125;</span>, <span>&#123;</span> label: "Oct", value: "10" <span>&#125;</span>, <span>&#123;</span> label: "Nov", value: "11" <span>&#125;</span>, <span>&#123;</span> label: "Dec", value: "12" <span>&#125;</span>]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>string</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>string</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</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>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</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>
<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>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</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>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>{ label: string; value: string }[]</td><td><code>[<span>&#123;</span> label: "Jan", value: "01" <span>&#125;</span>, <span>&#123;</span> label: "Feb", value: "02" <span>&#125;</span>, <span>&#123;</span> label: "Mar", value: "03" <span>&#125;</span>, <span>&#123;</span> label: "Apr", value: "04" <span>&#125;</span>, <span>&#123;</span> label: "May", value: "05" <span>&#125;</span>, <span>&#123;</span> label: "Jun", value: "06" <span>&#125;</span>, <span>&#123;</span> label: "Jul", value: "07" <span>&#125;</span>, <span>&#123;</span> label: "Aug", value: "08" <span>&#125;</span>, <span>&#123;</span> label: "Sep", value: "09" <span>&#125;</span>, <span>&#123;</span> label: "Oct", value: "10" <span>&#125;</span>, <span>&#123;</span> label: "Nov", value: "11" <span>&#125;</span>, <span>&#123;</span> label: "Dec", value: "12" <span>&#125;</span>]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>number[]</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>number[]</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</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>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</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="#date-picker-demo-1">Production default</a><a href="#date-picker-demo-2">Compact application</a><a href="#date-picker-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#date-picker-demo-1">Date picker</a><a href="#date-picker-demo-2">Date and time</a><a href="#date-picker-demo-3">Disabled date</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">