2254 lines
72 KiB
JavaScript
2254 lines
72 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>`;
|
|
|
|
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.`
|
|
);
|
|
}
|