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

refactor: migrate legacy wire namespace to wrn
Quality / quality (ubuntu-latest) (push) Failing after 9m49s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-12 18:51:15 +05:30
parent ec23dd4c93
commit 2c960fc1dc
488 changed files with 27306 additions and 19063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/ButtonGroup.wrn
+106 -106
View File
@@ -54,7 +54,7 @@ items: unknown[] = []
view {
<div
{...attrs}
class="wire-component wire-next--button-group {class}"
class="wrn-component wrn-next--button-group {class}"
role="{toolbar ? 'toolbar' : 'group'}"
aria-label="{ariaLabel}"
aria-orientation="{orientation}"
@@ -71,7 +71,7 @@ items: unknown[] = []
{#each items as item, index}
<button
type="{item.type || 'button'}"
class="wire-btn wire-btn--variant-{item.variant || variant} wire-btn--color-{item.color || color} wire-btn--size-{item.size || size}"
class="wrn-btn wrn-btn--variant-{item.variant || variant} wrn-btn--color-{item.color || color} wrn-btn--size-{item.size || size}"
disabled="{disabled || item.disabled}"
aria-label="{item.ariaLabel || item.label}"
aria-pressed="{selectable ? (selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false') : ''}"
@@ -80,9 +80,9 @@ items: unknown[] = []
@click="selectItem(item, index)"
>
{#if item.icon}
<span class="wire-btn__icon {item.icon}" aria-hidden="true"></span>
<span class="wrn-btn__icon {item.icon}" aria-hidden="true"></span>
{/if}
<span class="wire-btn__label">{item.label}</span>
<span class="wrn-btn__label">{item.label}</span>
</button>
{/each}
{/if}
@@ -91,7 +91,7 @@ items: unknown[] = []
}
style {
.wire-next--button-group {
.wrn-next--button-group {
display: inline-flex;
align-items: stretch;
width: fit-content;
@@ -99,205 +99,205 @@ items: unknown[] = []
isolation: isolate;
}
.wire-next--button-group[data-orientation="vertical"] {
.wrn-next--button-group[data-orientation="vertical"] {
flex-direction: column;
}
.wire-next--button-group[data-attached="false"] {
.wrn-next--button-group[data-attached="false"] {
gap: 0.5rem;
}
.wire-next--button-group[data-disabled="true"] {
.wrn-next--button-group[data-disabled="true"] {
cursor: not-allowed;
opacity: 0.6;
}
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) {
.wrn-next--button-group[data-attached="true"] > :is(.wrn-btn, .wrn-action) {
position: relative;
margin: 0;
}
.wire-next--button-group[data-attached="true"] > .wire-action {
.wrn-next--button-group[data-attached="true"] > .wrn-action {
display: flex;
}
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) {
.wrn-next--button-group[data-attached="true"] > :is(.wrn-btn, .wrn-action) :is(.wrn-btn) {
height: 100%;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> :is(.wire-btn, .wire-action):not(:first-child) {
.wrn-next--button-group[data-attached="true"][data-orientation="horizontal"]
> :is(.wrn-btn, .wrn-action):not(:first-child) {
margin-inline-start: -1px;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-btn:not(:first-child):not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-action:not(:first-child):not(:last-child)
> .wire-btn {
.wrn-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wrn-btn:not(:first-child):not(:last-child),
.wrn-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wrn-action:not(:first-child):not(:last-child)
> .wrn-btn {
border-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-btn:first-child:not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-action:first-child:not(:last-child)
> .wire-btn {
.wrn-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wrn-btn:first-child:not(:last-child),
.wrn-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wrn-action:first-child:not(:last-child)
> .wrn-btn {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-btn:last-child:not(:first-child),
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-action:last-child:not(:first-child)
> .wire-btn {
.wrn-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wrn-btn:last-child:not(:first-child),
.wrn-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wrn-action:last-child:not(:first-child)
> .wrn-btn {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> :is(.wire-btn, .wire-action):not(:first-child) {
.wrn-next--button-group[data-attached="true"][data-orientation="vertical"]
> :is(.wrn-btn, .wrn-action):not(:first-child) {
margin-top: -1px;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-btn:not(:first-child):not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-action:not(:first-child):not(:last-child)
> .wire-btn {
.wrn-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wrn-btn:not(:first-child):not(:last-child),
.wrn-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wrn-action:not(:first-child):not(:last-child)
> .wrn-btn {
border-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-btn:first-child:not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-action:first-child:not(:last-child)
> .wire-btn {
.wrn-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wrn-btn:first-child:not(:last-child),
.wrn-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wrn-action:first-child:not(:last-child)
> .wrn-btn {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-btn:last-child:not(:first-child),
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-action:last-child:not(:first-child)
> .wire-btn {
.wrn-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wrn-btn:last-child:not(:first-child),
.wrn-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wrn-action:last-child:not(:first-child)
> .wrn-btn {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
.wire-next--button-group > :is(.wire-btn, .wire-action):focus-within,
.wire-next--button-group > .wire-btn:focus-visible {
.wrn-next--button-group > :is(.wrn-btn, .wrn-action):focus-within,
.wrn-next--button-group > .wrn-btn:focus-visible {
z-index: 2;
}
.wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] {
.wrn-next--button-group[data-selectable="true"] > .wrn-btn[data-selected="true"] {
z-index: 1;
border-color: var(--wire-component-color);
background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface));
color: var(--wire-component-color);
border-color: var(--wrn-component-color);
background: color-mix(in srgb, var(--wrn-component-color) 16%, var(--wrn-color-surface));
color: var(--wrn-component-color);
}
@media (max-width: 480px) {
.wire-next--button-group[data-responsive="true"] > :is(.wire-btn, .wire-action) {
.wrn-next--button-group[data-responsive="true"] > :is(.wrn-btn, .wrn-action) {
display: flex;
width: 100%;
flex-direction: column;
}
.wire-next--button-group[data-responsive="true"] > .wire-action > .wire-btn {
.wrn-next--button-group[data-responsive="true"] > .wrn-action > .wrn-btn {
width: 100%;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> :is(.wire-btn, .wire-action) {
.wrn-next--button-group[data-responsive="true"][data-attached="true"]
> :is(.wrn-btn, .wrn-action) {
margin-top: -1px;
margin-inline-start: 0;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> :is(.wire-btn, .wire-action):first-child {
.wrn-next--button-group[data-responsive="true"][data-attached="true"]
> :is(.wrn-btn, .wrn-action):first-child {
margin-top: 0;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn,
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> .wire-action
> .wire-btn {
.wrn-next--button-group[data-responsive="true"][data-attached="true"] > .wrn-btn,
.wrn-next--button-group[data-responsive="true"][data-attached="true"]
> .wrn-action
> .wrn-btn {
border-radius: 0;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:first-child,
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> .wire-action:first-child
> .wire-btn {
border-start-start-radius: var(--wire-radius-sm);
border-start-end-radius: var(--wire-radius-sm);
.wrn-next--button-group[data-responsive="true"][data-attached="true"] > .wrn-btn:first-child,
.wrn-next--button-group[data-responsive="true"][data-attached="true"]
> .wrn-action:first-child
> .wrn-btn {
border-start-start-radius: var(--wrn-radius-sm);
border-start-end-radius: var(--wrn-radius-sm);
}
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:last-child,
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> .wire-action:last-child
> .wire-btn {
border-end-start-radius: var(--wire-radius-sm);
border-end-end-radius: var(--wire-radius-sm);
.wrn-next--button-group[data-responsive="true"][data-attached="true"] > .wrn-btn:last-child,
.wrn-next--button-group[data-responsive="true"][data-attached="true"]
> .wrn-action:last-child
> .wrn-btn {
border-end-start-radius: var(--wrn-radius-sm);
border-end-end-radius: var(--wrn-radius-sm);
}
}
/* Shared component foundation. */
.wire-component {
--wire-component-color: var(--wire-color-primary);
--wire-component-scale: 1;
.wrn-component {
--wrn-component-color: var(--wrn-color-primary);
--wrn-component-scale: 1;
margin: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-family: var(--wrn-font-sans, inherit);
}
.wire-component--color-primary {
--wire-component-color: var(--wire-color-primary);
.wrn-component--color-primary {
--wrn-component-color: var(--wrn-color-primary);
}
.wire-component--color-secondary {
--wire-component-color: var(--wire-color-secondary);
.wrn-component--color-secondary {
--wrn-component-color: var(--wrn-color-secondary);
}
.wire-component--color-success {
--wire-component-color: var(--wire-color-success);
.wrn-component--color-success {
--wrn-component-color: var(--wrn-color-success);
}
.wire-component--color-warning {
--wire-component-color: var(--wire-color-warning);
.wrn-component--color-warning {
--wrn-component-color: var(--wrn-color-warning);
}
.wire-component--color-danger {
--wire-component-color: var(--wire-color-danger);
.wrn-component--color-danger {
--wrn-component-color: var(--wrn-color-danger);
}
.wire-component--color-info {
--wire-component-color: var(--wire-color-info);
.wrn-component--color-info {
--wrn-component-color: var(--wrn-color-info);
}
.wire-component--size-xs {
--wire-component-scale: 0.78;
.wrn-component--size-xs {
--wrn-component-scale: 0.78;
}
.wire-component--size-sm {
--wire-component-scale: 0.88;
.wrn-component--size-sm {
--wrn-component-scale: 0.88;
}
.wire-component--size-default,
.wire-component--size-md {
--wire-component-scale: 1;
.wrn-component--size-default,
.wrn-component--size-md {
--wrn-component-scale: 1;
}
.wire-component--size-lg {
--wire-component-scale: 1.14;
.wrn-component--size-lg {
--wrn-component-scale: 1.14;
}
.wire-component--size-xl {
--wire-component-scale: 1.28;
.wrn-component--size-xl {
--wrn-component-scale: 1.28;
}
.wire-component:not(.wire-btn) {
font-size: calc(1em * var(--wire-component-scale));
.wrn-component:not(.wrn-btn) {
font-size: calc(1em * var(--wrn-component-scale));
}
.wire-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wire-component-color);
.wrn-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wrn-component-color);
}
.wire-component p {
.wrn-component p {
margin: 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
line-height: 1.6;
}
}