release: WRNexusJS 0.2.54

2026-07-19 15:51:27 +05:30
parent 7cee13526e
commit 6dbc75c370
127 changed files with 2211 additions and 88 deletions
@@ -0,0 +1,15 @@
+component Combobox {
+  props {
+    id = "combobox"
+    name = ""
+    label = "Choose an option"
+    placeholder = "Search options"
+    options = []
+    required = false
+    disabled = false
+    class = ""
+  }
+  view {
+    <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><input id="{id}" name="{name}" list="{id}-options" placeholder="{placeholder}" required="{required}" disabled="{disabled}" role="combobox" aria-autocomplete="list" class="wire-input" /><datalist id="{id}-options">{#each options as option}<option value="{option.value}">{option.label}</option>{/each}</datalist></div>
+  }
+}
@@ -0,0 +1,15 @@
+component ConfirmationDialog {
+  props {
+    title = "Confirm action"
+    description = "Are you sure you want to continue?"
+    confirmLabel = "Confirm"
+    cancelLabel = "Cancel"
+    danger = false
+    open = false
+    class = ""
+  }
+  state visible = open
+  view {
+    <div data-show="visible" class="wire-overlay {class}" role="presentation"><section role="alertdialog" aria-modal="true" aria-labelledby="confirmation-title" aria-describedby="confirmation-description" class="wire-dialog"><h2 id="confirmation-title" class="wire-dialog__title">{title}</h2><p id="confirmation-description" class="wire-dialog__description">{description}</p><div class="wire-dialog__actions"><button type="button" class="wire-btn wire-btn--ghost" @click="visible = false">{cancelLabel}</button><button type="button" class="wire-btn {danger ? 'wire-btn--danger' : 'wire-btn--primary'}"><slot name="confirm">{confirmLabel}</slot></button></div></section></div>
+  }
+}
@@ -0,0 +1,17 @@
+component CookiePreferencesDialog {
+  props {
+    title = "Cookie preferences"
+    description = "Choose which optional cookies you allow. Essential cookies are always enabled."
+    saveLabel = "Save preferences"
+    acceptLabel = "Accept all"
+    rejectLabel = "Reject optional"
+    open = false
+    class = ""
+  }
+  state visible = open
+  state analytics = false
+  state marketing = false
+  view {
+    <div data-show="visible" class="wire-overlay {class}" role="presentation"><section role="dialog" aria-modal="true" aria-labelledby="cookie-preferences-title" class="wire-dialog wire-cookie-dialog"><h2 id="cookie-preferences-title" class="wire-dialog__title">{title}</h2><p class="wire-dialog__description">{description}</p><div class="wire-cookie-list"><label class="wire-cookie-option"><span><strong>Essential</strong><small>Required for security and core functionality.</small></span><input type="checkbox" checked disabled /></label><label class="wire-cookie-option"><span><strong>Analytics</strong><small>Helps improve product performance.</small></span><input type="checkbox" checked="{analytics}" @change="analytics = event.target.checked" /></label><label class="wire-cookie-option"><span><strong>Marketing</strong><small>Supports relevant campaigns and measurement.</small></span><input type="checkbox" checked="{marketing}" @change="marketing = event.target.checked" /></label></div><div class="wire-dialog__actions wire-dialog__actions--wrap"><button type="button" class="wire-btn wire-btn--ghost" @click="analytics = false; marketing = false">{rejectLabel}</button><button type="button" class="wire-btn wire-btn--default" @click="analytics = true; marketing = true">{acceptLabel}</button><button type="button" class="wire-btn wire-btn--primary" @click="visible = false">{saveLabel}</button></div></section></div>
+  }
+}
@@ -0,0 +1,13 @@
+component DataTable {
+  props {
+    caption = "Data table"
+    columns = []
+    rows = []
+    emptyMessage = "No data available."
+    striped = false
+    class = ""
+  }
+  view {
+    <div class="wire-table-wrap {class}" tabindex="0" role="region" aria-label="{caption}"><table class="wire-table {striped ? 'wire-table--striped' : ''}"><caption class="wire-visually-hidden">{caption}</caption><thead><tr>{#each columns as column}<th scope="col">{column.label}</th>{/each}</tr></thead><tbody>{#each rows as row}<tr>{#each columns as column}<td>{row[column.key]}</td>{/each}</tr>{:empty}<tr><td colspan="{columns.length}">{emptyMessage}</td></tr>{/each}</tbody></table></div>
+  }
+}
@@ -0,0 +1,14 @@
+component DateTimePicker {
+  props {
+    id = "datetime-picker"
+    name = "datetime"
+    label = "Date and time"
+    value = ""
+    min = ""
+    max = ""
+    required = false
+    disabled = false
+    class = ""
+  }
+  view { <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><input id="{id}" name="{name}" type="datetime-local" value="{value}" min="{min}" max="{max}" required="{required}" disabled="{disabled}" class="wire-input" /></div> }
+}
@@ -0,0 +1,8 @@
+component DesktopNavigation {
+  props {
+    label = "Primary navigation"
+    items = []
+    class = ""
+  }
+  view { <nav aria-label="{label}" class="wire-desktop-nav {class}"><ul>{#each items as item}<li><a href="{item.href}" aria-current="{item.current ? 'page' : 'false'}">{item.label}</a></li>{/each}</ul></nav> }
+}
@@ -0,0 +1,12 @@
+component FAQ {
+  props {
+    eyebrow = ""
+    title = "Frequently asked questions"
+    description = ""
+    items = []
+    centered = true
+    allowMultiple = false
+    defaultOpenIndex = 0
+  }
+  view { <FAQAccordion eyebrow="{eyebrow}" title="{title}" description="{description}" items="{items}" centered="{centered}" allowMultiple="{allowMultiple}" defaultOpenIndex="{defaultOpenIndex}" /> }
+}
@@ -0,0 +1,9 @@
+component FilterBar {
+  props {
+    label = "Filters"
+    clearLabel = "Clear filters"
+    showClear = true
+    class = ""
+  }
+  view { <section aria-label="{label}" class="wire-filter-bar {class}"><div class="wire-filter-bar__controls"><slot /></div><button data-show="showClear" type="reset" class="wire-btn wire-btn--ghost wire-btn--sm">{clearLabel}</button></section> }
+}
@@ -0,0 +1,12 @@
+component Form {
+  props {
+    action = ""
+    method = "post"
+    name = ""
+    loading = false
+    class = ""
+  }
+  view {
+    <form action="{action}" method="{method}" name="{name}" aria-busy="{loading}" class="wire-form {class}"><slot /></form>
+  }
+}
@@ -0,0 +1,8 @@
+component FormError {
+  props {
+    id = ""
+    message = ""
+    class = ""
+  }
+  view { <p id="{id}" role="alert" aria-live="polite" class="wire-field-message wire-field-message--error {class}">{message}<slot /></p> }
+}
@@ -0,0 +1,8 @@
+component FormHelpText {
+  props {
+    id = ""
+    text = ""
+    class = ""
+  }
+  view { <p id="{id}" class="wire-field-message wire-field-message--help {class}">{text}<slot /></p> }
+}
@@ -0,0 +1,12 @@
+component FormLabel {
+  props {
+    for = ""
+    label = "Label"
+    required = false
+    optional = false
+    class = ""
+  }
+  view {
+    <label for="{for}" class="wire-label {class}">{label}<span data-show="required" class="wire-required" aria-hidden="true"> *</span><span data-show="optional && !required" class="wire-optional"> (optional)</span></label>
+  }
+}
@@ -0,0 +1,6 @@
+component LegalPageShell {
+  props {
+    class = ""
+  }
+  view { <div class="wire-page-shell wire-page-shell--legal {class}"><aside class="wire-page-shell__aside"><slot name="navigation" /></aside><main class="wire-page-shell__main"><slot /></main></div> }
+}
@@ -0,0 +1,8 @@
+component LegalTableOfContents {
+  props {
+    title = "On this page"
+    items = []
+    class = ""
+  }
+  view { <nav aria-label="{title}" class="wire-legal-toc {class}"><h2>{title}</h2><ol>{#each items as item}<li><a href="{item.href}">{item.label}</a></li>{/each}</ol></nav> }
+}
@@ -0,0 +1,14 @@
+component LoadingButton {
+  props {
+    label = "Continue"
+    loadingLabel = "Loading…"
+    loading = false
+    disabled = false
+    type = "button"
+    variant = "primary"
+    class = ""
+  }
+  view {
+    <button type="{type}" disabled="{disabled || loading}" aria-disabled="{disabled || loading}" aria-busy="{loading}" class="wire-btn wire-btn--{variant} wire-loading-button {class}"><span data-show="loading" class="wire-spinner wire-spinner--inline" aria-hidden="true"></span><span>{loading ? loadingLabel : label}</span></button>
+  }
+}
@@ -0,0 +1,6 @@
+component MarketingPageShell {
+  props {
+    class = ""
+  }
+  view { <div class="wire-page-shell wire-page-shell--marketing {class}"><slot /></div> }
+}
@@ -0,0 +1,11 @@
+component MegaMenu {
+  props {
+    label = "Explore"
+    sections = []
+    class = ""
+  }
+  state open = false
+  view {
+    <div class="wire-mega-menu {class}"><button type="button" class="wire-mega-menu__trigger" aria-expanded="{open}" @click="open = !open">{label}<span aria-hidden="true">⌄</span></button><div data-show="open" class="wire-mega-menu__panel">{#each sections as section}<section><h3>{section.title}</h3><ul>{#each section.items as item}<li><a href="{item.href}">{item.label}</a></li>{/each}</ul></section>{/each}</div></div>
+  }
+}
@@ -0,0 +1,8 @@
+component MetricGrid {
+  props {
+    label = "Key metrics"
+    metrics = []
+    class = ""
+  }
+  view { <section aria-label="{label}" class="wire-metric-grid {class}">{#each metrics as metric}<article class="wire-metric"><p class="wire-metric__value">{metric.value}</p><p class="wire-metric__label">{metric.label}</p><p data-show="metric.description" class="wire-metric__description">{metric.description}</p></article>{/each}</section> }
+}
@@ -0,0 +1,12 @@
+component MobileNavigation {
+  props {
+    label = "Menu"
+    closeLabel = "Close menu"
+    items = []
+    class = ""
+  }
+  state open = false
+  view {
+    <div class="wire-mobile-nav {class}"><button type="button" class="wire-btn wire-btn--ghost" aria-expanded="{open}" aria-controls="wire-mobile-navigation" @click="open = !open">{open ? closeLabel : label}</button><nav id="wire-mobile-navigation" data-show="open" aria-label="Mobile navigation" class="wire-mobile-nav__panel"><ul>{#each items as item}<li><a href="{item.href}">{item.label}</a></li>{/each}</ul></nav></div>
+  }
+}
@@ -0,0 +1,15 @@
+component MultiSelect {
+  props {
+    id = "multi-select"
+    name = ""
+    label = "Choose options"
+    options = []
+    required = false
+    disabled = false
+    size = 5
+    class = ""
+  }
+  view {
+    <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><select id="{id}" name="{name}" multiple required="{required}" disabled="{disabled}" size="{size}" class="wire-input wire-multiselect">{#each options as option}<option value="{option.value}" selected="{option.selected}">{option.label}</option>{/each}</select></div>
+  }
+}
@@ -0,0 +1,9 @@
+component PricingComparisonTable {
+  props {
+    caption = "Plan comparison"
+    plans = []
+    features = []
+    class = ""
+  }
+  view { <div class="wire-table-wrap {class}" tabindex="0" role="region" aria-label="{caption}"><table class="wire-table wire-comparison-table"><caption class="wire-visually-hidden">{caption}</caption><thead><tr><th scope="col">Feature</th>{#each plans as plan}<th scope="col">{plan.name}</th>{/each}</tr></thead><tbody>{#each features as feature}<tr><th scope="row">{feature.label}</th>{#each feature.values as value}<td>{value}</td>{/each}</tr>{/each}</tbody></table></div> }
+}
@@ -0,0 +1,12 @@
+component ProductCard {
+  props {
+    eyebrow = "Product"
+    title = "Product name"
+    description = ""
+    href = "#"
+    actionLabel = "Learn more"
+    status = ""
+    class = ""
+  }
+  view { <article class="wire-product-card {class}"><div class="wire-product-card__meta"><span class="wire-eyebrow">{eyebrow}</span><span data-show="status" class="wire-badge">{status}</span></div><h3>{title}</h3><p>{description}</p><a href="{href}" class="wire-product-card__link">{actionLabel}<span aria-hidden="true"> →</span></a></article> }
+}
@@ -0,0 +1,6 @@
+component ProductPageShell {
+  props {
+    class = ""
+  }
+  view { <div class="wire-page-shell wire-page-shell--product {class}"><slot /></div> }
+}
@@ -0,0 +1,8 @@
+component ProductsMegaMenu {
+  props {
+    label = "Products"
+    sections = []
+    class = ""
+  }
+  view { <MegaMenu label="{label}" sections="{sections}" class="{class}" /> }
+}
@@ -0,0 +1,15 @@
+component QuietHoursPicker {
+  props {
+    label = "Quiet hours"
+    startName = "quietStart"
+    endName = "quietEnd"
+    start = "22:00"
+    end = "08:00"
+    timezone = "UTC"
+    disabled = false
+    class = ""
+  }
+  view {
+    <fieldset class="wire-fieldset {class}" disabled="{disabled}"><legend class="wire-label">{label}</legend><div class="wire-form-row"><label class="wire-field"><span class="wire-label">From</span><input type="time" name="{startName}" value="{start}" class="wire-input" /></label><label class="wire-field"><span class="wire-label">Until</span><input type="time" name="{endName}" value="{end}" class="wire-input" /></label></div><p class="wire-field-message wire-field-message--help">Timezone: {timezone}</p></fieldset>
+  }
+}
@@ -0,0 +1,13 @@
+component RecurringSchedulePicker {
+  props {
+    id = "recurring-schedule"
+    name = "recurrence"
+    label = "Repeat"
+    value = "none"
+    disabled = false
+    class = ""
+  }
+  view {
+    <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><select id="{id}" name="{name}" disabled="{disabled}" class="wire-input"><option value="none" selected="{value === 'none'}">Does not repeat</option><option value="daily" selected="{value === 'daily'}">Daily</option><option value="weekly" selected="{value === 'weekly'}">Weekly</option><option value="monthly" selected="{value === 'monthly'}">Monthly</option><option value="yearly" selected="{value === 'yearly'}">Yearly</option></select></div>
+  }
+}
@@ -0,0 +1,10 @@
+component SDKTabs {
+  props {
+    label = "SDK languages"
+    tabs = []
+    defaultIndex = 0
+    class = ""
+  }
+  state active = defaultIndex
+  view { <section class="wire-sdk-tabs {class}"><div role="tablist" aria-label="{label}" class="wire-tabs">{#each tabs as tab, index}<button type="button" role="tab" aria-selected="{active === index}" class="wire-tab" @click="active = index">{tab.label}</button>{/each}</div>{#each tabs as tab, index}<div role="tabpanel" data-show="active === index" class="wire-sdk-tabs__panel"><pre><code>{tab.code}</code></pre></div>{/each}</section> }
+}
@@ -0,0 +1,15 @@
+component TimePicker {
+  props {
+    id = "time-picker"
+    name = "time"
+    label = "Time"
+    value = ""
+    min = ""
+    max = ""
+    step = 60
+    required = false
+    disabled = false
+    class = ""
+  }
+  view { <div class="wire-field {class}"><label for="{id}" class="wire-label">{label}</label><input id="{id}" name="{name}" type="time" value="{value}" min="{min}" max="{max}" step="{step}" required="{required}" disabled="{disabled}" class="wire-input" /></div> }
+}
@@ -0,0 +1,11 @@
+component Typography {
+  props {
+    as = "p"
+    variant = "body"
+    align = "start"
+    class = ""
+  }
+  view {
+    <div class="wire-type wire-type--{variant} wire-text--{align} {class}"><slot /></div>
+  }
+}