ClintchizandClaude Opus 5
f4960f2fc5
Replaces a scaffold that rendered bare anchors. Flat or nested to three levels, icons, badges, disabled items, aria-current on the active link, arrow-key roving focus, and a disclosure arrow that rotates on open. Three levels rather than arbitrary depth because this template language has no component recursion, so each level is written out. On a phone the bar becomes a toggle and submenus stack inline rather than floating: a hover-opened overlay cannot be reached on touch. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2563 lines
87 KiB
JavaScript
2563 lines
87 KiB
JavaScript
const featureItems = [
|
|
{
|
|
icon: "icon-[lucide--shield-check]",
|
|
eyebrow: "Citizen support",
|
|
title: "Citizen services",
|
|
description: "Report incidents, request certificates, and find safety information.",
|
|
href: "#citizen-services",
|
|
actionLabel: "Explore services",
|
|
badge: "Public",
|
|
color: "primary",
|
|
variant: "default",
|
|
hover: "lift",
|
|
},
|
|
{
|
|
icon: "icon-[lucide--map-pin]",
|
|
eyebrow: "Directory",
|
|
title: "Station directory",
|
|
description: "Locate offices, jurisdictions, contacts, and public service hours.",
|
|
href: "#station-directory",
|
|
actionLabel: "Find a station",
|
|
badge: "Directory",
|
|
color: "info",
|
|
variant: "soft",
|
|
hover: "border",
|
|
},
|
|
{
|
|
icon: "icon-[lucide--radio-tower]",
|
|
eyebrow: "Verified",
|
|
title: "Public updates",
|
|
description: "Publish official alerts, notices, advisories, and verified information.",
|
|
href: "#public-updates",
|
|
actionLabel: "View updates",
|
|
badge: "Live",
|
|
color: "success",
|
|
variant: "gradient",
|
|
hover: "glow",
|
|
},
|
|
];
|
|
|
|
const metricItems = [
|
|
{
|
|
label: "Public services",
|
|
value: "24",
|
|
description: "Citizen-facing services available online.",
|
|
icon: "icon-[lucide--hand-heart]",
|
|
trend: "+4",
|
|
trendLabel: "this release",
|
|
trendDirection: "up",
|
|
color: "primary",
|
|
},
|
|
{
|
|
label: "Police stations",
|
|
value: "126",
|
|
description: "Searchable station and jurisdiction entries.",
|
|
icon: "icon-[lucide--landmark]",
|
|
trend: "Updated",
|
|
trendLabel: "today",
|
|
color: "info",
|
|
},
|
|
{
|
|
label: "Availability",
|
|
value: "99.9",
|
|
suffix: "%",
|
|
description: "Target service availability.",
|
|
icon: "icon-[lucide--activity]",
|
|
trend: "Stable",
|
|
trendLabel: "30 days",
|
|
trendDirection: "positive",
|
|
color: "success",
|
|
},
|
|
];
|
|
|
|
const statsItems = [
|
|
{
|
|
label: "Composite components",
|
|
value: "18",
|
|
description: "Reusable public-page building blocks",
|
|
icon: "icon-[lucide--blocks]",
|
|
color: "primary",
|
|
},
|
|
{
|
|
label: "Rendering",
|
|
value: "SSR",
|
|
description: "Server-first WRNexusJS rendering",
|
|
icon: "icon-[lucide--server]",
|
|
color: "info",
|
|
},
|
|
{
|
|
label: "Responsive",
|
|
value: "Yes",
|
|
description: "Mobile, tablet, and desktop layouts",
|
|
icon: "icon-[lucide--monitor-smartphone]",
|
|
color: "success",
|
|
},
|
|
{
|
|
label: "Theme aware",
|
|
value: "Yes",
|
|
description: "Active theme and accent palettes",
|
|
icon: "icon-[lucide--palette]",
|
|
color: "warning",
|
|
},
|
|
];
|
|
|
|
const breadcrumbs = [
|
|
{ label: "Home", href: "/", icon: "icon-[lucide--house]" },
|
|
{ label: "Components", href: "/base" },
|
|
{ label: "Page header", current: true },
|
|
];
|
|
|
|
const heroActions = [
|
|
{
|
|
label: "Browse components",
|
|
href: "#components",
|
|
icon: "icon-[lucide--blocks]",
|
|
variant: "primary",
|
|
},
|
|
{
|
|
label: "View metrics",
|
|
href: "#metrics",
|
|
icon: "icon-[lucide--chart-no-axes-column-increasing]",
|
|
variant: "outline",
|
|
},
|
|
];
|
|
|
|
const menuItems = [
|
|
{
|
|
label: "Open dashboard",
|
|
description: "View the operational workspace",
|
|
value: "dashboard",
|
|
icon: "icon-[lucide--layout-dashboard]",
|
|
},
|
|
{
|
|
label: "Share record",
|
|
value: "share",
|
|
icon: "icon-[lucide--share-2]",
|
|
shortcut: "Ctrl S",
|
|
},
|
|
{ type: "divider" },
|
|
{
|
|
label: "Delete record",
|
|
value: "delete",
|
|
icon: "icon-[lucide--trash-2]",
|
|
danger: true,
|
|
},
|
|
];
|
|
|
|
const footerItems = [
|
|
{
|
|
type: "header",
|
|
label: "Product",
|
|
description: "Build consistent interfaces with WRNexusJS.",
|
|
items: [
|
|
{ label: "Components", href: "/base" },
|
|
{ label: "Themes", href: "/themes" },
|
|
{ label: "Examples", href: "/blocks" },
|
|
],
|
|
},
|
|
{
|
|
type: "header",
|
|
label: "Developers",
|
|
items: [
|
|
{ label: "Documentation", href: "/docs" },
|
|
{ label: "Installation", href: "/installation" },
|
|
{ label: "Framework guides", href: "/framework-guides" },
|
|
],
|
|
},
|
|
{
|
|
type: "header",
|
|
label: "Resources",
|
|
items: [
|
|
{ label: "Accessibility", href: "/accessibility" },
|
|
{ label: "Design tokens", href: "/colors" },
|
|
{ label: "Typography", href: "/fonts" },
|
|
],
|
|
},
|
|
{
|
|
type: "header",
|
|
label: "Company",
|
|
items: [
|
|
{ label: "WorkRoot", href: "https://workroot.in", external: true },
|
|
{ label: "WRNexusJS", href: "https://wrnexusjs.dev", external: true },
|
|
],
|
|
},
|
|
];
|
|
|
|
const visualPanel = `
|
|
<div class="showcase-visual-panel">
|
|
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
|
<strong>Composable visual panel</strong>
|
|
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
|
</div>`;
|
|
|
|
const shellPreview = `
|
|
<div class="showcase-shell-preview">
|
|
<header>Header slot</header>
|
|
<main>Public page content</main>
|
|
<footer>Footer slot</footer>
|
|
</div>`;
|
|
|
|
// Markup rendered beside the mount instead of inside its slot -- for host
|
|
// components that have no slot but need controls to demonstrate them.
|
|
const withBefore =
|
|
(before) =>
|
|
(title, description, props = {}, slots = {}) => ({
|
|
eyebrow: "Recommended",
|
|
title,
|
|
description,
|
|
props,
|
|
slots,
|
|
before,
|
|
});
|
|
|
|
const standard = (title, description, props = {}, slots = {}) => ({
|
|
eyebrow: "Recommended",
|
|
title,
|
|
description,
|
|
props,
|
|
slots,
|
|
});
|
|
|
|
const compact = (title, description, props = {}, slots = {}) => ({
|
|
eyebrow: "Compact",
|
|
title,
|
|
description,
|
|
props,
|
|
slots,
|
|
});
|
|
|
|
const advanced = (title, description, props = {}, slots = {}) => ({
|
|
eyebrow: "Advanced",
|
|
title,
|
|
description,
|
|
props,
|
|
slots,
|
|
});
|
|
|
|
const TOASTER_DEMO_BUTTONS =
|
|
'<div class="showcase-toast-demo"><button type="button" @click=\'toast.success("Your changes are live", { title: "Published" })\'>success</button><button type="button" @click=\'toast.error("We could not reach the server", { title: "Network error" })\'>danger</button><button type="button" @click=\'toast.warning("Your trial ends in 3 days", { title: "Heads up", icon: "icon-[lucide--hourglass]" })\'>warning + custom icon</button><button type="button" @click=\'toast.info("Export queued")\'>info</button><button type="button" @click=\'toast("Note deleted", { title: "Deleted", actionLabel: "Undo" })\'>one action</button><button type="button" @click=\'toast.warning("This file changed elsewhere", { title: "Conflict", duration: 0, actions: [{ label: "Keep mine" }, { label: "Discard", tone: "danger" }] })\'>two actions (sticky)</button><button type="button" @click=\'toast("No icon on this one", { icon: false })\'>icon suppressed</button><button type="button" @click=\'toast.success("Gone in 1.5s", { duration: 1500 })\'>short duration</button><button type="button" @click=\'toast.clear()\'>clear all</button></div>';
|
|
|
|
const DATATABLE_COLUMNS_PLAIN =
|
|
'[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]';
|
|
const DATATABLE_COLUMNS_NARROW =
|
|
'[{"key": "name", "label": "Account", "sortable": true, "width": "40%"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true, "width": "20%"}, {"key": "plan", "label": "Plan", "align": "center", "width": "20%"}, {"key": "status", "label": "Status", "align": "end", "width": "20%"}]';
|
|
const DATATABLE_COLUMNS_INBOX =
|
|
'[{"key": "owner", "label": "From", "sortable": true}, {"key": "name", "label": "Subject", "sortable": true}, {"key": "plan", "label": "Folder", "align": "center"}, {"key": "statusHtml", "label": "State", "align": "center", "html": true}]';
|
|
const DATATABLE_COLUMNS_COMPARE =
|
|
'[{"key": "name", "label": "Plan"}, {"key": "plan", "label": "Tier"}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "type": "number"}, {"key": "status", "label": "Status", "align": "center"}]';
|
|
const DATATABLE_ACTIONS =
|
|
'[{"id": "refresh", "label": "Refresh", "icon": "icon-[lucide--refresh-cw]", "when": "always"}, {"id": "read", "label": "Mark as read", "icon": "icon-[lucide--mail-open]", "when": "selection"}, {"id": "archive", "label": "Archive", "icon": "icon-[lucide--archive]", "when": "selection"}, {"id": "delete", "label": "Delete", "icon": "icon-[lucide--trash-2]", "when": "selection", "tone": "danger"}]';
|
|
const DATATABLE_COLUMNS =
|
|
'[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]';
|
|
const DATATABLE_ROWS =
|
|
'[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}]';
|
|
|
|
export const componentProfiles = {
|
|
Nav: {
|
|
demos: [
|
|
standard(
|
|
"Horizontal links",
|
|
"A flat link bar. The active item is marked with aria-current, and the arrow keys move between items.",
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "/", value: "home", icon: "icon-[lucide--house]" },
|
|
{ label: "Inbox", href: "/inbox", value: "inbox", badge: "9" },
|
|
{ label: "Reports", href: "/reports", value: "reports" },
|
|
{ label: "Archive", href: "/archive", value: "archive", disabled: true },
|
|
],
|
|
active: "inbox",
|
|
},
|
|
),
|
|
advanced(
|
|
"Nested submenus",
|
|
"An item carrying its own items array opens a submenu on hover or focus, to a maximum of three levels. On a phone the submenus stack inline instead of floating, because a hover-opened overlay is unreachable on touch.",
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "/", value: "home" },
|
|
{
|
|
label: "Products",
|
|
value: "products",
|
|
items: [
|
|
{ label: "Overview", href: "/p", value: "p-overview" },
|
|
{
|
|
label: "Platform",
|
|
value: "p-platform",
|
|
items: [
|
|
{ label: "Runtime", href: "/p/runtime", value: "runtime" },
|
|
{ label: "Compiler", href: "/p/compiler", value: "compiler" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
active: "p-overview",
|
|
},
|
|
),
|
|
standard("Vertical rail", "Vertical orientation switches the arrow keys to up and down.", {
|
|
items: [
|
|
{ label: "Dashboard", href: "/", value: "dash", icon: "icon-[lucide--gauge]" },
|
|
{ label: "Team", href: "/team", value: "team", icon: "icon-[lucide--users]" },
|
|
{
|
|
label: "Settings",
|
|
href: "/settings",
|
|
value: "settings",
|
|
icon: "icon-[lucide--settings]",
|
|
},
|
|
],
|
|
active: "team",
|
|
orientation: "vertical",
|
|
collapsible: false,
|
|
}),
|
|
],
|
|
},
|
|
Stepper: {
|
|
demos: [
|
|
standard(
|
|
"Horizontal progress",
|
|
"Steps before the active one read as complete, the active one is highlighted, and the rest are muted.",
|
|
{
|
|
steps: [
|
|
{ label: "Account", description: "Your details" },
|
|
{ label: "Billing", description: "Payment method" },
|
|
{ label: "Confirm", description: "Review and submit" },
|
|
],
|
|
active: 1,
|
|
},
|
|
),
|
|
standard(
|
|
"Vertical with icons",
|
|
"Vertical orientation suits a sidebar or a narrow column. Any step may carry an iconify class instead of its number.",
|
|
{
|
|
steps: [
|
|
{ label: "Cloned", icon: "icon-[lucide--git-branch]" },
|
|
{ label: "Built", icon: "icon-[lucide--hammer]" },
|
|
{ label: "Deployed", icon: "icon-[lucide--rocket]" },
|
|
],
|
|
active: 2,
|
|
orientation: "vertical",
|
|
},
|
|
),
|
|
advanced(
|
|
"Clickable steps",
|
|
"With clickable the steps emit a change output and take arrow-key roving focus. Without it the stepper is read-only and stays out of the tab order.",
|
|
{
|
|
steps: [{ label: "One" }, { label: "Two" }, { label: "Three" }],
|
|
active: 0,
|
|
clickable: true,
|
|
},
|
|
),
|
|
],
|
|
},
|
|
Pagination: {
|
|
demos: [
|
|
standard(
|
|
"Compact arrows",
|
|
"The default: previous and next with a page counter, and a summary of the range in view.",
|
|
{ page: 2, pageSize: 10, total: 137, variant: "compact" },
|
|
),
|
|
standard(
|
|
"Numbered pages",
|
|
"Page numbers windowed around the current page with ellipsis gaps, so a large set never renders hundreds of buttons.",
|
|
{ page: 5, pageSize: 10, total: 200, variant: "numbered", siblingCount: 1 },
|
|
),
|
|
advanced(
|
|
"Wider window",
|
|
"siblingCount widens how many pages sit either side of the current one.",
|
|
{ page: 8, pageSize: 25, total: 900, variant: "numbered", siblingCount: 2 },
|
|
),
|
|
],
|
|
},
|
|
DataTable: {
|
|
demos: [
|
|
standard(
|
|
"Sortable, searchable and paged",
|
|
"Click a header to sort, type to filter, and page through the results. Every derivation is a shared function, so the first page is server rendered and stays live after hydration.",
|
|
{
|
|
columns: DATATABLE_COLUMNS_PLAIN,
|
|
rows: DATATABLE_ROWS,
|
|
caption: "Accounts",
|
|
description: "15 records across four plans.",
|
|
pageSize: 5,
|
|
pageSizes: [5, 10, 25],
|
|
selectable: true,
|
|
actions: [],
|
|
},
|
|
),
|
|
advanced(
|
|
"Bulk actions on selection",
|
|
"An inbox pattern: Refresh is always available, while Mark as read, Archive and Delete appear only once something is ticked. Each handler receives the selected records, and an action output fires for every click.",
|
|
{
|
|
columns: DATATABLE_COLUMNS_INBOX,
|
|
rows: DATATABLE_ROWS,
|
|
actions: DATATABLE_ACTIONS,
|
|
selectable: true,
|
|
caption: "Inbox",
|
|
description: "Tick a row to reveal the selection-only actions.",
|
|
pageSize: 6,
|
|
pageSizes: [6, 12, 25],
|
|
searchPlaceholder: "Search mail",
|
|
},
|
|
),
|
|
standard(
|
|
"Numbered pagination",
|
|
"Page numbers instead of arrows, windowed around the current page so a large table never renders hundreds of buttons.",
|
|
{
|
|
columns: DATATABLE_COLUMNS_PLAIN,
|
|
rows: DATATABLE_ROWS,
|
|
actions: [],
|
|
paginationStyle: "numbered",
|
|
pageSize: 4,
|
|
pageSizes: [4, 8, 15],
|
|
caption: "Accounts",
|
|
description: "15 records, four per page.",
|
|
},
|
|
),
|
|
advanced(
|
|
"Full gridlines and custom cell markup",
|
|
'gridlines="grid" adds column rules as well as row rules. The Status column is rendered from markup rather than text, so a cell can hold a badge, a link or any other component output.',
|
|
{
|
|
columns: DATATABLE_COLUMNS,
|
|
rows: DATATABLE_ROWS,
|
|
actions: [],
|
|
gridlines: "grid",
|
|
striped: false,
|
|
pageSize: 5,
|
|
pageSizes: [5, 10, 25],
|
|
caption: "Accounts",
|
|
description: "Status is supplied as markup through a html column.",
|
|
},
|
|
),
|
|
compact(
|
|
"Fixed widths and alignment",
|
|
"Columns can set their own width and alignment: text left, counts right, short labels centred. Widths are plain CSS, so percentages, rem and ch all work.",
|
|
{
|
|
columns: DATATABLE_COLUMNS_NARROW,
|
|
rows: DATATABLE_ROWS,
|
|
actions: [],
|
|
searchable: false,
|
|
pageSize: 5,
|
|
pageSizes: [5, 10, 25],
|
|
density: "comfortable",
|
|
caption: "Column sizing",
|
|
},
|
|
),
|
|
advanced(
|
|
"Comparison layout",
|
|
'layout="comparison" transposes the table: fields run down the left and each record gets its own column. The label column stays put while the rest scrolls sideways.',
|
|
{
|
|
columns: DATATABLE_COLUMNS_COMPARE,
|
|
rows: DATATABLE_ROWS,
|
|
actions: [],
|
|
layout: "comparison",
|
|
searchable: false,
|
|
pageSize: 3,
|
|
pageSizes: [3, 5, 8],
|
|
caption: "Feature",
|
|
},
|
|
),
|
|
standard(
|
|
"Sticky first column",
|
|
"With many columns the table scrolls sideways; stickyFirstColumn keeps the record name in view so a row never loses its label.",
|
|
{
|
|
columns: DATATABLE_COLUMNS_PLAIN,
|
|
rows: DATATABLE_ROWS,
|
|
actions: [],
|
|
stickyFirstColumn: true,
|
|
pageSize: 5,
|
|
pageSizes: [5, 10, 25],
|
|
caption: "Accounts",
|
|
description: "Scroll the table horizontally on a narrow screen.",
|
|
},
|
|
),
|
|
compact("Compact density, no pagination", "Every row at once, tighter rows, no footer.", {
|
|
columns: DATATABLE_COLUMNS_PLAIN,
|
|
rows: DATATABLE_ROWS,
|
|
pageSizes: [5, 10, 25],
|
|
actions: [],
|
|
paginated: false,
|
|
density: "compact",
|
|
searchable: false,
|
|
striped: false,
|
|
caption: "All accounts",
|
|
}),
|
|
advanced("Empty state", "What a table shows before any records arrive.", {
|
|
columns: DATATABLE_COLUMNS_PLAIN,
|
|
rows: "[]",
|
|
pageSizes: [5, 10, 25],
|
|
actions: [],
|
|
caption: "Accounts",
|
|
emptyLabel: "No accounts match this filter yet",
|
|
}),
|
|
],
|
|
playground: {
|
|
columns: DATATABLE_COLUMNS,
|
|
rows: DATATABLE_ROWS,
|
|
caption: "Accounts",
|
|
pageSize: 5,
|
|
pageSizes: [5, 10, 25],
|
|
actions: DATATABLE_ACTIONS,
|
|
selectable: true,
|
|
},
|
|
options: {
|
|
density: ["compact", "default", "comfortable"],
|
|
paginationStyle: ["compact", "numbered"],
|
|
gridlines: ["rows", "grid"],
|
|
color: ["primary", "secondary", "success", "danger", "info"],
|
|
},
|
|
},
|
|
|
|
// A Toaster is a HOST, not a widget. The generic profile rendered five empty
|
|
// boxes -- and because every mounted host answers the same window event, one
|
|
// toast() call produced five toasts. One host plus buttons that actually
|
|
// raise notifications is the only demo that shows anything.
|
|
Toaster: {
|
|
demos: [
|
|
withBefore(TOASTER_DEMO_BUTTONS)(
|
|
"Raise notifications from anywhere",
|
|
"Mount one host, then call toast() from any client function. Each tone brings its own icon and colour, and hovering the stack holds a toast open while you read it. Actions here show label-only for brevity; attach onClick/onAction handlers from a functions{} block.",
|
|
{ position: "bottom-right", duration: 4500, max: 4 },
|
|
),
|
|
],
|
|
playground: { position: "bottom-right", duration: 4500, max: 4 },
|
|
options: {
|
|
position: [
|
|
"top-left",
|
|
"top-center",
|
|
"top-right",
|
|
"bottom-left",
|
|
"bottom-center",
|
|
"bottom-right",
|
|
],
|
|
size: ["sm", "default", "lg"],
|
|
},
|
|
},
|
|
|
|
PublicPageShell: {
|
|
demos: [
|
|
standard(
|
|
"Complete public page shell",
|
|
"Use the shell around a complete marketing or public-service page.",
|
|
{ maxWidth: "xl", background: "default" },
|
|
{ default: shellPreview },
|
|
),
|
|
compact(
|
|
"Constrained documentation shell",
|
|
"Keep long-form documentation readable with a compact content width.",
|
|
{ maxWidth: "compact", headerOffset: "sm", background: "soft" },
|
|
{ default: shellPreview },
|
|
),
|
|
advanced(
|
|
"Full-bleed landing page",
|
|
"Allow full-width sections while keeping overflow and minimum-height behavior consistent.",
|
|
{ maxWidth: "full", fullWidth: true, minHeight: "screen", overflow: "clip" },
|
|
{ default: shellPreview },
|
|
),
|
|
],
|
|
options: {
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
headerOffset: ["none", "sm", "md", "lg"],
|
|
background: ["default", "soft", "raised", "transparent"],
|
|
overflow: ["visible", "hidden", "clip", "auto"],
|
|
minHeight: ["none", "screen", "full"],
|
|
},
|
|
},
|
|
|
|
AnnouncementBar: {
|
|
demos: [
|
|
standard(
|
|
"Soft product notice",
|
|
"Use a calm, dismissible notice inside a constrained content area.",
|
|
{
|
|
badge: "Public notice",
|
|
badgeIcon: "icon-[lucide--sparkles]",
|
|
message: "All composite components are now available",
|
|
description: "Review each component and its recommended use cases.",
|
|
icon: "icon-[lucide--megaphone]",
|
|
actionLabel: "View components",
|
|
actionHref: "#components",
|
|
actionIcon: "icon-[lucide--arrow-down]",
|
|
dismissible: true,
|
|
width: "default",
|
|
variant: "soft",
|
|
},
|
|
),
|
|
compact(
|
|
"Wide solid announcement",
|
|
"Use stronger contrast for important platform or service announcements.",
|
|
{
|
|
badge: "Release",
|
|
message: "WRNexusJS UI updates are ready",
|
|
description: "Explore the redesigned responsive components.",
|
|
icon: "icon-[lucide--rocket]",
|
|
actionLabel: "Read changes",
|
|
actionHref: "#release",
|
|
dismissible: true,
|
|
width: "wide",
|
|
compact: true,
|
|
variant: "solid",
|
|
},
|
|
),
|
|
advanced(
|
|
"Full-width critical alert",
|
|
"Use edge-to-edge width for time-sensitive information that applies to the complete page.",
|
|
{
|
|
badge: "Service alert",
|
|
message: "Scheduled maintenance tonight",
|
|
description: "Some services may be temporarily unavailable from 23:00 to 23:30.",
|
|
icon: "icon-[lucide--triangle-alert]",
|
|
actionLabel: "View status",
|
|
actionHref: "#status",
|
|
dismissible: true,
|
|
width: "full",
|
|
color: "warning",
|
|
variant: "solid",
|
|
},
|
|
),
|
|
],
|
|
playground: { width: "wide", dismissible: true, variant: "solid" },
|
|
options: {
|
|
width: ["default", "wide", "full"],
|
|
variant: ["default", "soft", "outline", "solid", "minimal"],
|
|
size: ["compact", "default", "spacious"],
|
|
color: ["primary", "secondary", "info", "success", "warning", "danger"],
|
|
role: ["status", "alert"],
|
|
live: ["off", "polite", "assertive"],
|
|
},
|
|
},
|
|
|
|
Breadcrumb: {
|
|
demos: [
|
|
standard("Minimal page trail", "Use a restrained breadcrumb above standard page content.", {
|
|
items: breadcrumbs,
|
|
size: "small",
|
|
variant: "minimal",
|
|
}),
|
|
compact(
|
|
"Soft navigation trail",
|
|
"Add a soft surface when the breadcrumb needs more separation from surrounding content.",
|
|
{ items: breadcrumbs, size: "medium", variant: "soft", showHome: true },
|
|
),
|
|
advanced(
|
|
"Large directory breadcrumb",
|
|
"Use a larger breadcrumb in directories, dashboards, and touch-first interfaces.",
|
|
{
|
|
items: breadcrumbs,
|
|
size: "large",
|
|
variant: "outline",
|
|
showHome: true,
|
|
separator: "slash",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
size: ["small", "medium", "large"],
|
|
separator: ["chevron", "slash", "dot", "arrow"],
|
|
variant: ["minimal", "soft", "outline", "contrast"],
|
|
},
|
|
},
|
|
|
|
PageHeader: {
|
|
demos: [
|
|
standard(
|
|
"Page header with actions",
|
|
"Introduce a service or documentation page with breadcrumbs and clear actions.",
|
|
{
|
|
eyebrow: "Component showcase",
|
|
title: "Page headers with clear hierarchy",
|
|
description:
|
|
"Use PageHeader for services, directories, legal pages, guides, dashboards, and public information.",
|
|
icon: "icon-[lucide--panel-top]",
|
|
showBreadcrumbs: true,
|
|
breadcrumbs,
|
|
primaryLabel: "Primary action",
|
|
primaryHref: "#primary",
|
|
primaryIcon: "icon-[lucide--arrow-down]",
|
|
secondaryLabel: "Secondary action",
|
|
secondaryHref: "#secondary",
|
|
secondaryIcon: "icon-[lucide--house]",
|
|
maxWidth: "full",
|
|
},
|
|
),
|
|
compact(
|
|
"Compact service header",
|
|
"Use reduced spacing when a page already sits inside an application shell.",
|
|
{
|
|
eyebrow: "Citizen service",
|
|
title: "Track a complaint",
|
|
description: "Check the latest status using your complaint reference.",
|
|
icon: "icon-[lucide--scan-search]",
|
|
compact: true,
|
|
primaryLabel: "Track status",
|
|
primaryHref: "#track",
|
|
variant: "soft",
|
|
},
|
|
),
|
|
advanced(
|
|
"Centered campaign header",
|
|
"Use a centered header for campaigns, guides, and high-level public information.",
|
|
{
|
|
eyebrow: "Safety guide",
|
|
title: "Prepare your family for emergencies",
|
|
description:
|
|
"Practical guidance for creating a plan, preparing supplies, and staying informed.",
|
|
centered: true,
|
|
align: "center",
|
|
variant: "minimal",
|
|
maxWidth: "wide",
|
|
},
|
|
),
|
|
],
|
|
playground: { showBreadcrumbs: true, breadcrumbs, maxWidth: "full" },
|
|
options: {
|
|
align: ["left", "center", "right"],
|
|
size: ["small", "default", "large"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
variant: ["default", "minimal", "soft", "raised", "tinted", "solid"],
|
|
color: ["primary", "secondary", "info", "success", "warning", "danger"],
|
|
},
|
|
},
|
|
|
|
Hero: {
|
|
demos: [
|
|
standard(
|
|
"Split hero with visual",
|
|
"Lead a landing page with clear content and a flexible visual slot.",
|
|
{
|
|
eyebrow: "Reusable public UI",
|
|
eyebrowIcon: "icon-[lucide--sparkles]",
|
|
title: "Build polished pages",
|
|
highlight: "with consistent hero layouts",
|
|
description:
|
|
"Create strong first impressions for public portals, product pages, and service overviews.",
|
|
layout: "split",
|
|
visualPosition: "right",
|
|
visualStyle: "card",
|
|
primaryLabel: "Explore components",
|
|
primaryHref: "#components",
|
|
primaryIcon: "icon-[lucide--arrow-right]",
|
|
secondaryLabel: "Read documentation",
|
|
secondaryHref: "#docs",
|
|
secondaryIcon: "icon-[lucide--book-open]",
|
|
maxWidth: "wide",
|
|
variant: "gradient",
|
|
},
|
|
{ visual: visualPanel },
|
|
),
|
|
compact(
|
|
"Centered campaign hero",
|
|
"Use a stacked, centered layout for announcements, campaigns, and simple conversion pages.",
|
|
{
|
|
eyebrow: "Public campaign",
|
|
title: "Safer communities start with trusted information",
|
|
description: "Find verified guidance, public notices, and citizen services in one place.",
|
|
align: "center",
|
|
layout: "stacked",
|
|
size: "default",
|
|
variant: "soft",
|
|
primaryLabel: "Browse services",
|
|
primaryHref: "#services",
|
|
},
|
|
),
|
|
advanced(
|
|
"Hero with badges and trust",
|
|
"Add product proof, audience badges, and supporting trust information.",
|
|
{
|
|
eyebrow: "Developer platform",
|
|
title: "Ship reliable interfaces faster",
|
|
highlight: "without duplicating design work",
|
|
description:
|
|
"Reusable components, server rendering, themes, accessibility, and responsive behavior.",
|
|
badges: ["SSR first", "Theme aware", "Accessible"],
|
|
trustItems: ["108 UI components", "Light and dark themes", "Mobile ready"],
|
|
layout: "split",
|
|
visualPosition: "left",
|
|
visualStyle: "soft",
|
|
variant: "raised",
|
|
},
|
|
{ visual: visualPanel },
|
|
),
|
|
],
|
|
playground: { layout: "split", visualPosition: "right", maxWidth: "wide" },
|
|
options: {
|
|
align: ["left", "center", "right"],
|
|
size: ["compact", "default", "lg", "xl"],
|
|
layout: ["split", "stacked", "content"],
|
|
visualPosition: ["left", "right"],
|
|
visualStyle: ["plain", "card", "soft"],
|
|
variant: ["default", "soft", "raised", "outline", "gradient", "solid", "minimal"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
},
|
|
},
|
|
|
|
HeroActions: {
|
|
demos: [
|
|
standard(
|
|
"Primary and secondary actions",
|
|
"Group the most important hero actions with consistent spacing and hierarchy.",
|
|
{ actions: heroActions, align: "left", orientation: "horizontal" },
|
|
),
|
|
compact(
|
|
"Centered campaign actions",
|
|
"Center actions beneath a stacked hero or CTA message.",
|
|
{ actions: heroActions, align: "center", orientation: "horizontal", size: "sm" },
|
|
),
|
|
advanced(
|
|
"Vertical mobile-first actions",
|
|
"Use a vertical group for narrow panels, onboarding, or three-action flows.",
|
|
{
|
|
actions: [
|
|
...heroActions,
|
|
{
|
|
label: "Contact support",
|
|
href: "#support",
|
|
icon: "icon-[lucide--life-buoy]",
|
|
variant: "ghost",
|
|
},
|
|
],
|
|
orientation: "vertical",
|
|
fullWidthMobile: true,
|
|
size: "lg",
|
|
},
|
|
),
|
|
],
|
|
playground: { actions: heroActions },
|
|
options: {
|
|
align: ["left", "center", "right"],
|
|
orientation: ["horizontal", "vertical"],
|
|
size: ["sm", "default", "lg"],
|
|
},
|
|
},
|
|
|
|
SplitHero: {
|
|
demos: [
|
|
standard(
|
|
"Balanced content and visual",
|
|
"Explain a product, department, or service with a balanced two-column introduction.",
|
|
{
|
|
eyebrow: "Balanced layout",
|
|
title: "Combine detailed content",
|
|
highlight: "with a strong visual panel",
|
|
description:
|
|
"Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling.",
|
|
primaryLabel: "View public services",
|
|
primaryHref: "#services",
|
|
primaryIcon: "icon-[lucide--arrow-right]",
|
|
secondaryLabel: "Contact department",
|
|
secondaryHref: "#contact",
|
|
secondaryIcon: "icon-[lucide--phone]",
|
|
visualPosition: "right",
|
|
ratio: "balanced",
|
|
maxWidth: "wide",
|
|
},
|
|
{ visual: visualPanel },
|
|
),
|
|
compact(
|
|
"Visual-first introduction",
|
|
"Reverse the layout when the screenshot, map, or media needs first visual priority.",
|
|
{
|
|
eyebrow: "Visual first",
|
|
title: "Show the interface before the explanation",
|
|
description: "Place the visual on the left and use a compact content column.",
|
|
visualPosition: "left",
|
|
reverse: true,
|
|
ratio: "visual",
|
|
variant: "soft",
|
|
},
|
|
{ visual: visualPanel },
|
|
),
|
|
advanced(
|
|
"Structured service overview",
|
|
"Use structured visual items for capabilities, facts, or proof points.",
|
|
{
|
|
eyebrow: "Department overview",
|
|
title: "One service, clearly explained",
|
|
description: "Pair narrative content with structured supporting information.",
|
|
visualTitle: "Service highlights",
|
|
visualDescription: "A consistent, responsive supporting panel.",
|
|
visualItems: [
|
|
{ label: "Online access", value: "24/7", icon: "icon-[lucide--globe-2]" },
|
|
{ label: "Response tracking", value: "Live", icon: "icon-[lucide--activity]" },
|
|
{ label: "Languages", value: "3", icon: "icon-[lucide--languages]" },
|
|
],
|
|
ratio: "content",
|
|
variant: "gradient",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
visualPosition: ["left", "right"],
|
|
ratio: ["balanced", "content", "visual"],
|
|
align: ["left", "center", "right"],
|
|
variant: ["default", "soft", "raised", "gradient", "solid", "minimal"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
},
|
|
},
|
|
|
|
Section: {
|
|
demos: [
|
|
standard(
|
|
"Standard content section",
|
|
"Create predictable vertical rhythm around a page section.",
|
|
{ id: "standard-section", spacing: "lg", maxWidth: "xl" },
|
|
{ default: '<div class="showcase-content-block">Standard section content</div>' },
|
|
),
|
|
compact(
|
|
"Compact dashboard section",
|
|
"Reduce spacing for dense application screens and grouped dashboard content.",
|
|
{ id: "compact-section", spacing: "sm", maxWidth: "wide", variant: "soft" },
|
|
{ default: '<div class="showcase-content-block">Compact dashboard content</div>' },
|
|
),
|
|
advanced(
|
|
"Full-width surface section",
|
|
"Use a full-width background while retaining a structured content area.",
|
|
{
|
|
id: "full-section",
|
|
fullWidth: true,
|
|
maxWidth: "full",
|
|
borderTop: true,
|
|
borderBottom: true,
|
|
variant: "raised",
|
|
},
|
|
{ default: '<div class="showcase-content-block">Full-width public page section</div>' },
|
|
),
|
|
],
|
|
options: {
|
|
spacing: ["none", "sm", "md", "lg", "xl"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
variant: ["default", "soft", "raised", "transparent"],
|
|
},
|
|
},
|
|
|
|
SectionHeader: {
|
|
demos: [
|
|
standard(
|
|
"Left-aligned section header",
|
|
"Introduce features, services, content groups, or dashboard areas.",
|
|
{
|
|
eyebrow: "Public services",
|
|
title: "Everything citizens need",
|
|
description:
|
|
"Discover online services, directories, guidance, and verified public information.",
|
|
align: "left",
|
|
maxWidth: "3xl",
|
|
},
|
|
),
|
|
compact(
|
|
"Centered section header",
|
|
"Use centered hierarchy above feature grids, testimonials, and campaign content.",
|
|
{
|
|
eyebrow: "Capabilities",
|
|
title: "A consistent component system",
|
|
description: "Compose complete pages without rebuilding spacing and typography.",
|
|
align: "center",
|
|
size: "compact",
|
|
},
|
|
),
|
|
advanced(
|
|
"Large editorial header",
|
|
"Use a larger heading for major landing-page sections and product storytelling.",
|
|
{
|
|
eyebrow: "Platform",
|
|
title: "Designed for complex public and enterprise interfaces",
|
|
description: "Theme-aware, responsive, accessible, and server-rendered.",
|
|
align: "left",
|
|
size: "large",
|
|
maxWidth: "full",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
align: ["left", "center", "right"],
|
|
size: ["compact", "default", "large"],
|
|
maxWidth: ["compact", "lg", "xl", "3xl", "full"],
|
|
},
|
|
},
|
|
|
|
MarketingSectionHeader: {
|
|
demos: [
|
|
standard(
|
|
"Split header with action",
|
|
"Pair marketing copy with a clear secondary navigation action.",
|
|
{
|
|
eyebrow: "Platform capabilities",
|
|
title: "Build complete public experiences",
|
|
description: "Use reusable sections, cards, metrics, heroes, and CTAs.",
|
|
align: "split",
|
|
actionLabel: "Explore components",
|
|
actionHref: "#components",
|
|
actionIcon: "icon-[lucide--arrow-right]",
|
|
},
|
|
),
|
|
compact(
|
|
"Centered marketing header",
|
|
"Use a centered configuration above campaigns, proof, and feature collections.",
|
|
{
|
|
eyebrow: "Why WRNexusJS",
|
|
title: "One coherent design system",
|
|
description: "Consistent presentation across public pages and product applications.",
|
|
align: "center",
|
|
size: "compact",
|
|
},
|
|
),
|
|
advanced(
|
|
"External resource header",
|
|
"Link to supporting documentation or an external resource.",
|
|
{
|
|
eyebrow: "Developer resources",
|
|
title: "Learn the framework through working examples",
|
|
description:
|
|
"Every component page includes live demos, playground controls, events, and API details.",
|
|
actionLabel: "Open documentation",
|
|
actionHref: "https://wrnexusjs.dev",
|
|
actionExternal: true,
|
|
align: "split",
|
|
size: "large",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
align: ["left", "center", "right", "split"],
|
|
size: ["compact", "default", "large"],
|
|
},
|
|
},
|
|
|
|
TextLink: {
|
|
demos: [
|
|
standard(
|
|
"Inline directional link",
|
|
"Use a lightweight link at the end of a card, section, or short content block.",
|
|
{ label: "Learn more", href: "#learn", showArrow: true, variant: "default" },
|
|
),
|
|
compact(
|
|
"Underlined content link",
|
|
"Use an underline when the link appears inside long-form text.",
|
|
{
|
|
label: "Read the complete guide",
|
|
href: "#guide",
|
|
underline: true,
|
|
showArrow: false,
|
|
size: "sm",
|
|
},
|
|
),
|
|
advanced(
|
|
"External developer link",
|
|
"Clearly communicate that a resource opens outside the current application.",
|
|
{
|
|
label: "Open WRNexusJS documentation",
|
|
href: "https://wrnexusjs.dev",
|
|
external: true,
|
|
target: "_blank",
|
|
icon: "icon-[lucide--book-open]",
|
|
iconPosition: "start",
|
|
showArrow: false,
|
|
variant: "soft",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
iconPosition: ["start", "end"],
|
|
size: ["sm", "default", "lg"],
|
|
variant: ["default", "soft", "ghost", "minimal"],
|
|
},
|
|
},
|
|
|
|
FeatureGrid: {
|
|
demos: [
|
|
standard(
|
|
"Three-column service grid",
|
|
"Arrange services or capabilities as equal-height responsive cards.",
|
|
{
|
|
items: featureItems,
|
|
columns: 3,
|
|
tabletColumns: 2,
|
|
mobileColumns: 1,
|
|
gap: "lg",
|
|
equalHeight: true,
|
|
maxWidth: "full",
|
|
},
|
|
),
|
|
compact(
|
|
"Compact four-column grid",
|
|
"Use smaller gaps and four columns for short benefit or capability cards.",
|
|
{
|
|
items: featureItems.concat([
|
|
{
|
|
icon: "icon-[lucide--file-check-2]",
|
|
title: "Certificates",
|
|
description: "Request and track certificates online.",
|
|
href: "#certificates",
|
|
color: "warning",
|
|
},
|
|
]),
|
|
columns: 4,
|
|
tabletColumns: 2,
|
|
mobileColumns: 1,
|
|
gap: "sm",
|
|
variant: "soft",
|
|
},
|
|
),
|
|
advanced(
|
|
"Auto-fit feature collection",
|
|
"Let cards wrap automatically according to a minimum useful width.",
|
|
{
|
|
items: featureItems,
|
|
minItemWidth: "18rem",
|
|
columns: 3,
|
|
gap: "xl",
|
|
variant: "panel",
|
|
maxWidth: "wide",
|
|
},
|
|
),
|
|
],
|
|
playground: {
|
|
items: featureItems,
|
|
columns: 3,
|
|
tabletColumns: 2,
|
|
mobileColumns: 1,
|
|
maxWidth: "full",
|
|
},
|
|
options: {
|
|
columns: ["1", "2", "3", "4", "5", "6"],
|
|
tabletColumns: ["1", "2", "3", "4"],
|
|
mobileColumns: ["1", "2"],
|
|
gap: ["none", "sm", "md", "lg", "xl"],
|
|
align: ["start", "center", "end", "stretch"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
variant: ["default", "panel", "soft"],
|
|
},
|
|
},
|
|
|
|
FeatureCard: {
|
|
demos: [
|
|
standard(
|
|
"Linked service card",
|
|
"Present one service with an icon, hierarchy, badge, and clear action.",
|
|
{ ...featureItems[0], iconStyle: "soft", stretchedLink: true },
|
|
),
|
|
compact(
|
|
"Image-led feature card",
|
|
"Use a visual preview for products, campaigns, dashboards, or service explanations.",
|
|
{
|
|
title: "Unified citizen portal",
|
|
description: "Access trusted services from one responsive interface.",
|
|
image: "/showcase-images/dashboard-preview.svg",
|
|
imageAlt: "Abstract dashboard preview",
|
|
imagePosition: "top",
|
|
imageAspect: "wide",
|
|
href: "#portal",
|
|
actionLabel: "Open portal",
|
|
badge: "Featured",
|
|
color: "info",
|
|
variant: "raised",
|
|
},
|
|
),
|
|
advanced(
|
|
"Solid callout card",
|
|
"Use stronger contrast for a featured capability or high-priority service.",
|
|
{
|
|
icon: "icon-[lucide--siren]",
|
|
eyebrow: "Emergency",
|
|
title: "Get urgent help",
|
|
description: "Find verified emergency contacts and immediate safety guidance.",
|
|
href: "#emergency",
|
|
actionLabel: "View emergency help",
|
|
badge: "Important",
|
|
color: "danger",
|
|
variant: "solid",
|
|
hover: "glow",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
iconStyle: ["plain", "soft", "solid", "outline"],
|
|
iconSize: ["sm", "default", "lg"],
|
|
imagePosition: ["top", "left", "right"],
|
|
imageAspect: ["square", "wide", "video", "portrait"],
|
|
variant: ["default", "raised", "soft", "outline", "ghost", "minimal", "solid", "gradient"],
|
|
hover: ["none", "lift", "shadow", "border", "glow"],
|
|
align: ["left", "center", "right"],
|
|
},
|
|
},
|
|
|
|
FeatureIconCard: {
|
|
demos: [
|
|
standard(
|
|
"Icon-led capability card",
|
|
"Use a compact card for one feature, benefit, or linked capability.",
|
|
{
|
|
icon: "icon-[lucide--shield-check]",
|
|
title: "Secure by design",
|
|
description: "Build with consistent validation, accessibility, and theme support.",
|
|
href: "#security",
|
|
actionLabel: "Review security",
|
|
badge: "Core",
|
|
},
|
|
),
|
|
compact(
|
|
"Centered benefit card",
|
|
"Center the content for short benefit grids and campaign proof points.",
|
|
{
|
|
icon: "icon-[lucide--gauge]",
|
|
title: "Fast rendering",
|
|
description: "Server-first output with focused client behavior.",
|
|
align: "center",
|
|
size: "compact",
|
|
iconVariant: "solid",
|
|
color: "info",
|
|
},
|
|
),
|
|
advanced(
|
|
"Highlighted linked card",
|
|
"Use a stronger raised treatment for a featured capability.",
|
|
{
|
|
icon: "icon-[lucide--workflow]",
|
|
title: "Composable workflows",
|
|
description: "Connect forms, services, data, and actions without duplicating UI.",
|
|
href: "#workflows",
|
|
actionLabel: "Explore workflows",
|
|
variant: "raised",
|
|
hover: "lift",
|
|
color: "success",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
iconSize: ["sm", "md", "lg"],
|
|
iconVariant: ["plain", "soft", "solid", "outline"],
|
|
size: ["compact", "default", "large"],
|
|
variant: ["default", "soft", "raised", "outline", "minimal"],
|
|
align: ["left", "center", "right"],
|
|
hover: ["none", "lift", "border", "glow"],
|
|
},
|
|
},
|
|
|
|
MetricGrid: {
|
|
demos: [
|
|
standard(
|
|
"Three-column KPI grid",
|
|
"Display operational values in a full-width, responsive grid.",
|
|
{
|
|
items: metricItems,
|
|
columns: 3,
|
|
tabletColumns: 2,
|
|
mobileColumns: 1,
|
|
gap: "lg",
|
|
maxWidth: "full",
|
|
equalHeight: true,
|
|
},
|
|
),
|
|
compact(
|
|
"Unified metrics bar",
|
|
"Use dividers to present compact metrics as one cohesive surface.",
|
|
{
|
|
items: metricItems,
|
|
columns: 3,
|
|
tabletColumns: 2,
|
|
mobileColumns: 1,
|
|
gap: "none",
|
|
dividers: true,
|
|
size: "sm",
|
|
maxWidth: "wide",
|
|
},
|
|
),
|
|
advanced(
|
|
"Auto-fit monitoring grid",
|
|
"Allow cards to wrap automatically when the number of metrics changes.",
|
|
{
|
|
items: metricItems.concat([
|
|
{
|
|
label: "Response time",
|
|
value: "1.8",
|
|
suffix: "s",
|
|
description: "Median API response",
|
|
icon: "icon-[lucide--timer]",
|
|
color: "warning",
|
|
progress: 72,
|
|
progressLabel: "Target",
|
|
},
|
|
]),
|
|
minItemWidth: "17rem",
|
|
columns: 4,
|
|
variant: "soft",
|
|
maxWidth: "full",
|
|
},
|
|
),
|
|
],
|
|
playground: {
|
|
items: metricItems,
|
|
columns: 3,
|
|
tabletColumns: 2,
|
|
mobileColumns: 1,
|
|
maxWidth: "full",
|
|
},
|
|
options: {
|
|
columns: ["1", "2", "3", "4", "5", "6"],
|
|
tabletColumns: ["1", "2", "3", "4"],
|
|
mobileColumns: ["1", "2"],
|
|
gap: ["none", "sm", "md", "lg", "xl"],
|
|
variant: ["default", "panel", "soft"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
},
|
|
},
|
|
|
|
MetricCard: {
|
|
demos: [
|
|
standard(
|
|
"Operational KPI",
|
|
"Display one metric with a clear label, value, supporting description, and trend.",
|
|
{ ...metricItems[2], actionLabel: "Open status", href: "#status" },
|
|
),
|
|
compact("Progress metric", "Add progress when a value is measured against a clear target.", {
|
|
label: "Profile completion",
|
|
value: "72",
|
|
suffix: "%",
|
|
description: "Complete the remaining account and security steps.",
|
|
icon: "icon-[lucide--circle-user-round]",
|
|
progress: 72,
|
|
progressLabel: "Account setup",
|
|
color: "info",
|
|
variant: "soft",
|
|
}),
|
|
advanced(
|
|
"Selectable dashboard metric",
|
|
"Emit select and action events from interactive cards used in dashboards.",
|
|
{
|
|
label: "Open complaints",
|
|
value: "38",
|
|
description: "Cases waiting for review or assignment.",
|
|
icon: "icon-[lucide--inbox]",
|
|
badge: "Needs review",
|
|
selectable: true,
|
|
actionLabel: "Review queue",
|
|
href: "#queue",
|
|
color: "warning",
|
|
variant: "raised",
|
|
hover: "glow",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
iconStyle: ["plain", "soft", "solid", "outline"],
|
|
trendDirection: ["neutral", "up", "down", "positive", "negative"],
|
|
variant: ["default", "raised", "soft", "outline", "minimal", "solid", "gradient"],
|
|
hover: ["none", "lift", "border", "glow"],
|
|
align: ["left", "center", "right"],
|
|
},
|
|
},
|
|
|
|
StatsBar: {
|
|
demos: [
|
|
standard(
|
|
"Public proof strip",
|
|
"Present key facts and trust signals in one compact responsive row.",
|
|
{
|
|
items: statsItems,
|
|
columns: 4,
|
|
compact: true,
|
|
dividers: true,
|
|
icons: true,
|
|
variant: "raised",
|
|
maxWidth: "xl",
|
|
},
|
|
),
|
|
compact(
|
|
"Three-stat compact bar",
|
|
"Use fewer facts with tighter spacing below a hero or page header.",
|
|
{
|
|
items: statsItems.slice(0, 3),
|
|
columns: 3,
|
|
compact: true,
|
|
dividers: true,
|
|
icons: false,
|
|
variant: "soft",
|
|
maxWidth: "wide",
|
|
},
|
|
),
|
|
advanced(
|
|
"Full-width solid statistics",
|
|
"Use a high-contrast statistics bar as a major landing-page transition.",
|
|
{
|
|
items: statsItems,
|
|
columns: 4,
|
|
compact: false,
|
|
dividers: false,
|
|
icons: true,
|
|
variant: "solid",
|
|
maxWidth: "full",
|
|
color: "primary",
|
|
},
|
|
),
|
|
],
|
|
playground: { items: statsItems, columns: 4, maxWidth: "xl" },
|
|
options: {
|
|
columns: ["1", "2", "3", "4", "5", "6"],
|
|
variant: ["default", "raised", "soft", "outline", "minimal", "solid"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
},
|
|
},
|
|
|
|
CTASection: {
|
|
demos: [
|
|
standard(
|
|
"Split conversion CTA",
|
|
"Close a major page section with a clear action and supporting visual content.",
|
|
{
|
|
eyebrow: "Ready to continue",
|
|
title: "Build public pages with reusable components",
|
|
description:
|
|
"Keep application pages focused on content and business data while the shared UI package owns presentation.",
|
|
icon: "icon-[lucide--rocket]",
|
|
align: "split",
|
|
primaryLabel: "Use these components",
|
|
primaryHref: "#components",
|
|
primaryIcon: "icon-[lucide--blocks]",
|
|
secondaryLabel: "Back to home",
|
|
secondaryHref: "/",
|
|
secondaryIcon: "icon-[lucide--house]",
|
|
variant: "gradient",
|
|
maxWidth: "full",
|
|
},
|
|
{ visual: visualPanel },
|
|
),
|
|
compact(
|
|
"Centered signup CTA",
|
|
"Use a focused centered CTA after pricing, guides, or product explanations.",
|
|
{
|
|
eyebrow: "Get started",
|
|
title: "Create your first WRNexusJS page",
|
|
description:
|
|
"Install the framework and compose your application with the component system.",
|
|
align: "center",
|
|
primaryLabel: "Read installation",
|
|
primaryHref: "/installation",
|
|
secondaryLabel: "Browse examples",
|
|
secondaryHref: "/blocks",
|
|
variant: "solid",
|
|
maxWidth: "xl",
|
|
},
|
|
),
|
|
advanced(
|
|
"Full-bleed service CTA",
|
|
"Use an edge-to-edge surface for high-priority registration, service, or contact actions.",
|
|
{
|
|
eyebrow: "Citizen account",
|
|
title: "Access services and track requests securely",
|
|
description: "Create an account to submit, track, and manage citizen-service requests.",
|
|
align: "left",
|
|
primaryLabel: "Create account",
|
|
primaryHref: "#register",
|
|
secondaryLabel: "Sign in",
|
|
secondaryHref: "#sign-in",
|
|
visualIcon: "icon-[lucide--shield-check]",
|
|
visualTitle: "Secure public access",
|
|
visualDescription: "One account for requests, certificates, updates, and notifications.",
|
|
fullBleed: true,
|
|
variant: "solid",
|
|
maxWidth: "full",
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
align: ["left", "center", "right", "split"],
|
|
size: ["compact", "default", "large"],
|
|
visualPosition: ["left", "right"],
|
|
variant: ["default", "soft", "outline", "solid", "gradient", "minimal"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
},
|
|
},
|
|
|
|
BackToTop: {
|
|
demos: [
|
|
standard(
|
|
"Floating round control",
|
|
"Return visitors to the top of a long page after the scroll threshold is reached.",
|
|
{ alwaysVisible: true, position: "right", shape: "round", variant: "solid" },
|
|
),
|
|
compact(
|
|
"Pill control with label",
|
|
"Show a visible text label when the action needs extra clarity.",
|
|
{
|
|
alwaysVisible: true,
|
|
showLabel: true,
|
|
label: "Back to top",
|
|
position: "right",
|
|
shape: "pill",
|
|
variant: "soft",
|
|
},
|
|
),
|
|
advanced(
|
|
"Progress-aware control",
|
|
"Display page scroll progress around the floating control on long articles or directories.",
|
|
{
|
|
alwaysVisible: true,
|
|
showProgress: true,
|
|
position: "left",
|
|
offset: "lg",
|
|
shape: "round",
|
|
variant: "outline",
|
|
},
|
|
),
|
|
],
|
|
playground: { alwaysVisible: true },
|
|
options: {
|
|
position: ["left", "center", "right"],
|
|
offset: ["sm", "md", "lg"],
|
|
behavior: ["auto", "smooth"],
|
|
variant: ["solid", "soft", "outline", "ghost", "minimal"],
|
|
shape: ["round", "rounded", "pill"],
|
|
size: ["sm", "default", "lg"],
|
|
},
|
|
},
|
|
|
|
Footer: {
|
|
demos: [
|
|
standard(
|
|
"Four-column public footer",
|
|
"Organize product, developer, resource, and company links into responsive columns.",
|
|
{
|
|
items: footerItems,
|
|
columns: 4,
|
|
maxWidth: "wide",
|
|
copyright: "© 2026 WRNexusJS. All rights reserved.",
|
|
},
|
|
),
|
|
compact(
|
|
"Compact application footer",
|
|
"Use fewer columns and reduced spacing inside product applications.",
|
|
{
|
|
items: footerItems.slice(0, 3),
|
|
columns: 3,
|
|
size: "compact",
|
|
maxWidth: "compact",
|
|
copyright: "WRNexusJS component showcase",
|
|
},
|
|
),
|
|
advanced(
|
|
"Full-width footer with slots",
|
|
"Compose pre-footer, post-footer, and legal content around structured navigation.",
|
|
{
|
|
items: footerItems,
|
|
columns: 4,
|
|
size: "spacious",
|
|
maxWidth: "full",
|
|
copyright: "Built with WRNexusJS",
|
|
},
|
|
{
|
|
"pre-footer":
|
|
'<div class="showcase-footer-banner"><strong>Stay informed</strong><a href="#notifications">Manage notifications</a></div>',
|
|
"copyright-right":
|
|
'<div class="showcase-footer-legal"><a href="#privacy">Privacy</a><a href="#terms">Terms</a></div>',
|
|
},
|
|
),
|
|
],
|
|
playground: { items: footerItems, columns: 4, maxWidth: "wide" },
|
|
options: {
|
|
columns: ["1", "2", "3", "4", "5"],
|
|
size: ["compact", "default", "spacious"],
|
|
maxWidth: ["compact", "wide", "xl", "full"],
|
|
},
|
|
},
|
|
|
|
ContextMenu: {
|
|
demos: [
|
|
standard(
|
|
"Right-click record actions",
|
|
"Expose actions that apply to the selected record or canvas location.",
|
|
{
|
|
items: menuItems,
|
|
title: "Record actions",
|
|
description: "Right-click the target surface",
|
|
trigger: "contextmenu",
|
|
placement: "pointer",
|
|
},
|
|
{
|
|
trigger: '<div class="showcase-context-target">Right-click for contextual actions</div>',
|
|
},
|
|
),
|
|
compact(
|
|
"Click-triggered compact menu",
|
|
"Use a button-triggered context menu when discoverability matters.",
|
|
{
|
|
items: menuItems,
|
|
title: "Quick actions",
|
|
trigger: "click",
|
|
size: "sm",
|
|
minWidth: "12rem",
|
|
},
|
|
{ trigger: '<button type="button" class="showcase-action">Open quick actions</button>' },
|
|
),
|
|
advanced(
|
|
"Pointer and keyboard menu",
|
|
"Support right-click, click, and keyboard activation without forcing the menu open.",
|
|
{
|
|
items: menuItems,
|
|
title: "Accessible actions",
|
|
open: false,
|
|
defaultOpen: false,
|
|
trigger: "both",
|
|
variant: "soft",
|
|
placement: "bottom-start",
|
|
},
|
|
{
|
|
trigger:
|
|
'<button type="button" class="showcase-action">Click, press Enter, or right-click</button>',
|
|
},
|
|
),
|
|
],
|
|
playground: { items: menuItems, open: false, defaultOpen: false, trigger: "click" },
|
|
options: {
|
|
trigger: ["contextmenu", "click", "both", "manual"],
|
|
placement: ["pointer", "top-start", "top-end", "bottom-start", "bottom-end"],
|
|
align: ["start", "center", "end"],
|
|
size: ["sm", "default", "lg"],
|
|
variant: ["default", "raised", "soft", "outline"],
|
|
},
|
|
},
|
|
|
|
Dropdown: {
|
|
demos: [
|
|
standard("Action dropdown", "Group related actions behind one compact trigger.", {
|
|
label: "Open actions",
|
|
icon: "icon-[lucide--menu]",
|
|
items: menuItems,
|
|
placement: "bottom-start",
|
|
width: "lg",
|
|
}),
|
|
compact(
|
|
"Compact overflow menu",
|
|
"Use an icon-led compact menu in tables, cards, and toolbars.",
|
|
{
|
|
label: "More actions",
|
|
icon: "icon-[lucide--ellipsis]",
|
|
items: menuItems,
|
|
size: "sm",
|
|
width: "sm",
|
|
showChevron: false,
|
|
variant: "soft",
|
|
},
|
|
),
|
|
advanced(
|
|
"Detailed action menu",
|
|
"Open the menu from its trigger to preview placement, descriptions, shortcuts, danger states, and event output.",
|
|
{
|
|
label: "Review detailed menu",
|
|
items: menuItems,
|
|
open: false,
|
|
defaultOpen: false,
|
|
placement: "bottom-end",
|
|
width: "xl",
|
|
variant: "raised",
|
|
},
|
|
),
|
|
],
|
|
playground: {
|
|
items: menuItems,
|
|
open: false,
|
|
defaultOpen: false,
|
|
label: "Open playground menu",
|
|
},
|
|
options: {
|
|
placement: ["top-start", "top-end", "bottom-start", "bottom-end"],
|
|
width: ["sm", "md", "lg", "xl", "full"],
|
|
size: ["sm", "default", "lg"],
|
|
variant: ["default", "raised", "soft", "outline"],
|
|
},
|
|
},
|
|
|
|
Drawer: {
|
|
demos: [
|
|
standard(
|
|
"Right-side detail drawer",
|
|
"Keep supporting record details or forms available without leaving the page.",
|
|
{
|
|
triggerLabel: "Open drawer",
|
|
triggerIcon: "icon-[lucide--panel-right-open]",
|
|
title: "Citizen service details",
|
|
description: "Review supporting information without leaving the current page.",
|
|
icon: "icon-[lucide--panel-right]",
|
|
placement: "right",
|
|
size: "md",
|
|
},
|
|
{
|
|
default:
|
|
'<div class="showcase-overlay-content"><p>Place forms, filters, navigation, or record details here.</p></div>',
|
|
footer:
|
|
'<button type="button" class="showcase-action showcase-action--primary">Save changes</button>',
|
|
},
|
|
),
|
|
compact(
|
|
"Bottom mobile drawer",
|
|
"Use a bottom sheet for compact mobile workflows and contextual actions.",
|
|
{
|
|
triggerLabel: "Open mobile sheet",
|
|
title: "Choose an action",
|
|
placement: "bottom",
|
|
size: "sm",
|
|
variant: "soft",
|
|
},
|
|
{
|
|
default:
|
|
'<div class="showcase-overlay-content"><p>Mobile-friendly supporting actions.</p></div>',
|
|
},
|
|
),
|
|
advanced(
|
|
"Wide navigation drawer",
|
|
"Open a wide, scrollable drawer with custom header and footer content from an explicit trigger.",
|
|
{
|
|
open: false,
|
|
defaultOpen: false,
|
|
triggerLabel: "Open navigation drawer",
|
|
triggerIcon: "icon-[lucide--panel-left-open]",
|
|
title: "Navigation and filters",
|
|
description: "A wide drawer for complex supporting workflows.",
|
|
placement: "left",
|
|
size: "lg",
|
|
scrollable: true,
|
|
},
|
|
{
|
|
default:
|
|
'<div class="showcase-overlay-content showcase-overlay-content--tall"><p>Long scrollable content</p><p>Filters, navigation, details, and forms can be composed here.</p></div>',
|
|
},
|
|
),
|
|
],
|
|
playground: {
|
|
open: false,
|
|
defaultOpen: false,
|
|
triggerLabel: "Open playground drawer",
|
|
title: "Drawer playground",
|
|
},
|
|
options: {
|
|
placement: ["left", "right", "top", "bottom"],
|
|
size: ["sm", "md", "lg", "xl", "full"],
|
|
variant: ["default", "soft", "outline", "solid"],
|
|
},
|
|
},
|
|
|
|
Modal: {
|
|
demos: [
|
|
standard(
|
|
"Confirmation modal",
|
|
"Focus the user on one clear decision with confirm and cancel actions.",
|
|
{
|
|
triggerLabel: "Open modal",
|
|
triggerIcon: "icon-[lucide--square-stack]",
|
|
title: "Confirm service request",
|
|
description: "Review the information before continuing.",
|
|
icon: "icon-[lucide--shield-check]",
|
|
confirmLabel: "Confirm request",
|
|
confirmIcon: "icon-[lucide--check]",
|
|
cancelLabel: "Go back",
|
|
size: "md",
|
|
},
|
|
{
|
|
default:
|
|
'<div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div>',
|
|
},
|
|
),
|
|
compact("Destructive confirmation", "Use a danger treatment for irreversible operations.", {
|
|
triggerLabel: "Delete record",
|
|
title: "Delete this record?",
|
|
description: "This action cannot be undone.",
|
|
confirmLabel: "Delete record",
|
|
cancelLabel: "Keep record",
|
|
destructive: true,
|
|
size: "sm",
|
|
variant: "outline",
|
|
}),
|
|
advanced(
|
|
"Scrollable form modal",
|
|
"Open a larger modal for focused forms while keeping actions visible.",
|
|
{
|
|
open: false,
|
|
defaultOpen: false,
|
|
triggerLabel: "Open request form",
|
|
triggerIcon: "icon-[lucide--file-plus-2]",
|
|
title: "Create service request",
|
|
description: "Complete the required information.",
|
|
confirmLabel: "Submit request",
|
|
size: "lg",
|
|
scrollable: true,
|
|
variant: "soft",
|
|
},
|
|
{
|
|
default:
|
|
'<div class="showcase-overlay-content showcase-overlay-content--tall"><label>Request title<input value="Sample request" /></label><label>Description<textarea>Supporting information</textarea></label></div>',
|
|
},
|
|
),
|
|
],
|
|
playground: {
|
|
open: false,
|
|
defaultOpen: false,
|
|
triggerLabel: "Open playground modal",
|
|
title: "Modal playground",
|
|
},
|
|
options: {
|
|
size: ["sm", "md", "lg", "xl", "full"],
|
|
placement: ["center", "top"],
|
|
variant: ["default", "soft", "outline", "solid"],
|
|
},
|
|
},
|
|
|
|
Popover: {
|
|
demos: [
|
|
standard(
|
|
"Supporting information",
|
|
"Attach contextual information and actions to a nearby trigger.",
|
|
{
|
|
triggerLabel: "View details",
|
|
triggerIcon: "icon-[lucide--info]",
|
|
title: "Verified public information",
|
|
description: "This panel can contain text, actions, forms, or custom content.",
|
|
icon: "icon-[lucide--badge-check]",
|
|
actionLabel: "Open guide",
|
|
actionHref: "#guide",
|
|
width: "lg",
|
|
},
|
|
{
|
|
default:
|
|
"<p>Popover content remains attached to its trigger and becomes mobile-friendly on small screens.</p>",
|
|
},
|
|
),
|
|
compact(
|
|
"Compact action popover",
|
|
"Use a small popover for quick actions and concise explanations.",
|
|
{
|
|
triggerLabel: "Quick actions",
|
|
triggerIcon: "icon-[lucide--zap]",
|
|
title: "Quick actions",
|
|
placement: "top",
|
|
width: "sm",
|
|
size: "sm",
|
|
variant: "soft",
|
|
},
|
|
{
|
|
default:
|
|
'<div class="showcase-inline-actions"><button class="showcase-action">Copy</button><button class="showcase-action">Share</button></div>',
|
|
},
|
|
),
|
|
advanced(
|
|
"Rich status popover",
|
|
"Open a wide panel with close control, arrow, custom content, and footer action.",
|
|
{
|
|
open: false,
|
|
defaultOpen: false,
|
|
triggerLabel: "Open rich panel",
|
|
title: "Service status",
|
|
description: "Current operational information.",
|
|
placement: "bottom-end",
|
|
width: "xl",
|
|
showClose: true,
|
|
actionLabel: "Open status page",
|
|
actionHref: "#status",
|
|
variant: "raised",
|
|
},
|
|
{
|
|
default:
|
|
'<div class="showcase-status-panel"><strong>All systems operational</strong><span>Last checked moments ago</span></div>',
|
|
},
|
|
),
|
|
],
|
|
playground: {
|
|
open: false,
|
|
defaultOpen: false,
|
|
triggerLabel: "Open playground popover",
|
|
title: "Popover playground",
|
|
},
|
|
options: {
|
|
placement: [
|
|
"top",
|
|
"top-start",
|
|
"top-end",
|
|
"bottom",
|
|
"bottom-start",
|
|
"bottom-end",
|
|
"left",
|
|
"right",
|
|
],
|
|
width: ["sm", "md", "lg", "xl"],
|
|
size: ["sm", "default", "lg"],
|
|
variant: ["default", "raised", "soft", "outline"],
|
|
},
|
|
},
|
|
|
|
Tooltip: {
|
|
demos: [
|
|
standard(
|
|
"Hover and focus tooltip",
|
|
"Explain an unfamiliar control without interrupting the workflow.",
|
|
{
|
|
id: "help-tooltip",
|
|
title: "Helpful information",
|
|
content: "Tooltips explain controls without interrupting the user.",
|
|
placement: "top",
|
|
},
|
|
{ trigger: '<button type="button" class="showcase-action">Hover or focus</button>' },
|
|
),
|
|
compact(
|
|
"Click tooltip",
|
|
"Use click activation for touch-first or interactive help.",
|
|
{
|
|
id: "click-tooltip",
|
|
content: "Click again or press Escape to close.",
|
|
trigger: "click",
|
|
placement: "bottom",
|
|
size: "sm",
|
|
variant: "soft",
|
|
},
|
|
{ trigger: '<button type="button" class="showcase-action">Click for help</button>' },
|
|
),
|
|
advanced(
|
|
"Interactive rich tooltip",
|
|
"Allow pointer interaction when the tooltip contains supporting links or controls.",
|
|
{
|
|
id: "interactive-tooltip",
|
|
title: "Keyboard shortcut",
|
|
description: "Open global search from anywhere.",
|
|
content: "Press Ctrl or Command plus K.",
|
|
trigger: "both",
|
|
placement: "right",
|
|
interactive: true,
|
|
maxWidth: "22rem",
|
|
variant: "dark",
|
|
},
|
|
{ trigger: '<button type="button" class="showcase-action">Show shortcut</button>' },
|
|
),
|
|
],
|
|
playground: {
|
|
open: false,
|
|
defaultOpen: false,
|
|
trigger: "hover",
|
|
content: "Hover or focus the trigger to inspect the tooltip.",
|
|
},
|
|
options: {
|
|
trigger: ["hover", "focus", "click", "both"],
|
|
placement: [
|
|
"top",
|
|
"top-start",
|
|
"top-end",
|
|
"bottom",
|
|
"bottom-start",
|
|
"bottom-end",
|
|
"left",
|
|
"right",
|
|
],
|
|
size: ["sm", "default", "lg"],
|
|
variant: ["dark", "light", "soft", "solid"],
|
|
},
|
|
},
|
|
|
|
Container: {
|
|
demos: [
|
|
standard(
|
|
"Standard content container",
|
|
"Keep page content aligned to a predictable readable width.",
|
|
{ maxWidth: "xl", size: "default" },
|
|
{ default: '<div class="showcase-content-block">Centered container content</div>' },
|
|
),
|
|
compact(
|
|
"Compact reading container",
|
|
"Use a smaller maximum width for forms, legal copy, and focused content.",
|
|
{ maxWidth: "compact", size: "compact" },
|
|
{ default: '<div class="showcase-content-block">Compact readable content</div>' },
|
|
),
|
|
advanced(
|
|
"Full-width layout container",
|
|
"Allow dashboards and data-heavy pages to use the available width.",
|
|
{ maxWidth: "full", size: "spacious" },
|
|
{ default: '<div class="showcase-content-block">Full-width dashboard content</div>' },
|
|
),
|
|
],
|
|
options: {
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
size: ["compact", "default", "spacious"],
|
|
},
|
|
},
|
|
|
|
Grid: {
|
|
demos: [
|
|
standard(
|
|
"Responsive three-column grid",
|
|
"Arrange equal-width children with consistent gaps.",
|
|
{ columns: 3, gap: "md", maxWidth: "xl" },
|
|
{
|
|
default:
|
|
'<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div>',
|
|
},
|
|
),
|
|
compact(
|
|
"Dense four-column grid",
|
|
"Use smaller gaps for dashboards and compact overview pages.",
|
|
{ columns: 4, gap: "sm", maxWidth: "wide", size: "compact" },
|
|
{
|
|
default:
|
|
'<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div>',
|
|
},
|
|
),
|
|
advanced(
|
|
"Full-width two-column grid",
|
|
"Use larger gaps for editorial or marketing split layouts.",
|
|
{ columns: 2, gap: "xl", maxWidth: "full", size: "spacious" },
|
|
{
|
|
default:
|
|
'<div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div>',
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
columns: ["1", "2", "3", "4", "5", "6"],
|
|
gap: ["none", "sm", "md", "lg", "xl"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
},
|
|
},
|
|
|
|
Columns: {
|
|
demos: [
|
|
standard(
|
|
"Two-column content layout",
|
|
"Split supporting content into balanced responsive columns.",
|
|
{ columns: 2, gap: "lg", maxWidth: "xl" },
|
|
{
|
|
default:
|
|
'<div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div>',
|
|
},
|
|
),
|
|
compact(
|
|
"Three compact columns",
|
|
"Use three columns for short summaries and dashboard groups.",
|
|
{ columns: 3, gap: "sm", size: "compact", maxWidth: "wide" },
|
|
{
|
|
default:
|
|
'<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div>',
|
|
},
|
|
),
|
|
advanced(
|
|
"Full-width four columns",
|
|
"Use the full available width for structured application content.",
|
|
{ columns: 4, gap: "md", maxWidth: "full" },
|
|
{
|
|
default:
|
|
'<div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div>',
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
columns: ["1", "2", "3", "4", "5", "6"],
|
|
gap: ["none", "sm", "md", "lg", "xl"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
},
|
|
},
|
|
|
|
Card: {
|
|
demos: [
|
|
standard(
|
|
"Structured content card",
|
|
"Group a title, description, content, and supporting actions.",
|
|
{
|
|
title: "Citizen service",
|
|
description: "Access a trusted online service.",
|
|
variant: "default",
|
|
},
|
|
{
|
|
default:
|
|
'<p class="showcase-card-copy">Supporting content belongs inside the default slot.</p>',
|
|
},
|
|
),
|
|
compact(
|
|
"Compact dashboard card",
|
|
"Use reduced spacing for metrics, filters, and operational information.",
|
|
{
|
|
title: "Open requests",
|
|
description: "Requests waiting for assignment.",
|
|
size: "compact",
|
|
variant: "soft",
|
|
},
|
|
{ default: '<strong class="showcase-card-value">38</strong>' },
|
|
),
|
|
advanced(
|
|
"Raised interactive card",
|
|
"Use a stronger visual treatment for featured content.",
|
|
{
|
|
title: "Featured guide",
|
|
description: "A complete guide to public safety and emergency readiness.",
|
|
size: "spacious",
|
|
variant: "raised",
|
|
},
|
|
{ default: '<a href="#guide" class="showcase-action">Read guide</a>' },
|
|
),
|
|
],
|
|
options: {
|
|
size: ["compact", "default", "spacious"],
|
|
variant: ["default", "soft", "raised", "outline", "minimal"],
|
|
},
|
|
},
|
|
|
|
Link: {
|
|
demos: [
|
|
standard("Standard navigation link", "Use for routes within the current application.", {
|
|
label: "Open components",
|
|
href: "/base",
|
|
}),
|
|
compact(
|
|
"External resource link",
|
|
"Communicate external navigation and use safe target attributes.",
|
|
{
|
|
label: "WRNexusJS documentation",
|
|
href: "https://wrnexusjs.dev",
|
|
external: true,
|
|
target: "_blank",
|
|
},
|
|
),
|
|
advanced(
|
|
"Large emphasized link",
|
|
"Use a larger link in empty states, promotional cards, and resource lists.",
|
|
{ label: "Explore framework guides", href: "/framework-guides", size: "lg", color: "info" },
|
|
),
|
|
],
|
|
options: { size: ["sm", "default", "lg"], target: ["_self", "_blank", "_parent", "_top"] },
|
|
},
|
|
|
|
Image: {
|
|
demos: [
|
|
standard(
|
|
"Responsive content image",
|
|
"Render a responsive image with meaningful alternative text.",
|
|
{
|
|
src: "/showcase-images/violet-circle.svg",
|
|
alt: "Abstract violet circle on a dark surface",
|
|
width: "800",
|
|
height: "450",
|
|
},
|
|
),
|
|
compact(
|
|
"Rounded thumbnail",
|
|
"Use a rounded image in cards, directories, and compact summaries.",
|
|
{
|
|
src: "/showcase-images/blue-mountain.svg",
|
|
alt: "Abstract blue thumbnail",
|
|
width: "400",
|
|
height: "400",
|
|
rounded: true,
|
|
size: "sm",
|
|
},
|
|
),
|
|
advanced(
|
|
"Eager hero image",
|
|
"Use explicit dimensions and eager loading for an above-the-fold visual.",
|
|
{
|
|
src: "/showcase-images/green-hero.svg",
|
|
alt: "Abstract green hero visual",
|
|
width: "1200",
|
|
height: "600",
|
|
loading: "eager",
|
|
rounded: true,
|
|
size: "lg",
|
|
},
|
|
),
|
|
],
|
|
options: { loading: ["lazy", "eager"], size: ["sm", "default", "lg"] },
|
|
},
|
|
|
|
SearchBox: {
|
|
demos: [
|
|
standard(
|
|
"Site search",
|
|
"Give visitors a clear way to search pages, services, or resources.",
|
|
{
|
|
label: "Search documentation",
|
|
name: "site-search",
|
|
placeholder: "Search components and guides",
|
|
type: "search",
|
|
},
|
|
),
|
|
compact(
|
|
"Compact directory search",
|
|
"Use a compact field above tables, lists, and directories.",
|
|
{
|
|
label: "Search stations",
|
|
name: "station-search",
|
|
placeholder: "Name, district, or jurisdiction",
|
|
size: "sm",
|
|
},
|
|
),
|
|
advanced(
|
|
"Required service lookup",
|
|
"Use validation and required semantics in focused lookup flows.",
|
|
{
|
|
label: "Complaint reference",
|
|
name: "complaint-reference",
|
|
placeholder: "Enter reference number",
|
|
required: true,
|
|
size: "lg",
|
|
color: "info",
|
|
},
|
|
),
|
|
],
|
|
options: { size: ["sm", "default", "lg"], type: ["search", "text"] },
|
|
},
|
|
|
|
Map: {
|
|
demos: [
|
|
standard(
|
|
"Station directory map",
|
|
"Present locations with supporting names, addresses, and actions.",
|
|
{
|
|
title: "Nearby police stations",
|
|
description: "Select a station to view contact details and jurisdiction information.",
|
|
items: [
|
|
{
|
|
title: "Central station",
|
|
description: "Main Road",
|
|
latitude: 18.5204,
|
|
longitude: 73.8567,
|
|
},
|
|
{
|
|
title: "North station",
|
|
description: "University Road",
|
|
latitude: 18.559,
|
|
longitude: 73.807,
|
|
},
|
|
],
|
|
},
|
|
),
|
|
compact(
|
|
"Compact location preview",
|
|
"Use a smaller map preview inside cards, drawers, and record details.",
|
|
{
|
|
title: "Service location",
|
|
description: "Public service office",
|
|
items: [{ title: "Public office", description: "City centre" }],
|
|
size: "sm",
|
|
variant: "soft",
|
|
},
|
|
),
|
|
advanced(
|
|
"Operations map",
|
|
"Use a larger map surface for multiple markers and operational context.",
|
|
{
|
|
title: "Jurisdiction overview",
|
|
description: "Stations, service areas, and public facilities.",
|
|
items: [{ title: "Station A" }, { title: "Station B" }, { title: "Control room" }],
|
|
size: "lg",
|
|
variant: "raised",
|
|
color: "info",
|
|
},
|
|
),
|
|
],
|
|
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
|
|
},
|
|
|
|
List: {
|
|
demos: [
|
|
standard(
|
|
"Linked resource list",
|
|
"Present related links with supporting descriptions and icons.",
|
|
{
|
|
title: "Citizen resources",
|
|
description: "Commonly requested public information.",
|
|
items: [
|
|
{ label: "Report crime", href: "#report", icon: "icon-[lucide--shield-alert]" },
|
|
{ label: "Track complaint", href: "#track", icon: "icon-[lucide--scan-search]" },
|
|
{ label: "Certificates", href: "#certificates", icon: "icon-[lucide--file-check-2]" },
|
|
],
|
|
},
|
|
),
|
|
compact(
|
|
"Compact status list",
|
|
"Use a dense list in sidebars, dashboards, and record panels.",
|
|
{
|
|
title: "Current status",
|
|
items: [
|
|
{ label: "Application received", status: "Complete" },
|
|
{ label: "Verification", status: "In progress" },
|
|
{ label: "Decision", status: "Pending" },
|
|
],
|
|
size: "sm",
|
|
variant: "soft",
|
|
},
|
|
),
|
|
advanced(
|
|
"Rich action list",
|
|
"Combine descriptions, icons, statuses, and actions in a structured collection.",
|
|
{
|
|
title: "Service requests",
|
|
description: "Recent requests and their current status.",
|
|
items: [
|
|
{
|
|
label: "Address verification",
|
|
description: "Submitted yesterday",
|
|
status: "Review",
|
|
href: "#request-1",
|
|
},
|
|
{
|
|
label: "Character certificate",
|
|
description: "Submitted 3 days ago",
|
|
status: "Approved",
|
|
href: "#request-2",
|
|
},
|
|
],
|
|
size: "lg",
|
|
variant: "raised",
|
|
},
|
|
),
|
|
],
|
|
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
|
|
},
|
|
|
|
Marquee: {
|
|
demos: [
|
|
standard(
|
|
"Partner and capability strip",
|
|
"Continuously present short labels, partners, channels, or capabilities.",
|
|
{
|
|
title: "Supported capabilities",
|
|
items: [
|
|
{ label: "SSR" },
|
|
{ label: "CSR" },
|
|
{ label: "Themes" },
|
|
{ label: "Accessibility" },
|
|
{ label: "Responsive UI" },
|
|
],
|
|
variant: "default",
|
|
},
|
|
),
|
|
compact("Compact announcement ticker", "Use a dense ticker for short operational updates.", {
|
|
items: [
|
|
{ label: "All services operational" },
|
|
{ label: "New components published" },
|
|
{ label: "Documentation updated" },
|
|
],
|
|
size: "sm",
|
|
variant: "soft",
|
|
}),
|
|
advanced(
|
|
"Large visual marquee",
|
|
"Use stronger spacing and richer items on marketing pages.",
|
|
{
|
|
title: "Built for complete digital platforms",
|
|
items: [
|
|
{ label: "Public portals", icon: "icon-[lucide--landmark]" },
|
|
{ label: "Enterprise systems", icon: "icon-[lucide--building-2]" },
|
|
{ label: "Developer tools", icon: "icon-[lucide--code-2]" },
|
|
],
|
|
size: "lg",
|
|
variant: "raised",
|
|
color: "info",
|
|
},
|
|
),
|
|
],
|
|
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
|
|
},
|
|
|
|
Tabs: {
|
|
demos: [
|
|
standard(
|
|
"Horizontal content tabs",
|
|
"Switch between related content panels without navigating away.",
|
|
{
|
|
label: "Service information",
|
|
items: [
|
|
{ label: "Overview", value: "overview", content: "Overview content" },
|
|
{ label: "Requirements", value: "requirements", content: "Requirements content" },
|
|
{ label: "Process", value: "process", content: "Process content" },
|
|
],
|
|
active: "overview",
|
|
orientation: "horizontal",
|
|
},
|
|
),
|
|
compact(
|
|
"Compact application tabs",
|
|
"Use smaller tabs in dashboards, panels, and dense product interfaces.",
|
|
{
|
|
label: "Record views",
|
|
items: [
|
|
{ label: "Details", value: "details" },
|
|
{ label: "History", value: "history" },
|
|
{ label: "Files", value: "files" },
|
|
],
|
|
active: "details",
|
|
size: "sm",
|
|
},
|
|
),
|
|
advanced(
|
|
"Vertical settings tabs",
|
|
"Use vertical tabs for settings, configuration, and long-form navigation.",
|
|
{
|
|
label: "Settings",
|
|
items: [
|
|
{ label: "Profile", value: "profile", icon: "icon-[lucide--user]" },
|
|
{ label: "Security", value: "security", icon: "icon-[lucide--shield]" },
|
|
{ label: "Notifications", value: "notifications", icon: "icon-[lucide--bell]" },
|
|
],
|
|
active: "security",
|
|
orientation: "vertical",
|
|
size: "lg",
|
|
},
|
|
),
|
|
],
|
|
options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] },
|
|
},
|
|
|
|
Timeline: {
|
|
demos: [
|
|
standard(
|
|
"Application timeline",
|
|
"Explain the sequence and current status of a request or process.",
|
|
{
|
|
title: "Request progress",
|
|
description: "Latest updates for this service request.",
|
|
items: [
|
|
{
|
|
title: "Request submitted",
|
|
description: "Received successfully",
|
|
time: "09:30",
|
|
status: "complete",
|
|
},
|
|
{
|
|
title: "Verification",
|
|
description: "Documents are being reviewed",
|
|
time: "10:15",
|
|
current: true,
|
|
},
|
|
{ title: "Decision", description: "Pending verification", time: "—" },
|
|
],
|
|
},
|
|
),
|
|
compact(
|
|
"Compact activity history",
|
|
"Use a dense history inside drawers, side panels, and record views.",
|
|
{
|
|
title: "Recent activity",
|
|
items: [
|
|
{ title: "Status changed", time: "Today" },
|
|
{ title: "Comment added", time: "Yesterday" },
|
|
{ title: "Document uploaded", time: "3 days ago" },
|
|
],
|
|
size: "sm",
|
|
variant: "soft",
|
|
},
|
|
),
|
|
advanced(
|
|
"Rich milestone timeline",
|
|
"Use icons, descriptions, times, and states for longer workflows.",
|
|
{
|
|
title: "Implementation milestones",
|
|
description: "Planned delivery sequence.",
|
|
items: [
|
|
{
|
|
title: "Foundation",
|
|
description: "Tokens, themes, and primitives",
|
|
icon: "icon-[lucide--layers-3]",
|
|
status: "complete",
|
|
},
|
|
{
|
|
title: "Components",
|
|
description: "Reusable UI and documentation",
|
|
icon: "icon-[lucide--blocks]",
|
|
current: true,
|
|
},
|
|
{
|
|
title: "Applications",
|
|
description: "Compose production interfaces",
|
|
icon: "icon-[lucide--rocket]",
|
|
},
|
|
],
|
|
size: "lg",
|
|
variant: "raised",
|
|
},
|
|
),
|
|
],
|
|
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
|
|
},
|
|
|
|
Typography: {
|
|
demos: [
|
|
standard(
|
|
"Readable content typography",
|
|
"Apply consistent typography to headings, paragraphs, lists, and inline content.",
|
|
{ maxWidth: "xl", size: "default" },
|
|
{
|
|
default:
|
|
'<div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div>',
|
|
},
|
|
),
|
|
compact(
|
|
"Compact documentation typography",
|
|
"Use reduced spacing in reference pages and dense product help.",
|
|
{ maxWidth: "compact", size: "compact" },
|
|
{
|
|
default:
|
|
'<div class="showcase-typography"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div>',
|
|
},
|
|
),
|
|
advanced(
|
|
"Wide editorial typography",
|
|
"Use wider content and multiple columns for editorial or policy content.",
|
|
{ maxWidth: "wide", columns: 2, gap: "xl", size: "spacious" },
|
|
{
|
|
default:
|
|
'<div class="showcase-typography"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div>',
|
|
},
|
|
),
|
|
],
|
|
options: {
|
|
columns: ["1", "2", "3"],
|
|
gap: ["sm", "md", "lg", "xl"],
|
|
maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
|
|
size: ["compact", "default", "spacious"],
|
|
},
|
|
},
|
|
|
|
Divider: {
|
|
demos: [
|
|
standard(
|
|
"Horizontal section divider",
|
|
"Separate related content without introducing another container.",
|
|
{ orientation: "horizontal", label: "Related information" },
|
|
),
|
|
compact("Minimal unlabeled divider", "Use a quiet rule between compact content groups.", {
|
|
orientation: "horizontal",
|
|
label: "",
|
|
size: "sm",
|
|
}),
|
|
advanced(
|
|
"Vertical toolbar divider",
|
|
"Separate groups of inline actions in toolbars and navigation.",
|
|
{ orientation: "vertical", label: "Actions", size: "lg", color: "info" },
|
|
),
|
|
],
|
|
options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] },
|
|
},
|
|
};
|
|
|
|
const genericEventDescriptions = {
|
|
action: "Fires when the component's primary or item action is activated.",
|
|
blur: "Fires when focus leaves the interactive control.",
|
|
cancel: "Fires when the user cancels or dismisses the current workflow.",
|
|
change: "Fires when the component's committed value or selection changes.",
|
|
clear: "Fires after the current value or selection is cleared.",
|
|
click: "Fires when the interactive surface is activated.",
|
|
close: "Fires after the component closes.",
|
|
confirm: "Fires when the user confirms the current action.",
|
|
dismiss: "Fires after the announcement or feedback surface is dismissed.",
|
|
error: "Fires when the component cannot complete an operation.",
|
|
focus: "Fires when the interactive control receives focus.",
|
|
input: "Fires as the editable value changes.",
|
|
load: "Fires after remote or deferred content loads successfully.",
|
|
open: "Fires after the component opens.",
|
|
paste: "Fires after clipboard content is processed.",
|
|
search: "Fires when the current search query changes.",
|
|
select: "Fires when an item, option, card, or result is selected.",
|
|
strength: "Fires when the calculated password-strength state changes.",
|
|
toggle: "Fires when the component changes between open and closed or on and off states.",
|
|
};
|
|
|
|
export function profileFor(name) {
|
|
return componentProfiles[name] ?? null;
|
|
}
|
|
|
|
export function eventDescriptionFor(_componentName, eventName) {
|
|
return (
|
|
genericEventDescriptions[eventName] ?? `Fires when the component emits the ${eventName} event.`
|
|
);
|
|
}
|