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

refactor(ui): replace Tailwind utilities with local styles

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 13:58:13 +05:30
parent ff62918dbb
commit 5c2c6a0a8f
11 changed files with 473 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/SearchBox.wrn
+78 -13
View File
@@ -26,19 +26,19 @@ component SearchBox {
<form
data-ui-component="SearchBox"
role="search"
class='w-full {class}'
class='wire-search-box {class}'
@submit='event.preventDefault(); output.search({ value: query, name: name })'
>
<label
class="mb-2 block text-sm font-semibold text-[var(--wire-color-text)]"
class:sr-only='label === ""'
class="wire-search-box__label"
data-hidden='{label === "" ? "true" : "false"}'
>
{label}
</label>
<div class="relative flex items-center">
<div class="wire-search-box__control">
<span
class="icon-[lucide--search] pointer-events-none absolute left-4 size-5 text-[var(--wire-color-input-placeholder)]"
class="icon-[lucide--search] wire-search-box__search-icon"
aria-hidden="true"
></span>
@@ -53,10 +53,8 @@ component SearchBox {
disabled='{disabled}'
required='{required}'
autocomplete="off"
class="w-full rounded-xl border border-[var(--wire-color-input-border)] bg-[var(--wire-color-input-background)] pl-12 pr-24 text-[var(--wire-color-input-text)] outline-none transition placeholder:text-[var(--wire-color-input-placeholder)] hover:border-[var(--wire-color-input-border-hover)] focus:border-[var(--wire-color-input-border-focus)] focus:ring-2 focus:ring-[var(--wire-color-focus)] disabled:cursor-not-allowed disabled:opacity-60"
class:h-10='size === "sm"'
class:h-12='size === "default" || size === "md"'
class:h-14='size === "lg"'
class="wire-search-box__input"
data-size='{size}'
@input='query = event.target.value'
@change='query = event.target.value'
/>
@@ -65,21 +63,88 @@ component SearchBox {
type="button"
aria-label="Clear search"
data-show='query.length > 0 && !disabled'
class="absolute right-12 inline-flex size-8 items-center justify-center rounded-lg text-[var(--wire-color-text-muted)] transition hover:bg-[var(--wire-color-surface-soft)] hover:text-[var(--wire-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
class="wire-search-box__button wire-search-box__clear"
@click='query = ""; event.currentTarget.parentElement.querySelector("input")?.focus(); output.clear({ value: "", name: name })'
>
<span class="icon-[lucide--x] size-4" aria-hidden="true"></span>
<span class="icon-[lucide--x] wire-search-box__button-icon" aria-hidden="true"></span>
</button>
<button
type="submit"
aria-label='{label || "Search"}'
disabled='{disabled}'
class="absolute right-2 inline-flex size-9 items-center justify-center rounded-lg bg-[var(--wire-color-primary)] text-[var(--wire-color-on-primary)] transition hover:bg-[var(--wire-color-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] disabled:cursor-not-allowed disabled:opacity-60"
class="wire-search-box__button wire-search-box__submit"
>
<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-right] wire-search-box__button-icon" aria-hidden="true"></span>
</button>
</div>
</form>
}
style {
.wire-search-box { width: 100%; }
.wire-search-box__label {
display: block;
margin-bottom: 0.5rem;
color: var(--wire-color-text);
font-size: 0.875rem;
font-weight: 600;
}
.wire-search-box__label[data-hidden="true"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wire-search-box__control { position: relative; display: flex; align-items: center; }
.wire-search-box__search-icon {
position: absolute;
left: 1rem;
width: 1.25rem;
height: 1.25rem;
color: var(--wire-color-input-placeholder);
pointer-events: none;
}
.wire-search-box__input {
width: 100%;
height: 3rem;
padding: 0 6rem 0 3rem;
border: 1px solid var(--wire-color-input-border);
border-radius: var(--wire-radius);
outline: none;
color: var(--wire-color-input-text);
background: var(--wire-color-input-background);
transition: border-color var(--wire-motion-base) var(--wire-ease-standard), box-shadow var(--wire-motion-base) var(--wire-ease-standard);
}
.wire-search-box__input[data-size="sm"] { height: 2.5rem; }
.wire-search-box__input[data-size="lg"] { height: 3.5rem; }
.wire-search-box__input::placeholder { color: var(--wire-color-input-placeholder); }
.wire-search-box__input:hover { border-color: var(--wire-color-input-border-hover); }
.wire-search-box__input:focus {
border-color: var(--wire-color-input-border-focus);
box-shadow: 0 0 0 2px var(--wire-color-focus);
}
.wire-search-box__input:disabled, .wire-search-box__button:disabled { cursor: not-allowed; opacity: 0.6; }
.wire-search-box__button {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: var(--wire-radius-sm);
transition: color var(--wire-motion-base), background var(--wire-motion-base);
}
.wire-search-box__clear { right: 3rem; width: 2rem; height: 2rem; color: var(--wire-color-text-muted); background: transparent; }
.wire-search-box__clear:hover { color: var(--wire-color-text); background: var(--wire-color-surface-soft); }
.wire-search-box__submit { right: 0.5rem; width: 2.25rem; height: 2.25rem; color: var(--wire-color-on-primary); background: var(--wire-color-primary); }
.wire-search-box__submit:hover { background: var(--wire-color-primary-hover); }
.wire-search-box__button:focus-visible { outline: 2px solid var(--wire-color-focus); outline-offset: 2px; }
.wire-search-box__button-icon { width: 1rem; height: 1rem; }
}
}