Pre Release New Changes
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,918 @@
|
||||
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>`;
|
||||
|
||||
const actionSlot = `
|
||||
<div class="showcase-inline-actions">
|
||||
<a href="#primary" class="showcase-action showcase-action--primary">Primary action</a>
|
||||
<a href="#secondary" class="showcase-action">Secondary action</a>
|
||||
</div>`;
|
||||
|
||||
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,
|
||||
});
|
||||
|
||||
export const componentProfiles = {
|
||||
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: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='610' cy='130' r='120' fill='%237c3aed' opacity='.55'/%3E%3Crect x='90' y='90' width='430' height='270' rx='28' fill='%23ffffff' opacity='.12'/%3E%3C/svg%3E", 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: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E", 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: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E", 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: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E", 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.`;
|
||||
}
|
||||
Reference in New Issue
Block a user