Files
WRNexusJS/packages/ui/component-reference.json
T
Clintchiz 7d737ec0a0
Quality / quality (ubuntu-latest) (push) Failing after 6m15s
Quality / quality (windows-latest) (push) Canceled after 0s
fix(ui): make catalog mega menus interactive
2026-08-24 22:18:30 +05:30

14246 lines
354 KiB
JSON

{
"generatedFrom": "packages/ui/components/*.wrn",
"count": 102,
"components": [
{
"name": "Accordion",
"mount": "Accordion",
"category": "base",
"purpose": "Theme-aware, responsive accordion component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"accordion\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "defaultOpen",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "multiple",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "alwaysOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "indicator",
"type": "string",
"required": false,
"default": "\"plus\"",
"options": []
},
{
"name": "indicatorPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "showIndicator",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "bordered",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "separated",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "flush",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "contentItalic",
"type": "boolean",
"required": false,
"default": "false",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "open",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "close",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["change", "open", "close"],
"source": "components/Accordion.wrn"
},
{
"name": "AdvancedSelect",
"mount": "AdvancedSelect",
"category": "advanced-forms",
"purpose": "Theme-aware, responsive advanced select component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Advanced Select\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "values",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "options",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "groups",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"Select an option\"",
"options": []
},
{
"name": "placeholderIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "searchPlaceholder",
"type": "string",
"required": false,
"default": "\"Search options…\"",
"options": []
},
{
"name": "multiple",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "searchable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "clearable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "allowEmpty",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "tags",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "invalid",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "validationMessage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "helpText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "loading",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "loadingLabel",
"type": "string",
"required": false,
"default": "\"Loading options…\"",
"options": []
},
{
"name": "emptyLabel",
"type": "string",
"required": false,
"default": "\"No options found\"",
"options": []
},
{
"name": "selectedOptionsLabel",
"type": "string",
"required": false,
"default": "\"Selected options\"",
"options": []
},
{
"name": "clearLabel",
"type": "string",
"required": false,
"default": "\"Clear selection\"",
"options": []
},
{
"name": "createLabel",
"type": "string",
"required": false,
"default": "\"Create\"",
"options": []
},
{
"name": "loadMoreLabel",
"type": "string",
"required": false,
"default": "\"Load more\"",
"options": []
},
{
"name": "searchMode",
"type": "string",
"required": false,
"default": "\"contains\"",
"options": []
},
{
"name": "searchFields",
"type": "string",
"required": false,
"default": "\"label,description\"",
"options": []
},
{
"name": "minSearchLength",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "searchResultLimit",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "maxSelections",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "showCounter",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "counterTemplate",
"type": "string",
"required": false,
"default": "\"{selected} selected\"",
"options": []
},
{
"name": "optionTemplate",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "selectedTemplate",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "closeOnSelect",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "scrollToSelected",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "fixed",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"bottom\"",
"options": []
},
{
"name": "remote",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "remoteUrl",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "remoteQueryParam",
"type": "string",
"required": false,
"default": "\"q\"",
"options": []
},
{
"name": "remoteDebounce",
"type": "number",
"required": false,
"default": "250",
"options": []
},
{
"name": "remoteAutoLoad",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "infinite",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "hasMore",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "page",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "search",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "select",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "clear",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "open",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "close",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "load",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "error",
"payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string"
}
],
"events": ["search", "select", "change", "clear", "open", "close", "load", "error"],
"source": "components/AdvancedSelect.wrn"
},
{
"name": "Alert",
"mount": "Alert",
"category": "base",
"purpose": "Theme-aware, responsive alert component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"info\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"soft\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "shadow",
"type": "string",
"required": false,
"default": "\"sm\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Alert\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "actions",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "showIcon",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "dismissible",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "dismissLabel",
"type": "string",
"required": false,
"default": "\"Dismiss alert\"",
"options": []
},
{
"name": "role",
"type": "string",
"required": false,
"default": "\"alert\"",
"options": []
},
{
"name": "live",
"type": "string",
"required": false,
"default": "\"polite\"",
"options": []
},
{
"name": "linkLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "linkHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "compact",
"type": "boolean",
"required": false,
"default": "false",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "dismiss",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "action",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["dismiss", "action"],
"source": "components/alert.wrn"
},
{
"name": "AnnouncementBar",
"mount": "AnnouncementBar",
"category": "marketing",
"purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.",
"props": [
{
"name": "badge",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "badgeIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "message",
"type": "string",
"required": false,
"default": "\"Announcement\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--megaphone]\"",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "dismissible",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "dismissLabel",
"type": "string",
"required": false,
"default": "\"Dismiss announcement\"",
"options": []
},
{
"name": "sticky",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "compact",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "flush",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "mobileCompact",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "mobileMessageLines",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "hideBadgeOnMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "hideDescriptionOnMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "mobileActionSize",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "contentGutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "flushMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "width",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"soft\"",
"options": []
},
{
"name": "role",
"type": "string",
"required": false,
"default": "\"status\"",
"options": []
},
{
"name": "live",
"type": "string",
"required": false,
"default": "\"polite\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "dismiss",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["dismiss"],
"source": "components/AnnouncementBar.wrn"
},
{
"name": "AuthForm",
"mount": "AuthForm",
"category": "core",
"purpose": "Reusable auth form component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "mode",
"type": "string",
"required": false,
"default": "\"sign-in\"",
"options": []
},
{
"name": "action",
"type": "string",
"required": false,
"default": "\"/api/auth/login\"",
"options": []
},
{
"name": "method",
"type": "string",
"required": false,
"default": "\"post\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Sign in\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "returnTo",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "schema",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "showRemember",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showName",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "submitLabel",
"type": "string",
"required": false,
"default": "\"Continue\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "submit",
"payloadType": "{ event: Event; mode: string; action: string }"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["submit", "change", "input", "focus", "blur"],
"source": "components/AuthForm.wrn"
},
{
"name": "AuthSplitLayout",
"mount": "AuthSplitLayout",
"category": "core",
"purpose": "Reusable auth split layout component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"Secure identity\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Welcome back\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "brand",
"type": "string",
"required": false,
"default": "\"Police Management System\"",
"options": []
},
{
"name": "features",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["aside-extra", "form"],
"outputs": [],
"events": [],
"source": "components/AuthSplitLayout.wrn"
},
{
"name": "Avatar",
"mount": "Avatar",
"category": "base",
"purpose": "Theme-aware, responsive avatar component.",
"props": [
{
"name": "src",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "alt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "initials",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"solid\"",
"options": []
},
{
"name": "shape",
"type": "string",
"required": false,
"default": "\"circle\"",
"options": []
},
{
"name": "status",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "statusLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "statusPosition",
"type": "string",
"required": false,
"default": "\"bottom\"",
"options": []
},
{
"name": "badge",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "badgeIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "badgeLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "tooltip",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "loading",
"type": "string",
"required": false,
"default": "\"lazy\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "load",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "error",
"payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string"
},
{
"name": "click",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["load", "error", "click"],
"source": "components/avatar.wrn"
},
{
"name": "AvatarGroup",
"mount": "AvatarGroup",
"category": "base",
"purpose": "Theme-aware, responsive avatar group component.",
"props": [
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"solid\"",
"options": []
},
{
"name": "shape",
"type": "string",
"required": false,
"default": "\"circle\"",
"options": []
},
{
"name": "layout",
"type": "string",
"required": false,
"default": "\"stack\"",
"options": []
},
{
"name": "maxVisible",
"type": "number",
"required": false,
"default": "4",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "3",
"options": []
},
{
"name": "borderColor",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "showTooltips",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "overflowLabel",
"type": "string",
"required": false,
"default": "\"Show remaining members\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "overflow",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
}
],
"events": ["overflow"],
"source": "components/AvatarGroup.wrn"
},
{
"name": "BackToTop",
"mount": "BackToTop",
"category": "navigation",
"purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress.",
"props": [
{
"name": "threshold",
"type": "number",
"required": false,
"default": "500",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Back to top\"",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"Scroll back to top\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--arrow-up]\"",
"options": []
},
{
"name": "position",
"type": "string",
"required": false,
"default": "\"right\"",
"options": []
},
{
"name": "offset",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "behavior",
"type": "string",
"required": false,
"default": "\"smooth\"",
"options": []
},
{
"name": "showProgress",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "showLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "alwaysVisible",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"solid\"",
"options": []
},
{
"name": "shape",
"type": "string",
"required": false,
"default": "\"round\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [],
"events": [],
"source": "components/BackToTop.wrn"
},
{
"name": "Badge",
"mount": "Badge",
"category": "base",
"purpose": "Theme-aware, responsive badge component.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Badge\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"solid\"",
"options": []
},
{
"name": "shape",
"type": "string",
"required": false,
"default": "\"pill\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "dot",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "dotOnly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "dotLabel",
"type": "string",
"required": false,
"default": "\"Status\"",
"options": []
},
{
"name": "animated",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "avatarSrc",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "avatarAlt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "dismissible",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "dismissLabel",
"type": "string",
"required": false,
"default": "\"Remove badge\"",
"options": []
},
{
"name": "truncate",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"12rem\"",
"options": []
},
{
"name": "anchorLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "anchorIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"inline\"",
"options": []
},
{
"name": "anchorLabelText",
"type": "string",
"required": false,
"default": "\"Badge anchor\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "dismiss",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["dismiss"],
"source": "components/badge.wrn"
},
{
"name": "Blockquote",
"mount": "Blockquote",
"category": "base",
"purpose": "Theme-aware, responsive blockquote component.",
"props": [
{
"name": "quote",
"type": "string",
"required": false,
"default": "\"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.\"",
"options": []
},
{
"name": "citation",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "citationTitle",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "citationUrl",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "avatarSrc",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "avatarAlt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "quoteMark",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "italic",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Blockquote.wrn"
},
{
"name": "Breadcrumb",
"mount": "Breadcrumb",
"category": "navigation",
"purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Breadcrumb\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "active",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "separator",
"type": "string",
"required": false,
"default": "\"chevron\"",
"options": []
},
{
"name": "showHome",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "homeLabel",
"type": "string",
"required": false,
"default": "\"Home\"",
"options": []
},
{
"name": "homeHref",
"type": "string",
"required": false,
"default": "\"/\"",
"options": []
},
{
"name": "homeIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--house]\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"minimal\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "select",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
}
],
"events": ["select"],
"source": "components/Breadcrumb.wrn"
},
{
"name": "Button",
"mount": "Button",
"category": "base",
"purpose": "Theme-aware, responsive button component.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Button\"",
"options": []
},
{
"name": "loadingLabel",
"type": "string",
"required": false,
"default": "\"Loading…\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "as",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "href",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "target",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "rel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "type",
"type": "string",
"required": false,
"default": "\"button\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "loading",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "pill",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "ariaPressed",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "ariaExpanded",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "ariaControls",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "autofocus",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "controlClass",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "click",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["click", "focus", "blur"],
"source": "components/button.wrn"
},
{
"name": "ButtonGroup",
"mount": "ButtonGroup",
"category": "base",
"purpose": "Theme-aware, responsive button group component.",
"props": [
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"horizontal\"",
"options": []
},
{
"name": "responsive",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "attached",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "selectable",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "toolbar",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"Button group\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "click",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "select",
"payloadType": "{ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number }"
},
{
"name": "change",
"payloadType": "{ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number }"
}
],
"events": ["click", "select", "change"],
"source": "components/ButtonGroup.wrn"
},
{
"name": "CTASection",
"mount": "CTASection",
"category": "marketing",
"purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Ready to get started?\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"center\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"solid\"",
"options": []
},
{
"name": "spacing",
"type": "string",
"required": false,
"default": "\"none\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "titleMaxWidth",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "contentPadding",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobilePadding",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobileActions",
"type": "string",
"required": false,
"default": "\"stack\"",
"options": []
},
{
"name": "primaryLabel",
"type": "string",
"required": false,
"default": "\"Get started\"",
"options": []
},
{
"name": "primaryHref",
"type": "string",
"required": false,
"default": "\"#\"",
"options": []
},
{
"name": "primaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "backgroundImage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualImage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualAlt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualTitle",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualDescription",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualItems",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "visualPosition",
"type": "string",
"required": false,
"default": "\"right\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "fullBleed",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default", "actions", "visual", "footer"],
"outputs": [],
"events": [],
"source": "components/CTASection.wrn"
},
{
"name": "Card",
"mount": "Card",
"category": "base",
"purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots.",
"props": [
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "titleKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "subtitle",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "subtitleKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "descriptionKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "header",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "footer",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "imageSrc",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "imageAlt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "imagePosition",
"type": "string",
"required": false,
"default": "\"top\"",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionLabelKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "headerActions",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "navigation",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "activeNav",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "mobileNavigation",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "alertTitle",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "alertDescription",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "empty",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "emptyTitle",
"type": "string",
"required": false,
"default": "\"No data to show\"",
"options": []
},
{
"name": "emptyIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--inbox]\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "layout",
"type": "string",
"required": false,
"default": "\"vertical\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "hover",
"type": "string",
"required": false,
"default": "\"none\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "shadow",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "equalHeight",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "scrollable",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "maxHeight",
"type": "string",
"required": false,
"default": "\"18rem\"",
"options": []
},
{
"name": "dismissible",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "click",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "action",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "navigate",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "dismiss",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "load",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "error",
"payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string"
}
],
"events": ["click", "action", "navigate", "dismiss", "load", "error"],
"source": "components/Card.wrn"
},
{
"name": "Carousel",
"mount": "Carousel",
"category": "base",
"purpose": "Theme-aware, responsive carousel component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "activeIndex",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "slidesPerView",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"0.75rem\"",
"options": []
},
{
"name": "showPagination",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "isAutoPlay",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "autoplayInterval",
"type": "number",
"required": false,
"default": "4000",
"options": []
},
{
"name": "isInfiniteLoop",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "isRTL",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "isCentered",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "isDraggable",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "isAutoHeight",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "isSnap",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "showCounter",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "thumbnails",
"type": "string",
"required": false,
"default": "\"none\"",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"Content carousel\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "initialize",
"payloadType": "{ index: number; count: number }"
},
{
"name": "change",
"payloadType": "{ index: number; previousIndex: number; item: string | number | boolean | null | object; reason: string | boolean }"
},
{
"name": "previous",
"payloadType": "{ index: number; previousIndex: number; item: string | number | boolean | null | object }"
},
{
"name": "next",
"payloadType": "{ index: number; previousIndex: number; item: string | number | boolean | null | object }"
},
{
"name": "play",
"payloadType": "{ index: number; interval: number }"
},
{
"name": "pause",
"payloadType": "{ index: number }"
},
{
"name": "reachStart",
"payloadType": "{ index: number }"
},
{
"name": "reachEnd",
"payloadType": "{ index: number }"
},
{
"name": "dragStart",
"payloadType": "{ index: number; x: null }"
},
{
"name": "dragEnd",
"payloadType": "{ index: number; distance: number }"
}
],
"events": [
"initialize",
"change",
"previous",
"next",
"play",
"pause",
"reachStart",
"reachEnd",
"dragStart",
"dragEnd"
],
"source": "components/Carousel.wrn"
},
{
"name": "Chart",
"mount": "Chart",
"category": "integrations",
"purpose": "Theme-aware, responsive chart component.",
"props": [
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Chart\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "valueKey",
"type": "string",
"required": false,
"default": "\"value\"",
"options": []
},
{
"name": "labelKey",
"type": "string",
"required": false,
"default": "\"label\"",
"options": []
},
{
"name": "height",
"type": "number",
"required": false,
"default": "240",
"options": []
},
{
"name": "showLegend",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showValues",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"bar\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ item: object; index: number; sourceEvent?: Event }"
},
{
"name": "dataPointClick",
"payloadType": "{ item: object; index: number; sourceEvent?: Event }"
},
{
"name": "legendToggle",
"payloadType": "{ item: object; index: number; hidden: boolean; sourceEvent?: Event }"
}
],
"events": ["select", "dataPointClick", "legendToggle"],
"source": "components/Chart.wrn"
},
{
"name": "ChatBubble",
"mount": "ChatBubble",
"category": "base",
"purpose": "Theme-aware, responsive chat bubble component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "oneSided",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "showAvatars",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "showMetadata",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"Conversation\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "action",
"payloadType": "{ action: boolean; item: string | number | boolean | null | object; index: number }"
},
{
"name": "messageClick",
"payloadType": "{ item: string | number | boolean | null | object; index: number; direction: string }"
},
{
"name": "avatarClick",
"payloadType": "{ item: string | number | boolean | null | object; index: number; direction: string }"
},
{
"name": "linkClick",
"payloadType": "{ link: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number }"
}
],
"events": ["action", "messageClick", "avatarClick", "linkClick"],
"source": "components/ChatBubble.wrn"
},
{
"name": "Checkbox",
"mount": "Checkbox",
"category": "forms",
"purpose": "Theme-aware, responsive checkbox component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Checkbox\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"on\"",
"options": []
},
{
"name": "values",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "options",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "checked",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "indeterminate",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"vertical\"",
"options": []
},
{
"name": "card",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "rightAligned",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "list",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "invalid",
"payloadType": "{ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "focus", "blur", "invalid"],
"source": "components/checkbox.wrn"
},
{
"name": "Clipboard",
"mount": "Clipboard",
"category": "integrations",
"purpose": "Theme-aware, responsive clipboard component.",
"props": [
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Copy\"",
"options": []
},
{
"name": "copiedLabel",
"type": "string",
"required": false,
"default": "\"Copied\"",
"options": []
},
{
"name": "errorLabel",
"type": "string",
"required": false,
"default": "\"Copy failed\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Clipboard\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "code",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "copy",
"payloadType": "{ value: string; sourceEvent?: Event }"
},
{
"name": "success",
"payloadType": "{ value: string; sourceEvent?: Event }"
},
{
"name": "error",
"payloadType": "{ error: Error | string; value: string; sourceEvent?: Event }"
}
],
"events": ["copy", "success", "error"],
"source": "components/Clipboard.wrn"
},
{
"name": "Collapse",
"mount": "Collapse",
"category": "base",
"purpose": "Theme-aware, responsive collapse component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "multiple",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "mode",
"type": "string",
"required": false,
"default": "\"panel\"",
"options": []
},
{
"name": "initialOpenIndexes",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"Collapsible content\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "toggle",
"payloadType": "{ index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] }"
},
{
"name": "open",
"payloadType": "{ index: number; item: string | number | boolean | null | object }"
},
{
"name": "close",
"payloadType": "{ index: number; item: string | number | boolean | null | object }"
}
],
"events": ["toggle", "open", "close"],
"source": "components/Collapse.wrn"
},
{
"name": "ColorPicker",
"mount": "ColorPicker",
"category": "forms",
"purpose": "Theme-aware, responsive color picker component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Color\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"#2563eb\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "focus", "blur"],
"source": "components/ColorPicker.wrn"
},
{
"name": "Columns",
"mount": "Columns",
"category": "layout",
"purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Columns.wrn"
},
{
"name": "ComboBox",
"mount": "ComboBox",
"category": "advanced-forms",
"purpose": "Editable autocomplete combobox with local and remote suggestions.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"ComboBox\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "options",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "groups",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"Search or select an option\"",
"options": []
},
{
"name": "searchPlaceholder",
"type": "string",
"required": false,
"default": "\"Start typing…\"",
"options": []
},
{
"name": "clearable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "allowCustomValue",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "invalid",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "validationMessage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "helpText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "loading",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "loadingLabel",
"type": "string",
"required": false,
"default": "\"Loading suggestions…\"",
"options": []
},
{
"name": "emptyLabel",
"type": "string",
"required": false,
"default": "\"No matching options\"",
"options": []
},
{
"name": "clearLabel",
"type": "string",
"required": false,
"default": "\"Clear value\"",
"options": []
},
{
"name": "toggleLabel",
"type": "string",
"required": false,
"default": "\"Toggle suggestions\"",
"options": []
},
{
"name": "searchMode",
"type": "string",
"required": false,
"default": "\"contains\"",
"options": []
},
{
"name": "searchFields",
"type": "string",
"required": false,
"default": "\"label,description\"",
"options": []
},
{
"name": "minSearchLength",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "searchResultLimit",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "optionTemplate",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "closeOnSelect",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "fixed",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"bottom\"",
"options": []
},
{
"name": "autocomplete",
"type": "string",
"required": false,
"default": "\"off\"",
"options": []
},
{
"name": "remote",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "remoteUrl",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "remoteQueryParam",
"type": "string",
"required": false,
"default": "\"q\"",
"options": []
},
{
"name": "remoteDebounce",
"type": "number",
"required": false,
"default": "250",
"options": []
},
{
"name": "remoteAutoLoad",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "infinite",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "hasMore",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "page",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "loadMoreLabel",
"type": "string",
"required": false,
"default": "\"Load more\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "search",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "select",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "clear",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "open",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "close",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "load",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "error",
"payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string"
}
],
"events": ["search", "select", "change", "clear", "open", "close", "load", "error"],
"source": "components/Combobox.wrn"
},
{
"name": "Confetti",
"mount": "Confetti",
"category": "integrations",
"purpose": "Theme-aware, responsive confetti component.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Celebrate\"",
"options": []
},
{
"name": "duration",
"type": "number",
"required": false,
"default": "1200",
"options": []
},
{
"name": "count",
"type": "number",
"required": false,
"default": "24",
"options": []
},
{
"name": "autoStart",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "start",
"payloadType": "{ sourceEvent?: Event; duration: number }"
},
{
"name": "complete",
"payloadType": "{ sourceEvent?: Event; duration: number }"
}
],
"events": ["start", "complete"],
"source": "components/Confetti.wrn"
},
{
"name": "Container",
"mount": "Container",
"category": "layout",
"purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "centered",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Container.wrn"
},
{
"name": "ContextMenu",
"mount": "ContextMenu",
"category": "overlays",
"purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.",
"props": [
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "open",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "trigger",
"type": "string",
"required": false,
"default": "\"contextmenu\"",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"pointer\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"raised\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Context menu\"",
"options": []
},
{
"name": "closeOnSelect",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnOutside",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "minWidth",
"type": "string",
"required": false,
"default": "\"14rem\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"20rem\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["trigger", "header", "default", "footer"],
"outputs": [
{
"name": "open",
"payloadType": "{ x: number; y: number; trigger: string; sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ reason: string; sourceEvent: Event }"
},
{
"name": "select",
"payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }"
},
{
"name": "action",
"payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }"
}
],
"events": ["open", "close", "select", "action"],
"source": "components/ContextMenu.wrn"
},
{
"name": "CustomScrollbar",
"mount": "CustomScrollbar",
"category": "layout",
"purpose": "Theme-aware, responsive custom scrollbar component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "axis",
"type": "string",
"required": false,
"default": "\"vertical\"",
"options": []
},
{
"name": "thickness",
"type": "number",
"required": false,
"default": "8",
"options": []
},
{
"name": "maxHeight",
"type": "string",
"required": false,
"default": "\"20rem\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"999px\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/CustomScrollbar.wrn"
},
{
"name": "DataMap",
"mount": "DataMap",
"category": "integrations",
"purpose": "Theme-aware, responsive data map component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Data Map\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
}
],
"events": ["select", "change"],
"source": "components/DataMap.wrn"
},
{
"name": "DataTable",
"mount": "DataTable",
"category": "tables",
"purpose": "Sortable, filterable, paginated data table with row selection.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "columns",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "rows",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "rowKey",
"type": "string",
"required": false,
"default": "\"id\"",
"options": []
},
{
"name": "remote",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "loadingLabel",
"type": "string",
"required": false,
"default": "\"Loading\"",
"options": []
},
{
"name": "errorLabel",
"type": "string",
"required": false,
"default": "\"Could not load this data\"",
"options": []
},
{
"name": "retryLabel",
"type": "string",
"required": false,
"default": "\"Try again\"",
"options": []
},
{
"name": "caption",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "searchable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "searchPlaceholder",
"type": "string",
"required": false,
"default": "\"Search\"",
"options": []
},
{
"name": "paginated",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "pageSize",
"type": "number",
"required": false,
"default": "10",
"options": []
},
{
"name": "paginationStyle",
"type": "string",
"required": false,
"default": "\"compact\"",
"options": []
},
{
"name": "pageSizes",
"type": "number[]",
"required": false,
"default": "[10, 25, 50]",
"options": []
},
{
"name": "selectable",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "actions",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "striped",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "bordered",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "gridlines",
"type": "string",
"required": false,
"default": "\"rows\"",
"options": []
},
{
"name": "density",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "emptyLabel",
"type": "string",
"required": false,
"default": "\"No records to show\"",
"options": []
},
{
"name": "noResultsLabel",
"type": "string",
"required": false,
"default": "\"No records match your search\"",
"options": []
},
{
"name": "clearSearchLabel",
"type": "string",
"required": false,
"default": "\"Clear search\"",
"options": []
},
{
"name": "stickyFirstColumn",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "layout",
"type": "string",
"required": false,
"default": "\"rows\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "sort",
"payloadType": "{ key: string; direction: string }"
},
{
"name": "search",
"payloadType": "{ query: string }"
},
{
"name": "pageChange",
"payloadType": "{ page: number; pageSize: number }"
},
{
"name": "select",
"payloadType": "{ selected: Array<string | number>; all: boolean }"
},
{
"name": "change",
"payloadType": "{ page: number; pageSize: number; total: number; query: string; sortKey: string; sortDirection: string }"
},
{
"name": "rowClick",
"payloadType": "{ row: object; sourceEvent: Event }"
},
{
"name": "action",
"payloadType": "{ id: string; selected: Array<string | number>; rows: object[]; sourceEvent: Event }"
},
{
"name": "request",
"payloadType": "{ instanceId: number; page: number; pageSize: number; sortKey: string; sortDirection: string; query: string }"
}
],
"events": [
"sort",
"search",
"pageChange",
"select",
"change",
"rowClick",
"action",
"request"
],
"source": "components/DataTable.wrn"
},
{
"name": "DatePicker",
"mount": "DatePicker",
"category": "base",
"purpose": "Theme-aware, responsive date picker component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Date Picker\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "type",
"type": "string",
"required": false,
"default": "\"date\"",
"options": []
},
{
"name": "locale",
"type": "string",
"required": false,
"default": "\"en-US\"",
"options": []
},
{
"name": "firstDayOfWeek",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "months",
"type": "string",
"required": false,
"default": "[{ label: \"Jan\", value: \"01\" }, { label: \"Feb\", value: \"02\" }, { label: \"Mar\", value: \"03\" }, { label: \"Apr\", value: \"04\" }, { label: \"May\", value: \"05\" }, { label: \"Jun\", value: \"06\" }, { label: \"Jul\", value: \"07\" }, { label: \"Aug\", value: \"08\" }, { label: \"Sep\", value: \"09\" }, { label: \"Oct\", value: \"10\" }, { label: \"Nov\", value: \"11\" }, { label: \"Dec\", value: \"12\" }]",
"options": []
},
{
"name": "days",
"type": "string",
"required": false,
"default": "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]",
"options": []
},
{
"name": "years",
"type": "string",
"required": false,
"default": "[2024, 2025, 2026, 2027, 2028, 2029, 2030]",
"options": []
},
{
"name": "min",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "max",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "step",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "change",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "open",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "focus",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "blur",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "invalid",
"payloadType": "{ name: string; message: string; sourceEvent: Event }"
}
],
"events": ["input", "change", "open", "close", "focus", "blur", "invalid"],
"source": "components/DatePicker.wrn"
},
{
"name": "DeviceFrame",
"mount": "DeviceFrame",
"category": "base",
"purpose": "Theme-aware, responsive device frame component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Device Frame\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "device",
"type": "string",
"required": false,
"default": "\"phone\"",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"portrait\"",
"options": []
},
{
"name": "src",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "srcdoc",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "frameTitle",
"type": "string",
"required": false,
"default": "\"Device preview\"",
"options": []
},
{
"name": "showToolbar",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "allow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "change",
"payloadType": "{ device: string; orientation: string; sourceEvent: Event }"
},
{
"name": "rotate",
"payloadType": "{ device: string; orientation: string; sourceEvent: Event }"
}
],
"events": ["change", "rotate"],
"source": "components/DeviceFrame.wrn"
},
{
"name": "Divider",
"mount": "Divider",
"category": "layout",
"purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"horizontal\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"solid\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [],
"events": [],
"source": "components/Divider.wrn"
},
{
"name": "DragAndDrop",
"mount": "DragAndDrop",
"category": "integrations",
"purpose": "Theme-aware, responsive drag and drop component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Drag And Drop\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "dragStart",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "dragEnd",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "dragEnter",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "dragLeave",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "drop",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
}
],
"events": ["dragStart", "dragEnd", "dragEnter", "dragLeave", "drop", "change"],
"source": "components/DragAndDrop.wrn"
},
{
"name": "Drawer",
"mount": "Drawer",
"category": "overlays",
"purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
"props": [
{
"name": "open",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"right\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Drawer\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Drawer\"",
"options": []
},
{
"name": "closeLabel",
"type": "string",
"required": false,
"default": "\"Close drawer\"",
"options": []
},
{
"name": "showClose",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnBackdrop",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnEscape",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "duration",
"type": "number",
"required": false,
"default": "260",
"options": []
},
{
"name": "overlay",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "scrollable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "triggerLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "triggerIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["trigger", "header", "default", "footer"],
"outputs": [
{
"name": "open",
"payloadType": "{ placement: string; sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ reason: string; placement: string; sourceEvent: Event }"
},
{
"name": "cancel",
"payloadType": "{ placement: string; sourceEvent: Event }"
}
],
"events": ["open", "close", "cancel"],
"source": "components/Drawer.wrn"
},
{
"name": "Dropdown",
"mount": "Dropdown",
"category": "overlays",
"purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.",
"props": [
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "open",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Open menu\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "showChevron",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "menuLabel",
"type": "string",
"required": false,
"default": "\"Dropdown menu\"",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"bottom-start\"",
"options": []
},
{
"name": "width",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"raised\"",
"options": []
},
{
"name": "closeOnSelect",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnOutside",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "emptyLabel",
"type": "string",
"required": false,
"default": "\"No menu items\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["trigger", "header", "default", "footer"],
"outputs": [
{
"name": "toggle",
"payloadType": "{ open: boolean; sourceEvent: Event; reason?: object }"
},
{
"name": "open",
"payloadType": "{ sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ reason: string; sourceEvent: Event }"
},
{
"name": "select",
"payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }"
},
{
"name": "action",
"payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }"
}
],
"events": ["toggle", "open", "close", "select", "action"],
"source": "components/Dropdown.wrn"
},
{
"name": "FeatureCard",
"mount": "FeatureCard",
"category": "marketing",
"purpose": "Present one linked feature or service with media, icon, badge, description, and action.",
"props": [
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconStyle",
"type": "string",
"required": false,
"default": "\"soft\"",
"options": []
},
{
"name": "iconSize",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Feature\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "image",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "imageAlt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "imagePosition",
"type": "string",
"required": false,
"default": "\"top\"",
"options": []
},
{
"name": "imageAspect",
"type": "string",
"required": false,
"default": "\"wide\"",
"options": []
},
{
"name": "imageLoading",
"type": "string",
"required": false,
"default": "\"lazy\"",
"options": []
},
{
"name": "href",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "target",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "rel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "external",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"Learn more\"",
"options": []
},
{
"name": "actionIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "showArrow",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "stretchedLink",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "badge",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "badgeColor",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "hover",
"type": "string",
"required": false,
"default": "\"lift\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["media", "icon", "default", "footer"],
"outputs": [],
"events": [],
"source": "components/FeatureCard.wrn"
},
{
"name": "FeatureGrid",
"mount": "FeatureGrid",
"category": "layout",
"purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "3",
"options": []
},
{
"name": "tabletColumns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "mobileColumns",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "minItemWidth",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "equalHeight",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"stretch\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"full\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Features\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/FeatureGrid.wrn"
},
{
"name": "FeatureIconCard",
"mount": "FeatureIconCard",
"category": "marketing",
"purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.",
"props": [
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--sparkles]\"",
"options": []
},
{
"name": "iconSize",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "iconVariant",
"type": "string",
"required": false,
"default": "\"soft\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Feature\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "href",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"Explore\"",
"options": []
},
{
"name": "badge",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "hover",
"type": "string",
"required": false,
"default": "\"lift\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "shadow",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "clickableSurface",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "descriptionTone",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default", "footer"],
"outputs": [],
"events": [],
"source": "components/FeatureIconCard.wrn"
},
{
"name": "FileInput",
"mount": "FileInput",
"category": "forms",
"purpose": "Theme-aware, responsive file input component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"File\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"Choose a file\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--upload]\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "accept",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "multiple",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ files: File[]; name: string; sourceEvent: Event }"
},
{
"name": "change",
"payloadType": "{ files: File[]; name: string; sourceEvent: Event }"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "select",
"payloadType": "{ files: File[]; name: string; sourceEvent: Event }"
},
{
"name": "clear",
"payloadType": "{ name: string; sourceEvent: Event }"
},
{
"name": "invalid",
"payloadType": "{ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "focus", "blur", "select", "clear", "invalid"],
"source": "components/FileInput.wrn"
},
{
"name": "FileUploadProgress",
"mount": "FileUploadProgress",
"category": "base",
"purpose": "Theme-aware, responsive file upload progress component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Progress\"",
"options": []
},
{
"name": "value",
"type": "number",
"required": false,
"default": "50",
"options": []
},
{
"name": "max",
"type": "number",
"required": false,
"default": "100",
"options": []
},
{
"name": "showValue",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "fileName",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "fileSize",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "uploadedSize",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "status",
"type": "string",
"required": false,
"default": "\"uploading\"",
"options": []
},
{
"name": "cancelLabel",
"type": "string",
"required": false,
"default": "\"Cancel upload\"",
"options": []
},
{
"name": "retryLabel",
"type": "string",
"required": false,
"default": "\"Retry upload\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "cancel",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "retry",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "complete",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
}
],
"events": ["cancel", "retry", "complete"],
"source": "components/FileUploadProgress.wrn"
},
{
"name": "Footer",
"mount": "Footer",
"category": "layout",
"purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Footer navigation\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "3",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"compact\"",
"options": []
},
{
"name": "mobileColumns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "mobileCopyrightAlign",
"type": "string",
"required": false,
"default": "\"center\"",
"options": []
},
{
"name": "copyright",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "copyrightKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "translationPrefix",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["pre-footer", "post-footer", "copyright-left", "copyright-right"],
"outputs": [
{
"name": "select",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "action",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["select", "action"],
"source": "components/Footer.wrn"
},
{
"name": "Grid",
"mount": "Grid",
"category": "layout",
"purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "minItemWidth",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Grid.wrn"
},
{
"name": "Hero",
"mount": "Hero",
"category": "marketing",
"purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "eyebrowIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Build something remarkable\"",
"options": []
},
{
"name": "highlight",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "layout",
"type": "string",
"required": false,
"default": "\"split\"",
"options": []
},
{
"name": "visualPosition",
"type": "string",
"required": false,
"default": "\"right\"",
"options": []
},
{
"name": "visualStyle",
"type": "string",
"required": false,
"default": "\"plain\"",
"options": []
},
{
"name": "showDecorations",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "fullBleed",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "visualEyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualTitle",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualDescription",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualImage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualAlt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualItems",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "primaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryTarget",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryTarget",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "tertiaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "tertiaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "tertiaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "tertiaryTarget",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "badges",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "trustItems",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"],
"outputs": [],
"events": [],
"source": "components/Hero.wrn"
},
{
"name": "HeroActions",
"mount": "HeroActions",
"category": "marketing",
"purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.",
"props": [
{
"name": "actions",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"horizontal\"",
"options": []
},
{
"name": "stackOnMobile",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "fullWidthMobile",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/HeroActions.wrn"
},
{
"name": "Image",
"mount": "Image",
"category": "layout",
"purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "src",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "alt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "width",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "height",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "loading",
"type": "string",
"required": false,
"default": "\"lazy\"",
"options": []
},
{
"name": "fit",
"type": "string",
"required": false,
"default": "\"cover\"",
"options": []
},
{
"name": "rounded",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Image.wrn"
},
{
"name": "Input",
"mount": "Input",
"category": "forms",
"purpose": "Theme-aware, responsive input component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Input\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "type",
"type": "string",
"required": false,
"default": "\"text\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "autocomplete",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inputmode",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "minlength",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "maxlength",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "pattern",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "min",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "max",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "step",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "change",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "invalid",
"payloadType": "{ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event }"
},
{
"name": "keydown",
"payloadType": "{ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }"
},
{
"name": "keyup",
"payloadType": "{ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }"
}
],
"events": ["input", "change", "focus", "blur", "invalid", "keydown", "keyup"],
"source": "components/input.wrn"
},
{
"name": "InputGroup",
"mount": "InputGroup",
"category": "forms",
"purpose": "Theme-aware, responsive input group component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Input group\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "type",
"type": "string",
"required": false,
"default": "\"text\"",
"options": []
},
{
"name": "startText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "endText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "submit",
"payloadType": "{ value: string | number | boolean | null | object; name: string; sourceEvent: Event }"
},
{
"name": "action",
"payloadType": "{ name: string; sourceEvent: Event }"
}
],
"events": ["input", "change", "focus", "blur", "submit", "action"],
"source": "components/InputGroup.wrn"
},
{
"name": "InputNumber",
"mount": "InputNumber",
"category": "advanced-forms",
"purpose": "Theme-aware, responsive input number component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"quantity\"",
"options": []
},
{
"name": "value",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "min",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "max",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "step",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "precision",
"type": "string",
"required": false,
"default": "\"auto\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "helpText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "invalid",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "prefix",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "suffix",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "autocomplete",
"type": "string",
"required": false,
"default": "\"off\"",
"options": []
},
{
"name": "inputMode",
"type": "string",
"required": false,
"default": "\"decimal\"",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "inputDisabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "buttonsDisabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "allowInput",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "keyboard",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "wheel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "clamp",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "showButtons",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showValidationMessage",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "decrementLabel",
"type": "string",
"required": false,
"default": "\"Decrease value\"",
"options": []
},
{
"name": "incrementLabel",
"type": "string",
"required": false,
"default": "\"Increase value\"",
"options": []
},
{
"name": "controlsLabel",
"type": "string",
"required": false,
"default": "\"Quantity controls\"",
"options": []
},
{
"name": "requiredMessage",
"type": "string",
"required": false,
"default": "\"A value is required.\"",
"options": []
},
{
"name": "minMessage",
"type": "string",
"required": false,
"default": "\"Value is below the minimum.\"",
"options": []
},
{
"name": "maxMessage",
"type": "string",
"required": false,
"default": "\"Value is above the maximum.\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "increment",
"payloadType": "{ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "decrement",
"payloadType": "{ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "increment", "decrement"],
"source": "components/InputNumber.wrn"
},
{
"name": "Kbd",
"mount": "Kbd",
"category": "layout",
"purpose": "Theme-aware, responsive kbd component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"K\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Kbd.wrn"
},
{
"name": "LayoutSplitter",
"mount": "LayoutSplitter",
"category": "layout",
"purpose": "Theme-aware, responsive layout splitter component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "number",
"required": false,
"default": "50",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"horizontal\"",
"options": []
},
{
"name": "minSize",
"type": "number",
"required": false,
"default": "15",
"options": []
},
{
"name": "step",
"type": "number",
"required": false,
"default": "5",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Resize panels\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["start", "end", "default"],
"outputs": [
{
"name": "sizeChange",
"payloadType": "{ size: number }"
}
],
"events": ["sizeChange"],
"source": "components/LayoutSplitter.wrn"
},
{
"name": "LegendIndicator",
"mount": "LegendIndicator",
"category": "base",
"purpose": "Theme-aware, responsive legend indicator component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Legend Indicator\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "toggle",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "select",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
}
],
"events": ["toggle", "select"],
"source": "components/LegendIndicator.wrn"
},
{
"name": "Link",
"mount": "Link",
"category": "layout",
"purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Link\"",
"options": []
},
{
"name": "href",
"type": "string",
"required": false,
"default": "\"#\"",
"options": []
},
{
"name": "target",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "rel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "underline",
"type": "string",
"required": false,
"default": "\"hover\"",
"options": []
},
{
"name": "external",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Link.wrn"
},
{
"name": "List",
"mount": "List",
"category": "base",
"purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"List\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["select"],
"source": "components/List.wrn"
},
{
"name": "ListGroup",
"mount": "ListGroup",
"category": "base",
"purpose": "Theme-aware, responsive list group component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"List Group\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
}
],
"events": ["select", "change"],
"source": "components/ListGroup.wrn"
},
{
"name": "Map",
"mount": "Map",
"category": "integrations",
"purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Map\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "markerClick",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "select",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "zoom",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["markerClick", "select", "zoom"],
"source": "components/Map.wrn"
},
{
"name": "MarketingSectionHeader",
"mount": "MarketingSectionHeader",
"category": "marketing",
"purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.",
"props": [
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"split\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionExternal",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["icon", "actions", "default"],
"outputs": [],
"events": [],
"source": "components/MarketingSectionHeader.wrn"
},
{
"name": "Marquee",
"mount": "Marquee",
"category": "base",
"purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Marquee\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "pause",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "resume",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["pause", "resume"],
"source": "components/Marquee.wrn"
},
{
"name": "MegaMenu",
"mount": "MegaMenu",
"category": "navigation",
"purpose": "Theme-aware, responsive mega menu component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Menu\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "columns",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "rail",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "featured",
"type": "Record<string, unknown>",
"required": false,
"default": "{}",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "density",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "panelWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "panelAlign",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "columnCount",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "openOnHover",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "activeCategory",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--arrow-right]\"",
"options": []
},
{
"name": "footer",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "open",
"payloadType": "{ sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ reason: string }"
},
{
"name": "select",
"payloadType": "{ item: object; value: string }"
},
{
"name": "category",
"payloadType": "{ item: object; value: string; index: number }"
}
],
"events": ["open", "close", "select", "category"],
"source": "components/MegaMenu.wrn"
},
{
"name": "MetricCard",
"mount": "MetricCard",
"category": "data",
"purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Metric\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"0\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconStyle",
"type": "string",
"required": false,
"default": "\"soft\"",
"options": []
},
{
"name": "prefix",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "suffix",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "badge",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "trend",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "trendLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "trendDirection",
"type": "string",
"required": false,
"default": "\"neutral\"",
"options": []
},
{
"name": "progress",
"type": "number",
"required": false,
"default": "-1",
"options": []
},
{
"name": "progressLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "href",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "target",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "rel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "external",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "showArrow",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "selectable",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "hover",
"type": "string",
"required": false,
"default": "\"lift\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default", "footer"],
"outputs": [
{
"name": "select",
"payloadType": "{ label: string; value: string; href: string; sourceEvent: Event }"
},
{
"name": "action",
"payloadType": "{ label: string; value: string; href: string; sourceEvent: Event }"
}
],
"events": ["select", "action"],
"source": "components/MetricCard.wrn"
},
{
"name": "MetricGrid",
"mount": "MetricGrid",
"category": "data",
"purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.",
"props": [
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "4",
"options": []
},
{
"name": "tabletColumns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "mobileColumns",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "equalHeight",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "dividers",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"full\"",
"options": []
},
{
"name": "minItemWidth",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event }"
},
{
"name": "action",
"payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event }"
}
],
"events": ["select", "action"],
"source": "components/MetricGrid.wrn"
},
{
"name": "Modal",
"mount": "Modal",
"category": "overlays",
"purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.",
"props": [
{
"name": "open",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Modal\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Modal dialog\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"center\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "showClose",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeLabel",
"type": "string",
"required": false,
"default": "\"Close modal\"",
"options": []
},
{
"name": "closeOnBackdrop",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnEscape",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnCancel",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnConfirm",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "showFooter",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "cancelLabel",
"type": "string",
"required": false,
"default": "\"Cancel\"",
"options": []
},
{
"name": "cancelIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "confirmLabel",
"type": "string",
"required": false,
"default": "\"Confirm\"",
"options": []
},
{
"name": "confirmIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "confirmDisabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "confirmLoading",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "destructive",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "triggerLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "triggerIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "scrollable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "scrollBehavior",
"type": "string",
"required": false,
"default": "\"inside\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["trigger", "header", "default", "footer"],
"outputs": [
{
"name": "open",
"payloadType": "{ sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ reason: string; sourceEvent: Event }"
},
{
"name": "cancel",
"payloadType": "{ sourceEvent: Event }"
},
{
"name": "confirm",
"payloadType": "{ sourceEvent: Event }"
}
],
"events": ["open", "close", "cancel", "confirm"],
"source": "components/Modal.wrn"
},
{
"name": "Nav",
"mount": "Nav",
"category": "navigation",
"purpose": "Theme-aware, responsive nav component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "active",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"horizontal\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Main\"",
"options": []
},
{
"name": "collapsible",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "toggleLabel",
"type": "string",
"required": false,
"default": "\"Menu\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ item: object; value: string }"
}
],
"events": ["select"],
"source": "components/Nav.wrn"
},
{
"name": "Navbar",
"mount": "Navbar",
"category": "navigation",
"purpose": "Theme-aware, responsive navbar component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Primary navigation\"",
"options": []
},
{
"name": "topbarLabel",
"type": "string",
"required": false,
"default": "\"Utility navigation\"",
"options": []
},
{
"name": "brand",
"type": "Record<string, unknown>",
"required": false,
"default": "{}",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "actions",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "active",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "sticky",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "floating",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "startFloating",
"type": "string",
"required": false,
"default": "\"0px\"",
"options": []
},
{
"name": "openOnHover",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"full\"",
"options": []
},
{
"name": "mobileLabel",
"type": "string",
"required": false,
"default": "\"Toggle navigation\"",
"options": []
},
{
"name": "collapseAt",
"type": "string",
"required": false,
"default": "\"900px\"",
"options": []
},
{
"name": "mobilePanel",
"type": "string",
"required": false,
"default": "\"content\"",
"options": []
},
{
"name": "mobileUtilitiesPosition",
"type": "string",
"required": false,
"default": "\"header\"",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "contentGutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "flushMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "translationPrefix",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["topbar", "actions", "utilities"],
"outputs": [
{
"name": "toggle",
"payloadType": "{ open: boolean }"
},
{
"name": "open",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "close",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "select",
"payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean; level: string }"
},
{
"name": "action",
"payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean }"
}
],
"events": ["toggle", "open", "close", "select", "action"],
"source": "components/Navbar.wrn"
},
{
"name": "PageHeader",
"mount": "PageHeader",
"category": "marketing",
"purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"page-title\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "centered",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "compact",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "showBreadcrumbs",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "breadcrumbs",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "breadcrumbParent",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "breadcrumbParentHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "breadcrumbCurrent",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "borderBottom",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["meta", "actions", "default"],
"outputs": [],
"events": [],
"source": "components/PageHeader.wrn"
},
{
"name": "Pagination",
"mount": "Pagination",
"category": "navigation",
"purpose": "Theme-aware, responsive pagination component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "page",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "pageSize",
"type": "number",
"required": false,
"default": "10",
"options": []
},
{
"name": "total",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"compact\"",
"options": []
},
{
"name": "siblingCount",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "showSummary",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Pagination\"",
"options": []
},
{
"name": "previousLabel",
"type": "string",
"required": false,
"default": "\"Previous\"",
"options": []
},
{
"name": "nextLabel",
"type": "string",
"required": false,
"default": "\"Next\"",
"options": []
},
{
"name": "hrefTemplate",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "change",
"payloadType": "{ page: number; pageSize: number }"
},
{
"name": "previous",
"payloadType": "{ page: number }"
},
{
"name": "next",
"payloadType": "{ page: number }"
}
],
"events": ["change", "previous", "next"],
"source": "components/Pagination.wrn"
},
{
"name": "PinInput",
"mount": "PinInput",
"category": "advanced-forms",
"purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Verification code\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"pin\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "length",
"type": "number",
"required": false,
"default": "4",
"options": []
},
{
"name": "pattern",
"type": "string",
"required": false,
"default": "\"[0-9]\"",
"options": []
},
{
"name": "type",
"type": "string",
"required": false,
"default": "\"text\"",
"options": []
},
{
"name": "inputMode",
"type": "string",
"required": false,
"default": "\"numeric\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"○\"",
"options": []
},
{
"name": "autocomplete",
"type": "string",
"required": false,
"default": "\"one-time-code\"",
"options": []
},
{
"name": "masked",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "autoFocus",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "autoSubmit",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "allowPaste",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "clearable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "clearLabel",
"type": "string",
"required": false,
"default": "\"Clear code\"",
"options": []
},
{
"name": "separator",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "groupSize",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "helpText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "invalid",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "validationMessage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "complete",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "paste",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "clear",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "error",
"payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string"
}
],
"events": ["input", "change", "complete", "paste", "clear", "error"],
"source": "components/PinInput.wrn"
},
{
"name": "Popover",
"mount": "Popover",
"category": "overlays",
"purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.",
"props": [
{
"name": "open",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "triggerLabel",
"type": "string",
"required": false,
"default": "\"Open popover\"",
"options": []
},
{
"name": "triggerIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"bottom-start\"",
"options": []
},
{
"name": "width",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"raised\"",
"options": []
},
{
"name": "showArrow",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showClose",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "closeLabel",
"type": "string",
"required": false,
"default": "\"Close popover\"",
"options": []
},
{
"name": "closeOnOutside",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeOnEscape",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "actionLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "actionIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "closeOnAction",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["trigger", "header", "default", "footer"],
"outputs": [
{
"name": "toggle",
"payloadType": "{ open: boolean; sourceEvent: Event; reason?: object }"
},
{
"name": "open",
"payloadType": "{ sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ reason: string; sourceEvent: Event }"
},
{
"name": "action",
"payloadType": "{ href: string; sourceEvent: Event }"
}
],
"events": ["toggle", "open", "close", "action"],
"source": "components/Popover.wrn"
},
{
"name": "PortalDashboard",
"mount": "PortalDashboard",
"category": "core",
"purpose": "Reusable portal dashboard component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"Overview\"",
"options": []
},
{
"name": "eyebrowKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Dashboard\"",
"options": []
},
{
"name": "titleKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "descriptionKey",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "userName",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "metrics",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "actions",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "updates",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "tasks",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["hero-action"],
"outputs": [
{
"name": "action",
"payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean; index: number }"
},
{
"name": "navigate",
"payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean; index: number }"
}
],
"events": ["action", "navigate"],
"source": "components/PortalDashboard.wrn"
},
{
"name": "PreferenceSwitcher",
"mount": "PreferenceSwitcher",
"category": "core",
"purpose": "Reusable preference switcher component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "themeLabel",
"type": "string",
"required": false,
"default": "\"Theme\"",
"options": []
},
{
"name": "colorLabel",
"type": "string",
"required": false,
"default": "\"Accent color\"",
"options": []
},
{
"name": "languageLabel",
"type": "string",
"required": false,
"default": "\"Language\"",
"options": []
},
{
"name": "languages",
"type": "string",
"required": false,
"default": "[",
"options": []
},
{
"name": "colors",
"type": "string",
"required": false,
"default": "[",
"options": []
},
{
"name": "compact",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "iconOnly",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "themeIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--sun-moon]\"",
"options": []
},
{
"name": "colorIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--palette]\"",
"options": []
},
{
"name": "languageIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--languages]\"",
"options": []
},
{
"name": "panelPlacement",
"type": "string",
"required": false,
"default": "\"bottom-end\"",
"options": []
},
{
"name": "mobilePanel",
"type": "string",
"required": false,
"default": "\"dropdown\"",
"options": []
},
{
"name": "showCurrentLanguage",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "theme",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "color",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "language",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
}
],
"events": ["theme", "color", "language"],
"source": "components/PreferenceSwitcher.wrn"
},
{
"name": "Progress",
"mount": "Progress",
"category": "base",
"purpose": "Theme-aware, responsive progress component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Progress\"",
"options": []
},
{
"name": "value",
"type": "number",
"required": false,
"default": "50",
"options": []
},
{
"name": "max",
"type": "number",
"required": false,
"default": "100",
"options": []
},
{
"name": "showValue",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [],
"events": [],
"source": "components/progress.wrn"
},
{
"name": "PublicPageShell",
"mount": "PublicPageShell",
"category": "layout",
"purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.",
"props": [
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"full\"",
"options": []
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "headerOffset",
"type": "string",
"required": false,
"default": "\"none\"",
"options": []
},
{
"name": "background",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "overflow",
"type": "string",
"required": false,
"default": "\"clip\"",
"options": []
},
{
"name": "minHeight",
"type": "string",
"required": false,
"default": "\"screen\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["before", "default", "after"],
"outputs": [],
"events": [],
"source": "components/PublicPageShell.wrn"
},
{
"name": "Radio",
"mount": "Radio",
"category": "forms",
"purpose": "Theme-aware, responsive radio component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Radio\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"on\"",
"options": []
},
{
"name": "options",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "checked",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"vertical\"",
"options": []
},
{
"name": "card",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "rightAligned",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "list",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "invalid",
"payloadType": "{ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "focus", "blur", "invalid"],
"source": "components/radio.wrn"
},
{
"name": "RangeSlider",
"mount": "RangeSlider",
"category": "forms",
"purpose": "Theme-aware, responsive range slider component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Range\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "value",
"type": "number",
"required": false,
"default": "50",
"options": []
},
{
"name": "min",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "max",
"type": "number",
"required": false,
"default": "100",
"options": []
},
{
"name": "step",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "showValue",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showBounds",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showSteps",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "marks",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "({ value: number; name: string; sourceEvent: Event }) | ({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])"
},
{
"name": "change",
"payloadType": "({ value: number; name: string; sourceEvent: Event }) | ({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "focus", "blur"],
"source": "components/RangeSlider.wrn"
},
{
"name": "Rating",
"mount": "Rating",
"category": "base",
"purpose": "Theme-aware, responsive rating component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Rating\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
}
],
"events": ["input", "change"],
"source": "components/Rating.wrn"
},
{
"name": "Scrollspy",
"mount": "Scrollspy",
"category": "navigation",
"purpose": "Theme-aware, responsive scrollspy component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "active",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"On this page\"",
"options": []
},
{
"name": "heading",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "sticky",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "topOffset",
"type": "string",
"required": false,
"default": "\"6rem\"",
"options": []
},
{
"name": "sectionOffset",
"type": "string",
"required": false,
"default": "\"7rem\"",
"options": []
},
{
"name": "collapseAt",
"type": "string",
"required": false,
"default": "\"800px\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "change",
"payloadType": "{ href: string; label: string }"
}
],
"events": ["change"],
"source": "components/Scrollspy.wrn"
},
{
"name": "SearchBox",
"mount": "SearchBox",
"category": "forms",
"purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Search Box\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "type",
"type": "string",
"required": false,
"default": "\"search\"",
"options": []
},
{
"name": "min",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "max",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "step",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "search",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "clear",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["search", "clear"],
"source": "components/SearchBox.wrn"
},
{
"name": "Section",
"mount": "Section",
"category": "layout",
"purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.",
"props": [
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "spacing",
"type": "string",
"required": false,
"default": "\"lg\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "borderTop",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "borderBottom",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Section.wrn"
},
{
"name": "SectionHeader",
"mount": "SectionHeader",
"category": "layout",
"purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.",
"props": [
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "headingLevel",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"3xl\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["icon", "default", "actions"],
"outputs": [],
"events": [],
"source": "components/SectionHeader.wrn"
},
{
"name": "Select",
"mount": "Select",
"category": "forms",
"purpose": "Theme-aware, responsive select component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Select\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "values",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "options",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"Select an option\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "multiple",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "open",
"payloadType": "{ name: string; sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ name: string; sourceEvent: Event }"
},
{
"name": "invalid",
"payloadType": "{ name: string; message: string; sourceEvent: Event }"
}
],
"events": ["input", "change", "focus", "blur", "open", "close", "invalid"],
"source": "components/select.wrn"
},
{
"name": "Sidebar",
"mount": "Sidebar",
"category": "navigation",
"purpose": "Theme-aware, responsive sidebar component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Sidebar\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "active",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "mobileLabel",
"type": "string",
"required": false,
"default": "\"Open navigation\"",
"options": []
},
{
"name": "drawerTitle",
"type": "string",
"required": false,
"default": "\"Navigation\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default", "drawer"],
"outputs": [
{
"name": "toggle",
"payloadType": "{ open: boolean }"
},
{
"name": "open",
"payloadType": "{ sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ source: string }"
},
{
"name": "select",
"payloadType": "{ item: object; value: string; level: number }"
}
],
"events": ["toggle", "open", "close", "select"],
"source": "components/Sidebar.wrn"
},
{
"name": "Skeleton",
"mount": "Skeleton",
"category": "base",
"purpose": "Theme-aware, responsive skeleton component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Loading\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "lines",
"type": "number",
"required": false,
"default": "3",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [],
"events": [],
"source": "components/skeleton.wrn"
},
{
"name": "Spinner",
"mount": "Spinner",
"category": "base",
"purpose": "Theme-aware, responsive spinner component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Loading\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "lines",
"type": "number",
"required": false,
"default": "3",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [],
"events": [],
"source": "components/spinner.wrn"
},
{
"name": "SplitHero",
"mount": "SplitHero",
"category": "marketing",
"purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "eyebrowIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--sparkles]\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"A better digital experience\"",
"options": []
},
{
"name": "highlight",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "primaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryLabel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "secondaryIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualPosition",
"type": "string",
"required": false,
"default": "\"right\"",
"options": []
},
{
"name": "reverse",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "ratio",
"type": "string",
"required": false,
"default": "\"balanced\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"left\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "fullBleed",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "contentGutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "flushMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "titleSize",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "titleMaxWidth",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "descriptionWeight",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobileTitleSize",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobileStack",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "backgroundImage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualImage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualAlt",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualEyebrow",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualTitle",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualDescription",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "visualItems",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "visualStyle",
"type": "string",
"required": false,
"default": "\"panel\"",
"options": []
},
{
"name": "trustItems",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default", "actions", "trust", "visual"],
"outputs": [],
"events": [],
"source": "components/SplitHero.wrn"
},
{
"name": "StatsBar",
"mount": "StatsBar",
"category": "data",
"purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.",
"props": [
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "4",
"options": []
},
{
"name": "compact",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "dividers",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "icons",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"raised\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "shadow",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "outerSpacing",
"type": "string",
"required": false,
"default": "\"none\"",
"options": []
},
{
"name": "mobileColumns",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [],
"events": [],
"source": "components/StatsBar.wrn"
},
{
"name": "Stepper",
"mount": "Stepper",
"category": "navigation",
"purpose": "Theme-aware, responsive stepper component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "steps",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "active",
"type": "number",
"required": false,
"default": "0",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"horizontal\"",
"options": []
},
{
"name": "clickable",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Progress\"",
"options": []
},
{
"name": "showPanel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "controls",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "allowSkip",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "nextDisabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "backLabel",
"type": "string",
"required": false,
"default": "\"Back\"",
"options": []
},
{
"name": "nextLabel",
"type": "string",
"required": false,
"default": "\"Next\"",
"options": []
},
{
"name": "skipLabel",
"type": "string",
"required": false,
"default": "\"Skip\"",
"options": []
},
{
"name": "finishLabel",
"type": "string",
"required": false,
"default": "\"Finish\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["step-{index}", "panel-{index}", "default"],
"outputs": [
{
"name": "change",
"payloadType": "{ index: number; step: object }"
},
{
"name": "back",
"payloadType": "{ index: number; step: object }"
},
{
"name": "next",
"payloadType": "{ index: number; step: object }"
},
{
"name": "skip",
"payloadType": "{ index: number; step: object }"
},
{
"name": "finish",
"payloadType": "{ index: number; step: object }"
}
],
"events": ["change", "back", "next", "skip", "finish"],
"source": "components/Stepper.wrn"
},
{
"name": "StrongPassword",
"mount": "StrongPassword",
"category": "advanced-forms",
"purpose": "Theme-aware, responsive strong password component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Password\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"password\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"Create a strong password\"",
"options": []
},
{
"name": "autocomplete",
"type": "string",
"required": false,
"default": "\"new-password\"",
"options": []
},
{
"name": "minLength",
"type": "number",
"required": false,
"default": "8",
"options": []
},
{
"name": "specialCharactersSet",
"type": "string",
"required": false,
"default": "\"!@#$%^&*()_+-=[]{}|;:,.<>?\"",
"options": []
},
{
"name": "requireLowercase",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "requireUppercase",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "requireNumber",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "requireSpecialCharacter",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showRequirements",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "presentation",
"type": "string",
"required": false,
"default": "\"inline\"",
"options": []
},
{
"name": "hintText",
"type": "string",
"required": false,
"default": "\"Use a unique password you do not use elsewhere.\"",
"options": []
},
{
"name": "emptyLabel",
"type": "string",
"required": false,
"default": "\"Enter a password\"",
"options": []
},
{
"name": "weakLabel",
"type": "string",
"required": false,
"default": "\"Weak\"",
"options": []
},
{
"name": "fairLabel",
"type": "string",
"required": false,
"default": "\"Fair\"",
"options": []
},
{
"name": "goodLabel",
"type": "string",
"required": false,
"default": "\"Good\"",
"options": []
},
{
"name": "strongLabel",
"type": "string",
"required": false,
"default": "\"Strong\"",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "invalid",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "validationMessage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "showLabel",
"type": "string",
"required": false,
"default": "\"Show password\"",
"options": []
},
{
"name": "hideLabel",
"type": "string",
"required": false,
"default": "\"Hide password\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value: string; score: number; maximumScore: number; percent: number; level: string }"
},
{
"name": "change",
"payloadType": "{ value: string; score: number; maximumScore: number; percent: number; level: string }"
},
{
"name": "strength",
"payloadType": "{ value: string; score: number; maximumScore: number; percent: number; level: string }"
}
],
"events": ["input", "change", "strength"],
"source": "components/StrongPassword.wrn"
},
{
"name": "StyledIcon",
"mount": "StyledIcon",
"category": "base",
"purpose": "Theme-aware, responsive styled icon component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Styled Icon\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/StyledIcon.wrn"
},
{
"name": "Switch",
"mount": "Switch",
"category": "forms",
"purpose": "Theme-aware, responsive switch component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Switch\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"on\"",
"options": []
},
{
"name": "checked",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "focus", "blur"],
"source": "components/switch.wrn"
},
{
"name": "Tabs",
"mount": "Tabs",
"category": "navigation",
"purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "active",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "orientation",
"type": "string",
"required": false,
"default": "\"horizontal\"",
"options": []
},
{
"name": "mode",
"type": "string",
"required": false,
"default": "\"client\"",
"options": []
},
{
"name": "param",
"type": "string",
"required": false,
"default": "\"tab\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Tabs\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["panel-{valueOf(item, index)}", "default"],
"outputs": [
{
"name": "change",
"payloadType": "{ value: string; item: object; index: number }"
},
{
"name": "select",
"payloadType": "{ value: string; item: object; index: number }"
}
],
"events": ["change", "select"],
"source": "components/Tabs.wrn"
},
{
"name": "TextLink",
"mount": "TextLink",
"category": "marketing",
"purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Learn more\"",
"options": []
},
{
"name": "href",
"type": "string",
"required": false,
"default": "\"#\"",
"options": []
},
{
"name": "target",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "rel",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "external",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "showArrow",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "underline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "click",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["click", "focus", "blur"],
"source": "components/TextLink.wrn"
},
{
"name": "Textarea",
"mount": "Textarea",
"category": "forms",
"purpose": "Theme-aware, responsive textarea component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Textarea\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"start\"",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "rows",
"type": "number",
"required": false,
"default": "5",
"options": []
},
{
"name": "resize",
"type": "string",
"required": false,
"default": "\"vertical\"",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "minlength",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "maxlength",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "invalid",
"payloadType": "{ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event }"
}
],
"events": ["input", "change", "focus", "blur", "invalid"],
"source": "components/textarea.wrn"
},
{
"name": "TimePicker",
"mount": "TimePicker",
"category": "forms",
"purpose": "Theme-aware, responsive time picker component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Time\"",
"options": []
},
{
"name": "hiddenLabel",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"normal\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--clock-3]\"",
"options": []
},
{
"name": "iconPosition",
"type": "string",
"required": false,
"default": "\"end\"",
"options": []
},
{
"name": "helperText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "error",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "min",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "max",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "step",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "format",
"type": "string",
"required": false,
"default": "\"24\"",
"options": []
},
{
"name": "minuteStep",
"type": "number",
"required": false,
"default": "5",
"options": []
},
{
"name": "hours",
"type": "string",
"required": false,
"default": "[\"00\", \"01\", \"02\", \"03\", \"04\", \"05\", \"06\", \"07\", \"08\", \"09\", \"10\", \"11\", \"12\", \"13\", \"14\", \"15\", \"16\", \"17\", \"18\", \"19\", \"20\", \"21\", \"22\", \"23\"]",
"options": []
},
{
"name": "minutes",
"type": "string",
"required": false,
"default": "[\"00\", \"05\", \"10\", \"15\", \"20\", \"25\", \"30\", \"35\", \"40\", \"45\", \"50\", \"55\"]",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "change",
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
},
{
"name": "focus",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "blur",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "open",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ value: string; name: string; sourceEvent: Event }"
},
{
"name": "invalid",
"payloadType": "{ name: string; message: string; sourceEvent: Event }"
}
],
"events": ["input", "change", "focus", "blur", "open", "close", "invalid"],
"source": "components/TimePicker.wrn"
},
{
"name": "Timeline",
"mount": "Timeline",
"category": "base",
"purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Timeline\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["select"],
"source": "components/Timeline.wrn"
},
{
"name": "Toaster",
"mount": "Toaster",
"category": "core",
"purpose": "Reusable toaster component.",
"props": [
{
"name": "color",
"type": "string",
"required": false,
"default": "\"info\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "position",
"type": "string",
"required": false,
"default": "\"bottom-right\"",
"options": []
},
{
"name": "duration",
"type": "number",
"required": false,
"default": "4500",
"options": []
},
{
"name": "max",
"type": "number",
"required": false,
"default": "4",
"options": []
},
{
"name": "pauseOnHover",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showIcon",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "successIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "dangerIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "warningIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "infoIcon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "closable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "showProgress",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "closeLabel",
"type": "string",
"required": false,
"default": "\"Dismiss notification\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "show",
"payloadType": "{ id: number; message: string; tone: string }"
},
{
"name": "dismiss",
"payloadType": "{ id: number; reason: string }"
},
{
"name": "action",
"payloadType": "{ id: number; sourceEvent: Event }"
}
],
"events": ["show", "dismiss", "action"],
"source": "components/Toaster.wrn"
},
{
"name": "ToggleCount",
"mount": "ToggleCount",
"category": "advanced-forms",
"purpose": "Theme-aware, responsive toggle count component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"segmented\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"billing-cycle\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"monthly\"",
"options": []
},
{
"name": "firstValue",
"type": "string",
"required": false,
"default": "\"monthly\"",
"options": []
},
{
"name": "firstLabel",
"type": "string",
"required": false,
"default": "\"Monthly\"",
"options": []
},
{
"name": "secondValue",
"type": "string",
"required": false,
"default": "\"annual\"",
"options": []
},
{
"name": "secondLabel",
"type": "string",
"required": false,
"default": "\"Annual\"",
"options": []
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"default": "\"Billing frequency\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "currency",
"type": "string",
"required": false,
"default": "\"$\"",
"options": []
},
{
"name": "suffix",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "firstValueKey",
"type": "string",
"required": false,
"default": "\"monthly\"",
"options": []
},
{
"name": "secondValueKey",
"type": "string",
"required": false,
"default": "\"annual\"",
"options": []
},
{
"name": "emptyValue",
"type": "string",
"required": false,
"default": "\"—\"",
"options": []
},
{
"name": "align",
"type": "string",
"required": false,
"default": "\"end\"",
"options": []
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "animate",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "animationDuration",
"type": "number",
"required": false,
"default": "450",
"options": []
},
{
"name": "animationSteps",
"type": "number",
"required": false,
"default": "18",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "toggle",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["change", "toggle"],
"source": "components/ToggleCount.wrn"
},
{
"name": "TogglePassword",
"mount": "TogglePassword",
"category": "advanced-forms",
"purpose": "Accessible password field with optional show and hide controls.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "label",
"type": "string",
"required": false,
"default": "\"Password\"",
"options": []
},
{
"name": "name",
"type": "string",
"required": false,
"default": "\"password\"",
"options": []
},
{
"name": "value",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "\"Enter your password\"",
"options": []
},
{
"name": "autocomplete",
"type": "string",
"required": false,
"default": "\"current-password\"",
"options": []
},
{
"name": "minlength",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "maxlength",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "pattern",
"type": "string",
"required": false,
"default": "\"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}\"",
"options": []
},
{
"name": "fields",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "visible",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "toggleable",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "toggleMode",
"type": "string",
"required": false,
"default": "\"button\"",
"options": []
},
{
"name": "checkboxLabel",
"type": "string",
"required": false,
"default": "\"Show password\"",
"options": []
},
{
"name": "showLabel",
"type": "string",
"required": false,
"default": "\"Show password\"",
"options": []
},
{
"name": "hideLabel",
"type": "string",
"required": false,
"default": "\"Hide password\"",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "required",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "invalid",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "helpText",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "validationMessage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHint",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "cornerHref",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": [],
"outputs": [
{
"name": "input",
"payloadType": "{ name?: string; value: string | number | boolean | null | object; visible: boolean }"
},
{
"name": "change",
"payloadType": "{ name?: string; value: string | number | boolean | null | object; visible: boolean }"
},
{
"name": "toggle",
"payloadType": "{ visible: boolean }"
}
],
"events": ["input", "change", "toggle"],
"source": "components/TogglePassword.wrn"
},
{
"name": "Tooltip",
"mount": "Tooltip",
"category": "overlays",
"purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state.",
"props": [
{
"name": "id",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "open",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "defaultOpen",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "content",
"type": "string",
"required": false,
"default": "\"Tooltip\"",
"options": []
},
{
"name": "trigger",
"type": "string",
"required": false,
"default": "\"hover\"",
"options": []
},
{
"name": "placement",
"type": "string",
"required": false,
"default": "\"top\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"dark\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"18rem\"",
"options": []
},
{
"name": "offset",
"type": "number",
"required": false,
"default": "10",
"options": []
},
{
"name": "showArrow",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "interactive",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["trigger", "default"],
"outputs": [
{
"name": "toggle",
"payloadType": "{ open: boolean; reason: string; sourceEvent: Event }"
},
{
"name": "open",
"payloadType": "{ reason: string; sourceEvent: Event }"
},
{
"name": "close",
"payloadType": "{ reason: string; sourceEvent: Event }"
}
],
"events": ["toggle", "open", "close"],
"source": "components/tooltip.wrn"
},
{
"name": "TreeView",
"mount": "TreeView",
"category": "base",
"purpose": "Theme-aware, responsive tree view component.",
"props": [
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Tree View\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "valueKey",
"type": "string",
"required": false,
"default": "\"value\"",
"options": []
},
{
"name": "labelKey",
"type": "string",
"required": false,
"default": "\"label\"",
"options": []
},
{
"name": "defaultExpanded",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "selected",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "select",
"payloadType": "{ item: object; value: string; sourceEvent?: Event }"
},
{
"name": "toggle",
"payloadType": "{ item: object; value: string; expanded: boolean; sourceEvent?: Event }"
},
{
"name": "expand",
"payloadType": "{ item: object; value: string; sourceEvent?: Event }"
},
{
"name": "collapse",
"payloadType": "{ item: object; value: string; sourceEvent?: Event }"
}
],
"events": ["select", "toggle", "expand", "collapse"],
"source": "components/TreeView.wrn"
},
{
"name": "Typography",
"mount": "Typography",
"category": "layout",
"purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "gap",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "maxWidth",
"type": "string",
"required": false,
"default": "\"xl\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [],
"events": [],
"source": "components/Typography.wrn"
},
{
"name": "WysiwygEditor",
"mount": "WysiwygEditor",
"category": "integrations",
"purpose": "Theme-aware, responsive wysiwyg editor component.",
"props": [
{
"name": "size",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "color",
"type": "string",
"required": false,
"default": "\"primary\"",
"options": []
},
{
"name": "title",
"type": "string",
"required": false,
"default": "\"Wysiwyg Editor\"",
"options": []
},
{
"name": "description",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "items",
"type": "unknown[]",
"required": false,
"default": "[]",
"options": []
},
{
"name": "variant",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
}
],
"slots": ["default"],
"outputs": [
{
"name": "input",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "change",
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
},
{
"name": "focus",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
},
{
"name": "blur",
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
}
],
"events": ["input", "change", "focus", "blur"],
"source": "components/WysiwygEditor.wrn"
}
]
}