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

release: WRNexusJS 0.3.4

Browse Source
This commit is contained in:
Clintchiz
2026-07-22 21:25:53 +05:30
parent e2d9ea1ece
commit d51662826d
73 changed files with 1533 additions and 1125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/COMPONENTS.md
+28 -19
View File
@@ -1,6 +1,6 @@
# WRNexus UI component reference
This reference is generated from the 901 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
This reference is generated from the 902 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
## Actions
@@ -45,8 +45,8 @@ Reusable back button component.
Reusable button component.
- Mount: `data-component="Button"`
- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `className: string = ""`
- Slots: None
- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `fullWidth: boolean = false`, `className: string = ""`
- Slots: `default`
- Events: None
### CenteredCTA
@@ -225,7 +225,7 @@ Reusable field actions component.
Reusable final c t a component.
- Mount: `data-component="FinalCTA"`
- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
- Props: `label: string = "Get started"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
- Slots: `default`
- Events: None
@@ -992,7 +992,7 @@ Reusable certificate upload component.
Reusable channel card component.
- Mount: `data-component="ChannelCard"`
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--radio-tower]"`, `class: string = ""`
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = ""`, `actionLabel: string = ""`, `class: string = ""`
- Slots: `default`
- Events: None
@@ -1046,16 +1046,16 @@ Reusable code component.
Reusable code block component.
- Mount: `data-component="CodeBlock"`
- Props: `class: string = ""`, `language: string = "text"`, `filename: string = ""`, `code: string = ""`
- Props: `language: string = "text"`, `title: string = ""`, `code: string = ""`, `copyable: boolean = true`, `class: string = ""`
- Slots: None
- Events: `click`
- Events: None
### CodeTabs
Reusable code tabs component.
- Mount: `data-component="CodeTabs"`
- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""`
- Props: `class: string = ""`
- Slots: `default`
- Events: None
@@ -2126,7 +2126,7 @@ Reusable pricing contact form component.
Reusable pricing plan card component.
- Mount: `data-component="PricingPlanCard"`
- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"`
- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `badgeLabel: string = "Most popular"`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"`
- Slots: `default`
- Events: None
@@ -2135,7 +2135,7 @@ Reusable pricing plan card component.
Reusable product card component.
- Mount: `data-component="ProductCard"`
- Props: `eyebrow: string = "Product"`, `title: string = "Product name"`, `description: string = ""`, `href: string = "#"`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""`
- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""`
- Slots: None
- Events: None
@@ -2947,7 +2947,7 @@ Reusable chip component.
Reusable cluster component.
- Mount: `data-component="Cluster"`
- Props: `gap: string = "4"`, `className: string = ""`
- Props: `class: string = ""`
- Slots: `default`
- Events: None
@@ -3320,6 +3320,15 @@ Reusable section heading component.
- Slots: `default`
- Events: None
### SegmentedButtonGroup
Reusable segmented button group component.
- Mount: `data-component="SegmentedButtonGroup"`
- Props: `label: string = "Options"`, `items: string = []`, `active: string = ""`, `size: string = "md"`, `fullWidth: boolean = false`, `class: string = ""`
- Slots: None
- Events: `click`
### Select
Reusable select component.
@@ -3894,7 +3903,7 @@ Reusable member list component.
Reusable metric grid component.
- Mount: `data-component="MetricGrid"`
- Props: `label: string = "Key metrics"`, `metrics: string = []`, `class: string = ""`
- Props: `label: string = "Platform metrics"`, `metrics: string = []`, `compact: boolean = false`, `columns: number = 4`, `class: string = ""`
- Slots: None
- Events: None
@@ -3957,7 +3966,7 @@ Reusable policy version table component.
Reusable pricing comparison table component.
- Mount: `data-component="PricingComparisonTable"`
- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `class: string = ""`
- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `featuredPlan: string = ""`, `class: string = ""`
- Slots: None
- Events: None
@@ -4146,7 +4155,7 @@ Reusable subprocessor table component.
Reusable table component.
- Mount: `data-component="Table"`
- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`
- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`, `striped: boolean = false`, `hoverable: boolean = true`, `compact: boolean = false`
- Slots: `default`
- Events: None
@@ -4256,7 +4265,7 @@ Reusable api version badge component.
Reusable badge component.
- Mount: `data-component="Badge"`
- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`
- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`, `size: string = "md"`
- Slots: `default`
- Events: None
@@ -4661,8 +4670,8 @@ Reusable privacy notice component.
Reusable product status badge component.
- Mount: `data-component="ProductStatusBadge"`
- Props: `label: string = "ProductStatus"`, `variant: string = "default"`, `class: string = ""`
- Slots: `default`
- Props: `label: string = "Available"`, `status: string = ""`, `class: string = ""`
- Slots: None
- Events: None
### RateLimitedState
@@ -7765,8 +7774,8 @@ Reusable channel fallback diagram component.
Reusable channel flow component.
- Mount: `data-component="ChannelFlow"`
- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""`
- Slots: `default`
- Props: `class: string = ""`
- Slots: None
- Events: None
### ChecklistProgress
packages/ui/component-reference.json
+141 -100
View File
@@ -1,6 +1,6 @@
{
"generatedFrom": "packages/ui/components/*.wrn",
"count": 901,
"count": 902,
"components": [
{
"name": "AcceptAllCookiesButton",
@@ -3604,6 +3604,12 @@
"type": "string",
"required": false,
"default": "\"neutral\""
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\""
}
],
"slots": ["default"],
@@ -4914,6 +4920,18 @@
"required": false,
"default": "\"\""
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\""
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "className",
"type": "string",
@@ -4921,7 +4939,7 @@
"default": "\"\""
}
],
"slots": [],
"slots": ["default"],
"events": [],
"source": "components/Button.wrn"
},
@@ -6490,7 +6508,13 @@
"name": "icon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--radio-tower]\""
"default": "\"\""
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "class",
@@ -6644,36 +6668,6 @@
"category": "visualization",
"purpose": "Reusable channel flow component.",
"props": [
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "summary",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "loading",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "class",
"type": "string",
@@ -6681,7 +6675,7 @@
"default": "\"\""
}
],
"slots": ["default"],
"slots": [],
"events": [],
"source": "components/ChannelFlow.wrn"
},
@@ -7605,13 +7599,7 @@
"purpose": "Reusable cluster component.",
"props": [
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"4\""
},
{
"name": "className",
"name": "class",
"type": "string",
"required": false,
"default": "\"\""
@@ -7686,12 +7674,6 @@
"category": "content",
"purpose": "Reusable code block component.",
"props": [
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "language",
"type": "string",
@@ -7699,7 +7681,7 @@
"default": "\"text\""
},
{
"name": "filename",
"name": "title",
"type": "string",
"required": false,
"default": "\"\""
@@ -7709,10 +7691,22 @@
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "copyable",
"type": "boolean",
"required": false,
"default": "true"
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\""
}
],
"slots": [],
"events": ["click"],
"events": [],
"source": "components/CodeBlock.wrn"
},
{
@@ -7933,48 +7927,6 @@
"category": "content",
"purpose": "Reusable code tabs component.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "href",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"Learn more\""
},
{
"name": "image",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "alt",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "class",
"type": "string",
@@ -17783,7 +17735,7 @@
"name": "label",
"type": "string",
"required": false,
"default": "\"Action\""
"default": "\"Get started\""
},
{
"name": "href",
@@ -26760,7 +26712,7 @@
"name": "label",
"type": "string",
"required": false,
"default": "\"Key metrics\""
"default": "\"Platform metrics\""
},
{
"name": "metrics",
@@ -26768,6 +26720,18 @@
"required": false,
"default": "[]"
},
{
"name": "compact",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "4"
},
{
"name": "class",
"type": "string",
@@ -31831,6 +31795,12 @@
"required": false,
"default": "[]"
},
{
"name": "featuredPlan",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "class",
"type": "string",
@@ -32102,6 +32072,12 @@
"required": false,
"default": "false"
},
{
"name": "badgeLabel",
"type": "string",
"required": false,
"default": "\"Most popular\""
},
{
"name": "ctaLabel",
"type": "string",
@@ -32547,13 +32523,13 @@
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"Product\""
"default": "\"\""
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Product name\""
"default": "\"\""
},
{
"name": "description",
@@ -32565,7 +32541,7 @@
"name": "href",
"type": "string",
"required": false,
"default": "\"#\""
"default": "\"\""
},
{
"name": "actionLabel",
@@ -33269,13 +33245,13 @@
"name": "label",
"type": "string",
"required": false,
"default": "\"ProductStatus\""
"default": "\"Available\""
},
{
"name": "variant",
"name": "status",
"type": "string",
"required": false,
"default": "\"default\""
"default": "\"\""
},
{
"name": "class",
@@ -33284,7 +33260,7 @@
"default": "\"\""
}
],
"slots": ["default"],
"slots": [],
"events": [],
"source": "components/ProductStatusBadge.wrn"
},
@@ -39570,6 +39546,53 @@
"events": [],
"source": "components/SecurityReportForm.wrn"
},
{
"name": "SegmentedButtonGroup",
"mount": "SegmentedButtonGroup",
"category": "core",
"purpose": "Reusable segmented button group component.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Options\""
},
{
"name": "items",
"type": "string",
"required": false,
"default": "[]"
},
{
"name": "active",
"type": "string",
"required": false,
"default": "\"\""
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\""
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\""
}
],
"slots": [],
"events": ["click"],
"source": "components/SegmentedButtonGroup.wrn"
},
{
"name": "Select",
"mount": "Select",
@@ -42991,6 +43014,24 @@
"type": "boolean",
"required": false,
"default": "true"
},
{
"name": "striped",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "hoverable",
"type": "boolean",
"required": false,
"default": "true"
},
{
"name": "compact",
"type": "boolean",
"required": false,
"default": "false"
}
],
"slots": ["default"],
packages/ui/components/AnalyticsDashboardPreview.wrn
+59 -47
View File
@@ -11,59 +11,71 @@ component AnalyticsDashboardPreview {
}
view {
<section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
<div
class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
>
<div>
<section class="wire-analytics-preview {class}">
<div class="wire-analytics-preview__surface">
<div class="wire-analytics-preview__visual">
{#if image}
<img
src="{image}"
alt="{alt}"
class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
/>
<img
src="{image}"
alt="{alt}"
class="wire-analytics-preview__image"
/>
{:else}
<div
class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
role="img"
aria-label="Delivery trend rising over seven days"
>
<div class="flex items-center justify-between gap-4 text-sm">
<strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
<span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
</div>
<svg
class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
viewBox="0 0 700 250"
aria-hidden="true"
<div
class="wire-analytics-preview__chart"
role="img"
aria-label="Delivery trend rising over seven days"
>
<defs>
<linearGradient
id="wire-analytics-area"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
</linearGradient>
</defs>
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
</svg>
<div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
</div>
<div class="wire-analytics-preview__chart-header">
<strong>Delivery trend</strong>
<span>↗ 18.4%</span>
</div>
<svg
class="wire-analytics-preview__chart-svg"
viewBox="0 0 700 250"
aria-hidden="true"
>
<defs>
<linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="currentColor" stop-opacity=".3"></stop>
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
</linearGradient>
</defs>
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
<path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path>
</g>
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
</svg>
<div class="wire-analytics-preview__days">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
{/if}
</div>
<div>
{#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
{#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
{#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
<div class="mt-5"><slot /></div>
{#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
<div class="wire-analytics-preview__content">
{#if eyebrow}
<p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
{/if}
{#if title}
<h2 class="wire-analytics-preview__title">{title}</h2>
{/if}
{#if description}
<p class="wire-analytics-preview__description">{description}</p>
{/if}
<div class="wire-analytics-preview__metrics"><slot /></div>
{#if href}
<a href="{href}" class="wire-analytics-preview__action">
{actionLabel}<span aria-hidden="true">→</span>
</a>
{/if}
</div>
</div>
</section>
packages/ui/components/MetricGrid.wrn
+17 -11
View File
@@ -2,26 +2,32 @@ component MetricGrid {
props {
label = "Platform metrics"
metrics = []
compact = false
columns = 4
class = ""
}
view {
<section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
<div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<section
class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
aria-label="{label}"
>
<div
class="wire-metric-grid"
class:wire-metric-grid--compact='{compact}'
data-columns="{columns}"
>
{#each metrics as metric}
<article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
<strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
{metric.value}
</strong>
<span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
<article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
<strong class="wire-metric-card__value">{metric.value}</strong>
<span class="wire-metric-card__label">{metric.label}</span>
{#if metric.description}
<p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
<p class="wire-metric-card__description">{metric.description}</p>
{/if}
</article>
{:empty}
<p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
No metrics available.
</p>
<p class="wire-metric-grid__empty">No metrics available.</p>
{/each}
</div>
</section>
packages/ui/components/SegmentedButtonGroup.wrn
+44
View File
@@ -0,0 +1,44 @@
component SegmentedButtonGroup {
props {
label = "Options"
items = []
active = ""
size = "md"
fullWidth = false
class = ""
}
state current = active
view {
<div
class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
role="tablist"
aria-label="{label}"
>
{#each items as item, index}
<button
type="button"
role="tab"
aria-selected="{current === item.value}"
disabled="{item.disabled}"
class="wire-segmented-group__button"
class:wire-segmented-group__button--active='{current === item.value}'
@click="current = item.value"
>
{#if item.icon}
<span class="wire-segmented-group__icon {item.icon}" aria-hidden="true"></span>
{/if}
<span class="wire-segmented-group__label">{item.label}</span>
{#if item.badge}
<span class="wire-segmented-group__badge">{item.badge}</span>
{/if}
</button>
{:empty}
<span class="wire-segmented-group__empty">No options available</span>
{/each}
</div>
}
}
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.3.3",
"version": "0.3.4",
"private": true,
"type": "module",
"main": "src/index.ts",
packages/ui/ui.css
+392 -336
View File
@@ -1820,367 +1820,423 @@
}
}
/* --- Theme-safe pricing, action, badge, table and channel refinements ------ */
:where([data-wrn-component]) {
/* --- Segmented button group --------------------------------------------- */
.wire-segmented-group {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: minmax(max-content, 1fr);
align-items: stretch;
gap: 0.25rem;
max-width: 100%;
padding: 0.3rem;
overflow-x: auto;
color: var(--wire-color-text);
font-family: var(--wire-font-sans);
}
.wire-page-shell {
min-height: 100%;
background: var(--wire-color-bg);
color: var(--wire-color-text);
}
.wire-section {
padding-block: var(--wire-space-section-sm, 3.5rem);
}
@media (min-width: 1024px) {
.wire-section {
padding-block: var(--wire-space-section, 5rem);
}
}
.wire-container {
max-width: var(--wire-container-max, 80rem);
padding-inline: clamp(1rem, 2.5vw, 2rem);
}
.wire-btn {
min-height: 2.75rem;
border-radius: 0.75rem;
padding-inline: 1rem;
font-size: 0.875rem;
font-weight: 650;
letter-spacing: -0.01em;
box-shadow: none;
}
.wire-btn--primary {
border-color: var(--wire-color-primary);
background: var(--wire-color-primary);
color: var(--wire-color-primary-contrast);
box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
}
.wire-btn--primary:hover:not(:disabled) {
border-color: var(--wire-color-primary-hover);
background: var(--wire-color-primary-hover);
color: var(--wire-color-primary-contrast);
transform: translateY(-1px);
box-shadow: var(--wire-shadow-md, var(--wire-shadow-1));
}
.wire-btn--secondary,
.wire-btn--default {
border-color: var(--wire-color-border-strong, var(--wire-color-border));
background: var(--wire-color-surface);
color: var(--wire-color-text);
box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
}
.wire-btn--secondary:hover:not(:disabled),
.wire-btn--default:hover:not(:disabled) {
border-color: var(--wire-color-primary);
background: var(--wire-color-surface-2);
color: var(--wire-color-primary);
transform: translateY(-1px);
}
.wire-btn--ghost {
border-color: transparent;
background: transparent;
color: var(--wire-color-text);
}
.wire-btn--ghost:hover:not(:disabled) {
border-color: var(--wire-color-border);
background: var(--wire-color-surface-2);
color: var(--wire-color-primary);
}
.wire-btn--danger {
border-color: var(--wire-color-danger);
background: var(--wire-color-danger);
color: #fff;
}
.wire-btn--danger:hover:not(:disabled) {
filter: brightness(0.94);
transform: translateY(-1px);
}
.wire-btn--sm {
min-height: 2.25rem;
padding: 0.45rem 0.75rem;
font-size: 0.8125rem;
}
.wire-btn--md {
min-height: 2.75rem;
padding: 0.625rem 1rem;
}
.wire-btn--lg {
min-height: 3rem;
padding: 0.75rem 1.25rem;
font-size: 0.9375rem;
}
.wire-badge {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 0.375rem;
background: color-mix(in srgb, var(--wire-color-surface-2) 86%, transparent);
border: 1px solid var(--wire-color-border);
border-radius: 9999px;
background: var(--wire-color-surface-2);
color: var(--wire-color-text-muted, var(--wire-color-muted));
font-weight: 650;
border-radius: calc(var(--wire-radius-sm) + 0.25rem);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent),
var(--wire-shadow-1);
scrollbar-width: none;
}
.wire-segmented-group::-webkit-scrollbar {
display: none;
}
.wire-segmented-group--full {
display: grid;
width: 100%;
}
.wire-segmented-group__button {
position: relative;
isolation: isolate;
display: inline-flex;
min-width: 0;
min-height: 2.5rem;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.55rem 0.9rem;
overflow: hidden;
color: var(--wire-color-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--wire-radius-sm);
font: inherit;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
color var(--wire-motion-base) var(--wire-ease-standard),
background-color var(--wire-motion-base) var(--wire-ease-standard),
border-color var(--wire-motion-base) var(--wire-ease-standard),
box-shadow var(--wire-motion-base) var(--wire-ease-standard),
transform var(--wire-motion-base) var(--wire-ease-emphasized);
}
.wire-badge--sm {
padding: 0.25rem 0.5rem;
font-size: 0.6875rem;
}
.wire-badge--md {
padding: 0.375rem 0.625rem;
font-size: 0.75rem;
}
.wire-badge--lg {
padding: 0.45rem 0.75rem;
font-size: 0.8125rem;
}
.wire-badge--neutral {
border-color: var(--wire-color-border);
background: var(--wire-color-surface-2);
color: var(--wire-color-text-muted, var(--wire-color-muted));
}
.wire-badge--brand {
border-color: color-mix(in srgb, var(--wire-color-primary) 30%, transparent);
background: var(--wire-color-primary-soft);
color: var(--wire-color-primary);
}
.wire-badge--success {
border-color: color-mix(in srgb, var(--wire-color-success) 30%, transparent);
background: var(
--wire-color-success-soft,
color-mix(in srgb, var(--wire-color-success) 12%, transparent)
);
color: var(--wire-color-success);
}
.wire-badge--warning {
border-color: color-mix(in srgb, var(--wire-color-warning) 30%, transparent);
background: var(
--wire-color-warning-soft,
color-mix(in srgb, var(--wire-color-warning) 12%, transparent)
);
color: var(--wire-color-warning);
}
.wire-badge--danger {
border-color: color-mix(in srgb, var(--wire-color-danger) 30%, transparent);
background: var(
--wire-color-danger-soft,
color-mix(in srgb, var(--wire-color-danger) 12%, transparent)
);
color: var(--wire-color-danger);
}
.wire-table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
scrollbar-gutter: stable;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius, 1rem);
background: var(--wire-color-surface);
}
.wire-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--wire-color-surface);
color: var(--wire-color-text);
font-size: 0.875rem;
}
.wire-table th,
.wire-table td {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--wire-color-border);
vertical-align: middle;
}
.wire-table thead th {
background: var(--wire-color-surface-2);
color: var(--wire-color-text);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.wire-table tbody th {
color: var(--wire-color-text);
font-weight: 650;
}
.wire-table tbody td {
color: var(--wire-color-text-muted, var(--wire-color-muted));
}
.wire-table tbody tr:last-child > * {
border-bottom: 0;
}
.wire-table--hoverable tbody tr:hover > *,
.wire-comparison-table tbody tr:hover > * {
background: var(--wire-color-surface-2);
}
.wire-table--striped tbody tr:nth-child(even) > * {
background: color-mix(in srgb, var(--wire-color-surface-2) 72%, transparent);
}
.wire-table--compact th,
.wire-table--compact td {
padding: 0.7rem 0.9rem;
}
.wire-comparison-table th:not(:first-child),
.wire-comparison-table td:not(:first-child) {
text-align: center;
}
.wire-comparison-table thead th:first-child,
.wire-comparison-table tbody th {
position: sticky;
left: 0;
z-index: 1;
background: var(--wire-color-surface);
}
.wire-comparison-table thead th:first-child {
z-index: 2;
background: var(--wire-color-surface-2);
}
.wire-channel-card {
isolation: isolate;
}
.wire-channel-card__icon {
position: relative;
overflow: hidden;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wire-color-primary) 5%, transparent);
}
.wire-channel-card__icon::after {
.wire-segmented-group__button::before {
content: "";
position: absolute;
inset: auto -0.5rem -0.75rem auto;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--wire-color-primary) 14%, transparent);
pointer-events: none;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
opacity: 0;
transform: scale(0.88);
transition:
opacity var(--wire-motion-base) var(--wire-ease-standard),
transform var(--wire-motion-slow) var(--wire-ease-emphasized);
}
.wire-channel-card__icon > span {
position: relative;
z-index: 1;
display: block;
width: 1.25rem;
height: 1.25rem;
.wire-segmented-group__button:hover:not(:disabled) {
color: var(--wire-color-text);
background: color-mix(in srgb, var(--wire-color-surface) 65%, transparent);
}
.wire-segmented-group__button--active {
color: var(--wire-color-text);
border-color: color-mix(in srgb, var(--wire-color-primary) 22%, var(--wire-color-border));
transform: translateY(-1px);
}
.wire-segmented-group__button--active::before {
opacity: 1;
transform: scale(1);
}
.wire-segmented-group__button--active .wire-segmented-group__label {
animation: wire-segmented-label-in var(--wire-motion-slow) var(--wire-ease-emphasized) both;
}
.wire-segmented-group__button:focus-visible {
outline: 2px solid var(--wire-color-primary);
outline-offset: 1px;
}
.wire-segmented-group__button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.wire-segmented-group__badge {
display: inline-flex;
min-height: 1.35rem;
align-items: center;
padding: 0.15rem 0.45rem;
color: var(--wire-color-success);
background: color-mix(in srgb, var(--wire-color-success) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--wire-color-success) 22%, transparent);
border-radius: 999px;
font-size: 0.7rem;
font-weight: 800;
}
.wire-segmented-group__icon {
width: 1rem;
height: 1rem;
flex: none;
color: currentColor;
}
.wire-channel-card__icon > span::before {
display: block;
width: 100%;
height: 100%;
.wire-segmented-group--sm .wire-segmented-group__button {
min-height: 2.15rem;
padding: 0.4rem 0.7rem;
font-size: 0.8rem;
}
/* --- Channel card --------------------------------------------------------- */
.wire-segmented-group--lg .wire-segmented-group__button {
min-height: 3rem;
padding: 0.7rem 1.15rem;
font-size: 0.95rem;
}
.wire-channel-card__icon {
.wire-segmented-group__empty {
padding: 0.65rem 0.9rem;
color: var(--wire-color-muted);
font-size: 0.875rem;
}
@keyframes wire-segmented-label-in {
from {
opacity: 0.68;
transform: translateY(3px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Analytics dashboard preview ---------------------------------------- */
.wire-analytics-preview {
width: 100%;
min-width: 0;
}
.wire-analytics-preview__surface {
display: grid;
width: 3rem;
height: 3rem;
flex: 0 0 3rem;
place-items: center;
overflow: hidden;
color: color-mix(in srgb, var(--wire-color-primary) 72%, var(--wire-color-text));
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 38%, var(--wire-color-border));
border-radius: 0.875rem;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--wire-color-primary) 18%, var(--wire-color-surface)),
color-mix(in srgb, var(--wire-color-primary) 8%, var(--wire-color-surface-2))
);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 8%, transparent),
0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
}
.wire-channel-card__icon-glyph {
display: block;
width: 1.5rem;
height: 1.5rem;
color: inherit;
font-size: 1.5rem;
line-height: 1;
}
.wire-channel-card__icon-glyph::before {
display: block;
grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
width: 100%;
height: 100%;
color: inherit;
min-width: 0;
padding: clamp(1.25rem, 3vw, 2rem);
overflow: hidden;
color: var(--wire-color-text);
background:
radial-gradient(
circle at 100% 0%,
color-mix(in srgb, var(--wire-color-primary) 10%, transparent),
transparent 38%
),
var(--wire-color-surface);
border: 1px solid var(--wire-color-border);
border-radius: calc(var(--wire-radius) * 1.35);
box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--wire-color-text) 9%, transparent);
}
/* Improve contrast when the current theme uses a dark primary color. */
[data-theme="dark"] .wire-channel-card__icon,
.dark .wire-channel-card__icon {
color: color-mix(in srgb, var(--wire-color-primary) 48%, white);
border-color: color-mix(in srgb, var(--wire-color-primary) 42%, var(--wire-color-border));
background: linear-gradient(
145deg,
color-mix(in srgb, var(--wire-color-primary) 24%, var(--wire-color-surface)),
color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface-2))
);
.wire-analytics-preview__visual,
.wire-analytics-preview__content {
min-width: 0;
}
@media (hover: hover) and (pointer: fine) {
.wire-channel-card:hover .wire-channel-card__icon {
color: color-mix(in srgb, var(--wire-color-primary) 82%, var(--wire-color-text));
.wire-analytics-preview__chart,
.wire-analytics-preview__image {
width: 100%;
border: 1px solid color-mix(in srgb, var(--wire-color-border) 88%, transparent);
border-radius: calc(var(--wire-radius) * 0.95);
background: color-mix(in srgb, var(--wire-color-surface-2) 92%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent);
}
border-color: color-mix(in srgb, var(--wire-color-primary) 62%, var(--wire-color-border));
.wire-analytics-preview__image {
aspect-ratio: 16 / 10;
object-fit: cover;
}
transform: translateY(-2px);
.wire-analytics-preview__chart {
padding: clamp(1rem, 2vw, 1.35rem);
}
.wire-analytics-preview__chart-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: var(--wire-color-text);
font-size: 0.875rem;
}
.wire-analytics-preview__chart-header span {
color: var(--wire-color-success);
font-weight: 800;
}
.wire-analytics-preview__chart-svg {
width: 100%;
height: auto;
margin-top: 1rem;
color: var(--wire-color-primary);
}
.wire-analytics-preview__days {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.5rem;
color: var(--wire-color-muted);
font-size: 0.7rem;
}
.wire-analytics-preview__content {
display: grid;
align-content: center;
}
.wire-analytics-preview__eyebrow {
margin: 0;
color: var(--wire-color-primary);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.wire-analytics-preview__title {
max-width: 13ch;
margin: 0;
color: var(--wire-color-text);
font-size: clamp(1.85rem, 4vw, 3rem);
line-height: 1.03;
font-weight: 750;
letter-spacing: -0.045em;
}
.wire-analytics-preview__eyebrow + .wire-analytics-preview__title {
margin-top: 0.8rem;
}
.wire-analytics-preview__description {
max-width: 34rem;
margin: 1rem 0 0;
color: var(--wire-color-muted);
font-size: 1rem;
line-height: 1.7;
}
.wire-analytics-preview__metrics {
min-width: 0;
margin-top: 1.5rem;
}
.wire-analytics-preview__action {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
color: var(--wire-color-primary);
font-weight: 750;
text-decoration: none;
}
.wire-analytics-preview__action span {
transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
}
.wire-analytics-preview__action:hover span {
transform: translateX(0.25rem);
}
/* --- Metric grid refinements -------------------------------------------- */
.wire-metric-grid-shell {
width: 100%;
min-width: 0;
}
.wire-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: 1rem;
min-width: 0;
}
.wire-metric-grid[data-columns="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wire-metric-grid[data-columns="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wire-metric-grid[data-columns="4"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wire-metric-card {
display: flex;
min-width: 0;
min-height: 9.5rem;
flex-direction: column;
justify-content: center;
padding: 1.25rem;
color: var(--wire-color-text);
background: var(--wire-color-surface);
border: 1px solid var(--wire-color-border);
border-radius: calc(var(--wire-radius) * 0.9);
box-shadow: var(--wire-shadow-1);
}
.wire-metric-card__value {
overflow-wrap: anywhere;
color: var(--wire-color-text);
font-size: clamp(1.65rem, 3vw, 2.25rem);
line-height: 1;
font-weight: 750;
letter-spacing: -0.045em;
}
.wire-metric-card__label {
margin-top: 0.7rem;
color: var(--wire-color-text);
font-size: 0.875rem;
font-weight: 700;
}
.wire-metric-card__description {
margin: 0.45rem 0 0;
color: var(--wire-color-muted);
font-size: 0.8rem;
line-height: 1.5;
}
.wire-metric-grid--compact {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.wire-metric-card--compact {
min-height: 7.25rem;
padding: 1rem;
text-align: left;
background: color-mix(in srgb, var(--wire-color-surface-2) 72%, var(--wire-color-surface));
box-shadow: none;
}
.wire-metric-card--compact .wire-metric-card__value {
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: 1.15;
}
.wire-metric-card--compact .wire-metric-card__label {
margin-top: 0.45rem;
color: var(--wire-color-muted);
font-size: 0.75rem;
}
.wire-metric-grid__empty {
grid-column: 1 / -1;
margin: 0;
padding: 1.5rem;
color: var(--wire-color-muted);
text-align: center;
border: 1px dashed var(--wire-color-border);
border-radius: var(--wire-radius);
}
@media (max-width: 900px) {
.wire-analytics-preview__surface {
grid-template-columns: 1fr;
}
[data-theme="dark"] .wire-channel-card:hover .wire-channel-card__icon,
.dark .wire-channel-card:hover .wire-channel-card__icon {
color: color-mix(in srgb, var(--wire-color-primary) 58%, white);
.wire-analytics-preview__title {
max-width: 18ch;
}
}
@media (max-width: 640px) {
.wire-segmented-group {
width: 100%;
}
.wire-segmented-group__button {
min-width: max-content;
}
.wire-metric-grid,
.wire-metric-grid[data-columns="2"],
.wire-metric-grid[data-columns="3"],
.wire-metric-grid[data-columns="4"],
.wire-metric-grid--compact {
grid-template-columns: 1fr;
}
.wire-metric-card--compact {
min-height: auto;
}
}