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

fix(ui): render polished SSR-safe component variants

Browse Source
This commit is contained in:
Clintchiz
2026-07-20 15:55:38 +05:30
parent 944f83d3f4
commit 54f5309fca
260 changed files with 917 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/EmailInput.wrn
+12 -9
View File
@@ -1,24 +1,27 @@
component EmailInput {
props {
class = ""
id = ""
name = ""
id = "email"
name = "email"
label = "Email"
value = ""
placeholder = ""
placeholder = "you@company.com"
help = ""
error = ""
required = false
disabled = false
readonly = false
autocomplete = ""
autocomplete = "email"
}
view {
<div class="space-y-2 {class}">
<label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
<input id="{id}" name="{name}" type="email" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
<p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
<p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
<div class="wire-auth-field {class}">
<label for="{id}" class="wire-label">{label}{#if required}<span class="wire-required"> *</span>{/if}</label>
<div class="wire-auth-field__control">
<span class="wire-auth-field__icon icon-[lucide--mail]" aria-hidden="true"></span>
<input id="{id}" name="{name}" type="email" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{error ? 'true' : 'false'}" aria-describedby="{id}-help {id}-error" class="wire-input wire-auth-field__input" />
</div>
{#if help && !error}<p id="{id}-help" class="wire-field-message wire-field-message--help">{help}</p>{/if}
{#if error}<p id="{id}-error" role="alert" class="wire-field-message wire-field-message--error">{error}</p>{/if}
</div>
}
}