feat(ui): add professional visual fallbacks
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/authz — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
+11
-11
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/cli — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -28,16 +28,16 @@
|
||||
"wrnexus": "./dist/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64",
|
||||
"@wrnexus/router": "^0.2.64",
|
||||
"@wrnexus/csr": "^0.2.64",
|
||||
"@wrnexus/compiler": "^0.2.64",
|
||||
"@wrnexus/styles": "^0.2.64",
|
||||
"@wrnexus/dev-server": "^0.2.64",
|
||||
"@wrnexus/ui": "^0.2.64",
|
||||
"@wrnexus/validation": "^0.2.64",
|
||||
"@wrnexus/i18n": "^0.2.64",
|
||||
"@wrnexus/db": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65",
|
||||
"@wrnexus/router": "^0.2.65",
|
||||
"@wrnexus/csr": "^0.2.65",
|
||||
"@wrnexus/compiler": "^0.2.65",
|
||||
"@wrnexus/styles": "^0.2.65",
|
||||
"@wrnexus/dev-server": "^0.2.65",
|
||||
"@wrnexus/ui": "^0.2.65",
|
||||
"@wrnexus/validation": "^0.2.65",
|
||||
"@wrnexus/i18n": "^0.2.65",
|
||||
"@wrnexus/db": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/compiler",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/compiler — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/core",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/core — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/csr — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/db",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/db — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/dev-server — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -25,18 +25,18 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64",
|
||||
"@wrnexus/router": "^0.2.64",
|
||||
"@wrnexus/ssr": "^0.2.64",
|
||||
"@wrnexus/csr": "^0.2.64",
|
||||
"@wrnexus/compiler": "^0.2.64",
|
||||
"@wrnexus/styles": "^0.2.64",
|
||||
"@wrnexus/ui": "^0.2.64",
|
||||
"@wrnexus/validation": "^0.2.64",
|
||||
"@wrnexus/i18n": "^0.2.64",
|
||||
"@wrnexus/db": "^0.2.64",
|
||||
"@wrnexus/pubsub": "^0.2.64",
|
||||
"@wrnexus/uploader": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65",
|
||||
"@wrnexus/router": "^0.2.65",
|
||||
"@wrnexus/ssr": "^0.2.65",
|
||||
"@wrnexus/csr": "^0.2.65",
|
||||
"@wrnexus/compiler": "^0.2.65",
|
||||
"@wrnexus/styles": "^0.2.65",
|
||||
"@wrnexus/ui": "^0.2.65",
|
||||
"@wrnexus/validation": "^0.2.65",
|
||||
"@wrnexus/i18n": "^0.2.65",
|
||||
"@wrnexus/db": "^0.2.65",
|
||||
"@wrnexus/pubsub": "^0.2.65",
|
||||
"@wrnexus/uploader": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/encryption",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/encryption — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/helpers",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/i18n",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/i18n — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/jwt",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/jwt — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/mobile",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/mobile — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/native": "^0.2.64"
|
||||
"@wrnexus/native": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/native",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/native — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/oauth",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/oauth — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/pubsub",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/pubsub — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/queue",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/queue — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/reactive",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/reactive — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/router",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/router — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,8 +21,8 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "^0.2.64",
|
||||
"@wrnexus/core": "^0.2.64"
|
||||
"@wrnexus/compiler": "^0.2.65",
|
||||
"@wrnexus/core": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/ssr — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/styles — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/uploader": "^0.2.64"
|
||||
"@wrnexus/uploader": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/test",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/test — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/tracking",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/tracking — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -695,7 +695,7 @@ Reusable analytics dashboard preview component.
|
||||
Reusable api endpoint card component.
|
||||
|
||||
- Mount: `data-component="ApiEndpointCard"`
|
||||
- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `description: string = ""`
|
||||
- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "View endpoint"`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -920,7 +920,7 @@ Reusable calendar component.
|
||||
Reusable campaign card component.
|
||||
|
||||
- Mount: `data-component="CampaignCard"`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--send]"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -1001,7 +1001,7 @@ Reusable certificate upload component.
|
||||
Reusable channel card component.
|
||||
|
||||
- Mount: `data-component="ChannelCard"`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--radio-tower]"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -1460,7 +1460,7 @@ Reusable favicon upload component.
|
||||
Reusable feature card component.
|
||||
|
||||
- Mount: `data-component="FeatureCard"`
|
||||
- Props: `class: string = ""`, `icon: string = "✦"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
|
||||
- Props: `class: string = ""`, `icon: string = "icon-[lucide--sparkles]"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
|
||||
- Slots: None
|
||||
- Events: None
|
||||
|
||||
@@ -1748,7 +1748,7 @@ Reusable inline code component.
|
||||
Reusable integration card component.
|
||||
|
||||
- Mount: `data-component="IntegrationCard"`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--plug-zap]"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -4256,8 +4256,8 @@ Reusable api version badge component.
|
||||
Reusable badge component.
|
||||
|
||||
- Mount: `data-component="Badge"`
|
||||
- Props: `class: string = ""`, `label: string = "Badge"`, `variant: string = "neutral"`
|
||||
- Slots: None
|
||||
- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
### Banner
|
||||
|
||||
@@ -1498,11 +1498,35 @@
|
||||
"required": false,
|
||||
"default": "\"/api/example\""
|
||||
},
|
||||
{
|
||||
"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": "\"View endpoint\""
|
||||
}
|
||||
],
|
||||
"slots": ["default"],
|
||||
@@ -3531,7 +3555,7 @@
|
||||
"name": "label",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Badge\""
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
@@ -3540,7 +3564,7 @@
|
||||
"default": "\"neutral\""
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": ["default"],
|
||||
"events": [],
|
||||
"source": "components/Badge.wrn"
|
||||
},
|
||||
@@ -5296,6 +5320,12 @@
|
||||
"required": false,
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"icon-[lucide--send]\""
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
@@ -6414,6 +6444,12 @@
|
||||
"required": false,
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"icon-[lucide--radio-tower]\""
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
@@ -16546,7 +16582,7 @@
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"✦\""
|
||||
"default": "\"icon-[lucide--sparkles]\""
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
@@ -22571,6 +22607,12 @@
|
||||
"required": false,
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"icon-[lucide--plug-zap]\""
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
|
||||
@@ -9,5 +9,7 @@ component AccessibleChartSummary {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}"><div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-2 text-sm font-bold"><span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true"></span>Chart summary</div><dl class="grid gap-3"><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Delivered</dt><dd class="font-bold">96.8%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Engaged</dt><dd class="font-bold">42.1%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Converted</dt><dd class="font-bold">8.7%</dd></div></dl></div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component AnalyticsDashboardPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Communication performance chart trending upward over seven days" class="grid min-h-64 gap-4 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center justify-between"><span class="text-sm font-semibold">Delivery trend</span><span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-500"><span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>18.4%</span></div><svg viewBox="0 0 600 190" role="presentation" class="h-auto w-full overflow-visible"><defs><linearGradient id="wire-analytics-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="currentColor" stop-opacity="0.28"></stop><stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g stroke="currentColor" stroke-opacity="0.12"><path d="M0 30H600M0 80H600M0 130H600M0 180H600"></path></g><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30 L600 190 L0 190 Z" fill="url(#wire-analytics-fill)" class="text-violet-500"></path><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" class="text-violet-500"></path><g fill="currentColor" class="text-violet-500"><circle cx="124" cy="126" r="5"></circle><circle cx="255" cy="103" r="5"></circle><circle cx="392" cy="98" r="5"></circle><circle cx="515" cy="74" r="5"></circle><circle cx="600" cy="30" r="6"></circle></g></svg><div class="flex justify-between text-[0.6875rem] text-slate-500"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,11 @@ component ApiEndpointCard {
|
||||
class = ""
|
||||
method = "GET"
|
||||
path = "/api/example"
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "View endpoint"
|
||||
}
|
||||
|
||||
view {
|
||||
@@ -17,7 +21,7 @@ component ApiEndpointCard {
|
||||
{method}
|
||||
</span>
|
||||
<code class="text-sm font-semibold">
|
||||
{path}
|
||||
{title || path}
|
||||
</code>
|
||||
</div>
|
||||
<p
|
||||
@@ -29,6 +33,7 @@ component ApiEndpointCard {
|
||||
<div class="mt-4">
|
||||
<slot />
|
||||
</div>
|
||||
{#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}
|
||||
</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component CampaignCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--send]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component ChannelCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--radio-tower]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -7,6 +7,6 @@ component CodeBlock {
|
||||
}
|
||||
state copied = false
|
||||
view {
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 {class}"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
|
||||
<div class="min-w-0 overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 shadow-2xl shadow-slate-950/20 {class}"><div class="flex min-h-12 items-center justify-between gap-4 border-b border-slate-800 px-4 text-xs text-slate-400"><span class="inline-flex min-w-0 items-center gap-2 truncate"><span class="icon-[lucide--terminal] size-4 shrink-0" aria-hidden="true"></span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-700 px-2.5 py-1.5 font-semibold text-slate-300 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white"><span class="{copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]'} size-3.5" aria-hidden="true"></span>{copied ? 'Copied' : 'Copy'}</button></div><pre class="m-0 max-w-full overflow-x-auto whitespace-pre-wrap break-words p-5 font-mono text-[0.8125rem] leading-6 sm:whitespace-pre"><code>{code}</code></pre></div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component ConsentTimelinePreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Consent history showing allowed and suppressed customer channels" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-3"><span class="icon-[lucide--message-circle-check] size-5 text-emerald-500" aria-hidden="true"></span><span class="grid text-sm"><strong>WhatsApp allowed</strong><span class="text-xs text-slate-500">Web form · 12 Jul, 10:24</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--mail-check] size-5 text-violet-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Email allowed</strong><span class="text-xs text-slate-500">Preference centre · 08 Jul</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-rose-500/20 bg-rose-500/5 p-3"><span class="icon-[lucide--phone-off] size-5 text-rose-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Voice suppressed</strong><span class="text-xs text-slate-500">Customer request · 02 Jul</span></span><span class="ml-auto text-xs font-bold text-rose-500">Blocked</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component ConversationPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Shared inbox conversation moving from automation to a human teammate" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 border-b border-slate-200 pb-3 dark:border-slate-800"><span class="grid size-9 place-items-center rounded-full bg-violet-500/10 text-violet-500"><span class="icon-[lucide--message-circle] size-4" aria-hidden="true"></span></span><span class="grid text-sm"><strong>Order support</strong><span class="text-xs text-slate-500">Customer context attached</span></span><span class="ml-auto size-2 rounded-full bg-emerald-500"></span></div><div class="max-w-[82%] rounded-2xl rounded-tl-sm bg-white p-3 text-sm shadow-sm dark:bg-slate-900">Can I change the delivery address?</div><div class="ml-auto max-w-[82%] rounded-2xl rounded-tr-sm bg-violet-600 p-3 text-sm text-white">Absolutely — I’ll help with that now.</div><div class="inline-flex items-center gap-2 text-xs text-slate-500"><span class="icon-[lucide--bot] size-4" aria-hidden="true"></span>Automation handed off to Maya</div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
component FeatureCard {
|
||||
props {
|
||||
class = ""
|
||||
icon = "✦"
|
||||
icon = "icon-[lucide--sparkles]"
|
||||
title = "Feature"
|
||||
description = ""
|
||||
href = ""
|
||||
}
|
||||
view {
|
||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
|
||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/10 text-violet-700 transition group-hover:scale-105 dark:text-violet-300"><span class="{icon} size-5" aria-hidden="true"></span></div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p>{#if href}<a href="{href}" class="mt-4 inline-flex items-center gap-2 font-semibold text-violet-600">Learn more<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component FeatureChecklist {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="presentation" class="grid grid-cols-[auto_1fr] gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><span class="grid size-10 place-items-center rounded-xl bg-violet-500/10 text-violet-500"><span class="icon-[lucide--list-checks] size-5" aria-hidden="true"></span></span><div class="grid gap-2"><span class="h-2 w-4/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-3/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-2/3 rounded-full bg-slate-200 dark:bg-slate-800"></span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component IntegrationCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--plug-zap]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -7,5 +7,7 @@ component SectionActions {
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
|
||||
view {
|
||||
<span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,5 +7,5 @@ component SmartRouteDiagram {
|
||||
loading = false
|
||||
class = ""
|
||||
}
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption>{#if title}<strong>{title}</strong>{/if}{#if value}<span class="wire-metric__value">{value}</span>{/if}{#if description}<span class="wire-muted">{description}</span>{/if}</figcaption>{#if loading}<div class="wire-skeleton wire-catalog-visualization__skeleton"></div>{:else}<div class="wire-catalog-visualization__content"><slot /></div>{/if}{#if summary}<p class="wire-visually-hidden">{summary}</p>{/if}</figure> }
|
||||
}
|
||||
|
||||
@@ -6,5 +6,10 @@ component TrustBadgeList {
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
view {
|
||||
<section class="wire-catalog-collection {class}">
|
||||
{#if title || description}<header>{#if title}<h2>{title}</h2>{/if}{#if description}<p>{description}</p>{/if}</header>{/if}
|
||||
{#if empty}<p role="status" class="wire-muted">{emptyText}</p>{:else}<div role="list" class="wire-catalog-collection__items"><slot /></div>{/if}
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component UnifiedTimelinePreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Unified customer timeline across automated and human interactions" class="grid min-h-52 gap-0 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-violet-500/10 text-violet-500"><span class="icon-[lucide--zap] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Workflow triggered</strong><span class="text-xs text-slate-500">Order status changed</span></span><time class="text-xs text-slate-500">09:42</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-emerald-500/10 text-emerald-500"><span class="icon-[lucide--message-square-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">WhatsApp delivered</strong><span class="text-xs text-slate-500">Template: order shipped</span></span><time class="text-xs text-slate-500">09:43</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-sky-500/10 text-sky-500"><span class="icon-[lucide--user-round-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Human follow-up</strong><span class="text-xs text-slate-500">Assigned to support</span></span><time class="text-xs text-slate-500">09:48</time></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,10 @@ component WorkflowCanvasPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">
|
||||
{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Automation workflow with trigger, decision, and channel delivery steps" class="relative grid min-h-52 grid-cols-[1fr_auto_1fr] items-center gap-3 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--webhook] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Event received</strong><span class="text-xs text-slate-500">Order shipped</span></div><span class="icon-[lucide--arrow-right] size-5 text-slate-400" aria-hidden="true"></span><div class="grid gap-2 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3"><span class="icon-[lucide--workflow] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Smart route</strong><span class="text-xs text-slate-500">Consent + availability</span></div><span class="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300"><span class="icon-[lucide--circle-check] size-3.5" aria-hidden="true"></span>Delivered</span></div>{/if}
|
||||
{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}
|
||||
</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
component Badge {
|
||||
props {
|
||||
class = ""
|
||||
label = "Badge"
|
||||
label = ""
|
||||
variant = "neutral"
|
||||
}
|
||||
view {
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}</span>
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}<slot /></span>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/ui — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -25,7 +25,7 @@
|
||||
"./ui.css": "./ui.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
+12
-1
@@ -1365,7 +1365,7 @@
|
||||
transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
}
|
||||
.wire-catalog-card::before {
|
||||
display: grid;
|
||||
display: none;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
place-items: center;
|
||||
@@ -1377,6 +1377,17 @@
|
||||
border-radius: calc(var(--wire-radius) * 0.8);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
|
||||
}
|
||||
.wire-catalog-card__icon {
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
place-items: center;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--wire-color-primary);
|
||||
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 28%, transparent);
|
||||
border-radius: calc(var(--wire-radius) * 0.8);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 10%, transparent);
|
||||
}
|
||||
.wire-catalog-card--channel::before {
|
||||
content: "◉";
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/uploader",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/uploader — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.2.64"
|
||||
"@wrnexus/core": "^0.2.65"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/validation",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/validation — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/compiler",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/core",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/db",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/encryption",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/helpers",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/i18n",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/jwt",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/mobile",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/native",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/oauth",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/pubsub",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/queue",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/reactive",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/router",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/test",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/tracking",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -695,7 +695,7 @@ Reusable analytics dashboard preview component.
|
||||
Reusable api endpoint card component.
|
||||
|
||||
- Mount: `data-component="ApiEndpointCard"`
|
||||
- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `description: string = ""`
|
||||
- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "View endpoint"`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -920,7 +920,7 @@ Reusable calendar component.
|
||||
Reusable campaign card component.
|
||||
|
||||
- Mount: `data-component="CampaignCard"`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--send]"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -1001,7 +1001,7 @@ Reusable certificate upload component.
|
||||
Reusable channel card component.
|
||||
|
||||
- Mount: `data-component="ChannelCard"`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--radio-tower]"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -1460,7 +1460,7 @@ Reusable favicon upload component.
|
||||
Reusable feature card component.
|
||||
|
||||
- Mount: `data-component="FeatureCard"`
|
||||
- Props: `class: string = ""`, `icon: string = "✦"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
|
||||
- Props: `class: string = ""`, `icon: string = "icon-[lucide--sparkles]"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
|
||||
- Slots: None
|
||||
- Events: None
|
||||
|
||||
@@ -1748,7 +1748,7 @@ Reusable inline code component.
|
||||
Reusable integration card component.
|
||||
|
||||
- Mount: `data-component="IntegrationCard"`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
|
||||
- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--plug-zap]"`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
@@ -4256,8 +4256,8 @@ Reusable api version badge component.
|
||||
Reusable badge component.
|
||||
|
||||
- Mount: `data-component="Badge"`
|
||||
- Props: `class: string = ""`, `label: string = "Badge"`, `variant: string = "neutral"`
|
||||
- Slots: None
|
||||
- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`
|
||||
- Slots: `default`
|
||||
- Events: None
|
||||
|
||||
### Banner
|
||||
|
||||
@@ -1498,11 +1498,35 @@
|
||||
"required": false,
|
||||
"default": "\"/api/example\""
|
||||
},
|
||||
{
|
||||
"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": "\"View endpoint\""
|
||||
}
|
||||
],
|
||||
"slots": ["default"],
|
||||
@@ -3531,7 +3555,7 @@
|
||||
"name": "label",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Badge\""
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
@@ -3540,7 +3564,7 @@
|
||||
"default": "\"neutral\""
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": ["default"],
|
||||
"events": [],
|
||||
"source": "components/Badge.wrn"
|
||||
},
|
||||
@@ -5296,6 +5320,12 @@
|
||||
"required": false,
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"icon-[lucide--send]\""
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
@@ -6414,6 +6444,12 @@
|
||||
"required": false,
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"icon-[lucide--radio-tower]\""
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
@@ -16546,7 +16582,7 @@
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"✦\""
|
||||
"default": "\"icon-[lucide--sparkles]\""
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
@@ -22571,6 +22607,12 @@
|
||||
"required": false,
|
||||
"default": "\"\""
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"icon-[lucide--plug-zap]\""
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
|
||||
@@ -9,5 +9,7 @@ component AccessibleChartSummary {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}"><div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-2 text-sm font-bold"><span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true"></span>Chart summary</div><dl class="grid gap-3"><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Delivered</dt><dd class="font-bold">96.8%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Engaged</dt><dd class="font-bold">42.1%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Converted</dt><dd class="font-bold">8.7%</dd></div></dl></div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component AnalyticsDashboardPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Communication performance chart trending upward over seven days" class="grid min-h-64 gap-4 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center justify-between"><span class="text-sm font-semibold">Delivery trend</span><span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-500"><span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>18.4%</span></div><svg viewBox="0 0 600 190" role="presentation" class="h-auto w-full overflow-visible"><defs><linearGradient id="wire-analytics-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="currentColor" stop-opacity="0.28"></stop><stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g stroke="currentColor" stroke-opacity="0.12"><path d="M0 30H600M0 80H600M0 130H600M0 180H600"></path></g><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30 L600 190 L0 190 Z" fill="url(#wire-analytics-fill)" class="text-violet-500"></path><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" class="text-violet-500"></path><g fill="currentColor" class="text-violet-500"><circle cx="124" cy="126" r="5"></circle><circle cx="255" cy="103" r="5"></circle><circle cx="392" cy="98" r="5"></circle><circle cx="515" cy="74" r="5"></circle><circle cx="600" cy="30" r="6"></circle></g></svg><div class="flex justify-between text-[0.6875rem] text-slate-500"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,11 @@ component ApiEndpointCard {
|
||||
class = ""
|
||||
method = "GET"
|
||||
path = "/api/example"
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "View endpoint"
|
||||
}
|
||||
|
||||
view {
|
||||
@@ -17,7 +21,7 @@ component ApiEndpointCard {
|
||||
{method}
|
||||
</span>
|
||||
<code class="text-sm font-semibold">
|
||||
{path}
|
||||
{title || path}
|
||||
</code>
|
||||
</div>
|
||||
<p
|
||||
@@ -29,6 +33,7 @@ component ApiEndpointCard {
|
||||
<div class="mt-4">
|
||||
<slot />
|
||||
</div>
|
||||
{#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}
|
||||
</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component CampaignCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--send]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component ChannelCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--radio-tower]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -7,6 +7,6 @@ component CodeBlock {
|
||||
}
|
||||
state copied = false
|
||||
view {
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 {class}"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
|
||||
<div class="min-w-0 overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 shadow-2xl shadow-slate-950/20 {class}"><div class="flex min-h-12 items-center justify-between gap-4 border-b border-slate-800 px-4 text-xs text-slate-400"><span class="inline-flex min-w-0 items-center gap-2 truncate"><span class="icon-[lucide--terminal] size-4 shrink-0" aria-hidden="true"></span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-700 px-2.5 py-1.5 font-semibold text-slate-300 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white"><span class="{copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]'} size-3.5" aria-hidden="true"></span>{copied ? 'Copied' : 'Copy'}</button></div><pre class="m-0 max-w-full overflow-x-auto whitespace-pre-wrap break-words p-5 font-mono text-[0.8125rem] leading-6 sm:whitespace-pre"><code>{code}</code></pre></div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component ConsentTimelinePreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Consent history showing allowed and suppressed customer channels" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-3"><span class="icon-[lucide--message-circle-check] size-5 text-emerald-500" aria-hidden="true"></span><span class="grid text-sm"><strong>WhatsApp allowed</strong><span class="text-xs text-slate-500">Web form · 12 Jul, 10:24</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--mail-check] size-5 text-violet-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Email allowed</strong><span class="text-xs text-slate-500">Preference centre · 08 Jul</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-rose-500/20 bg-rose-500/5 p-3"><span class="icon-[lucide--phone-off] size-5 text-rose-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Voice suppressed</strong><span class="text-xs text-slate-500">Customer request · 02 Jul</span></span><span class="ml-auto text-xs font-bold text-rose-500">Blocked</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component ConversationPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Shared inbox conversation moving from automation to a human teammate" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 border-b border-slate-200 pb-3 dark:border-slate-800"><span class="grid size-9 place-items-center rounded-full bg-violet-500/10 text-violet-500"><span class="icon-[lucide--message-circle] size-4" aria-hidden="true"></span></span><span class="grid text-sm"><strong>Order support</strong><span class="text-xs text-slate-500">Customer context attached</span></span><span class="ml-auto size-2 rounded-full bg-emerald-500"></span></div><div class="max-w-[82%] rounded-2xl rounded-tl-sm bg-white p-3 text-sm shadow-sm dark:bg-slate-900">Can I change the delivery address?</div><div class="ml-auto max-w-[82%] rounded-2xl rounded-tr-sm bg-violet-600 p-3 text-sm text-white">Absolutely — I’ll help with that now.</div><div class="inline-flex items-center gap-2 text-xs text-slate-500"><span class="icon-[lucide--bot] size-4" aria-hidden="true"></span>Automation handed off to Maya</div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
component FeatureCard {
|
||||
props {
|
||||
class = ""
|
||||
icon = "✦"
|
||||
icon = "icon-[lucide--sparkles]"
|
||||
title = "Feature"
|
||||
description = ""
|
||||
href = ""
|
||||
}
|
||||
view {
|
||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
|
||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/10 text-violet-700 transition group-hover:scale-105 dark:text-violet-300"><span class="{icon} size-5" aria-hidden="true"></span></div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p>{#if href}<a href="{href}" class="mt-4 inline-flex items-center gap-2 font-semibold text-violet-600">Learn more<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component FeatureChecklist {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="presentation" class="grid grid-cols-[auto_1fr] gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><span class="grid size-10 place-items-center rounded-xl bg-violet-500/10 text-violet-500"><span class="icon-[lucide--list-checks] size-5" aria-hidden="true"></span></span><div class="grid gap-2"><span class="h-2 w-4/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-3/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-2/3 rounded-full bg-slate-200 dark:bg-slate-800"></span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component IntegrationCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--plug-zap]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -7,5 +7,7 @@ component SectionActions {
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
|
||||
view {
|
||||
<span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,5 +7,5 @@ component SmartRouteDiagram {
|
||||
loading = false
|
||||
class = ""
|
||||
}
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption>{#if title}<strong>{title}</strong>{/if}{#if value}<span class="wire-metric__value">{value}</span>{/if}{#if description}<span class="wire-muted">{description}</span>{/if}</figcaption>{#if loading}<div class="wire-skeleton wire-catalog-visualization__skeleton"></div>{:else}<div class="wire-catalog-visualization__content"><slot /></div>{/if}{#if summary}<p class="wire-visually-hidden">{summary}</p>{/if}</figure> }
|
||||
}
|
||||
|
||||
@@ -6,5 +6,10 @@ component TrustBadgeList {
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
view {
|
||||
<section class="wire-catalog-collection {class}">
|
||||
{#if title || description}<header>{#if title}<h2>{title}</h2>{/if}{#if description}<p>{description}</p>{/if}</header>{/if}
|
||||
{#if empty}<p role="status" class="wire-muted">{emptyText}</p>{:else}<div role="list" class="wire-catalog-collection__items"><slot /></div>{/if}
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component UnifiedTimelinePreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Unified customer timeline across automated and human interactions" class="grid min-h-52 gap-0 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-violet-500/10 text-violet-500"><span class="icon-[lucide--zap] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Workflow triggered</strong><span class="text-xs text-slate-500">Order status changed</span></span><time class="text-xs text-slate-500">09:42</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-emerald-500/10 text-emerald-500"><span class="icon-[lucide--message-square-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">WhatsApp delivered</strong><span class="text-xs text-slate-500">Template: order shipped</span></span><time class="text-xs text-slate-500">09:43</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-sky-500/10 text-sky-500"><span class="icon-[lucide--user-round-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Human follow-up</strong><span class="text-xs text-slate-500">Assigned to support</span></span><time class="text-xs text-slate-500">09:48</time></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,10 @@ component WorkflowCanvasPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">
|
||||
{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Automation workflow with trigger, decision, and channel delivery steps" class="relative grid min-h-52 grid-cols-[1fr_auto_1fr] items-center gap-3 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--webhook] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Event received</strong><span class="text-xs text-slate-500">Order shipped</span></div><span class="icon-[lucide--arrow-right] size-5 text-slate-400" aria-hidden="true"></span><div class="grid gap-2 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3"><span class="icon-[lucide--workflow] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Smart route</strong><span class="text-xs text-slate-500">Consent + availability</span></div><span class="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300"><span class="icon-[lucide--circle-check] size-3.5" aria-hidden="true"></span>Delivered</span></div>{/if}
|
||||
{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}
|
||||
</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
component Badge {
|
||||
props {
|
||||
class = ""
|
||||
label = "Badge"
|
||||
label = ""
|
||||
variant = "neutral"
|
||||
}
|
||||
view {
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}</span>
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}<slot /></span>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
+12
-1
@@ -1365,7 +1365,7 @@
|
||||
transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
}
|
||||
.wire-catalog-card::before {
|
||||
display: grid;
|
||||
display: none;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
place-items: center;
|
||||
@@ -1377,6 +1377,17 @@
|
||||
border-radius: calc(var(--wire-radius) * 0.8);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
|
||||
}
|
||||
.wire-catalog-card__icon {
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
place-items: center;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--wire-color-primary);
|
||||
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 28%, transparent);
|
||||
border-radius: calc(var(--wire-radius) * 0.8);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 10%, transparent);
|
||||
}
|
||||
.wire-catalog-card--channel::before {
|
||||
content: "◉";
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/uploader",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/validation",
|
||||
"version": "0.2.64",
|
||||
"version": "0.2.65",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
|
||||
const version = "0.2.61";
|
||||
const version = "0.2.65";
|
||||
|
||||
const dependencyGroups = [
|
||||
"dependencies",
|
||||
|
||||
Reference in New Issue
Block a user