{ "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; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "select", "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "clear", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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": "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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "input", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; 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": "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": "\"Card title\"", "options": [] }, { "name": "subtitle", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "description", "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": "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": "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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "select", "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "clear", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; 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; 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; 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": "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": "copyright", "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; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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": "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 }" } ], "events": [ "open", "close", "select" ], "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", "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": "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": "class", "type": "string", "required": false, "default": "\"\"", "options": [] } ], "slots": [ "topbar", "actions" ], "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": "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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; 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": "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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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": "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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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": "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": "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": "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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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; 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": "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; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" }, { "name": "change", "payloadType": "{ value?: string | number | boolean | null; values?: Array; 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" } ] }