diff --git a/.publish/ai/package.json b/.publish/ai/package.json index ddcb3b39..03238614 100644 --- a/.publish/ai/package.json +++ b/.publish/ai/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ai", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.", "license": "MIT", diff --git a/.publish/authz/package.json b/.publish/authz/package.json index 52f29cba..32c23792 100644 --- a/.publish/authz/package.json +++ b/.publish/authz/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/authz", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/authz — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/cli/package.json b/.publish/cli/package.json index c7958884..3d58a853 100644 --- a/.publish/cli/package.json +++ b/.publish/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/cli", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/cli — part of the WrNexus framework.", "license": "MIT", @@ -28,18 +28,18 @@ "wrnexus": "./dist/index.js" }, "dependencies": { - "@wrnexus/core": "^0.5.14", - "@wrnexus/router": "^0.5.14", - "@wrnexus/csr": "^0.5.14", - "@wrnexus/compiler": "^0.5.14", - "@wrnexus/styles": "^0.5.14", - "@wrnexus/dev-server": "^0.5.14", - "@wrnexus/ui": "^0.5.14", - "@wrnexus/validation": "^0.5.14", - "@wrnexus/i18n": "^0.5.14", - "@wrnexus/db": "^0.5.14", - "@wrnexus/plugin": "^0.5.14", - "@wrnexus/syntax": "^0.5.14" + "@wrnexus/core": "^0.6.0", + "@wrnexus/router": "^0.6.0", + "@wrnexus/csr": "^0.6.0", + "@wrnexus/compiler": "^0.6.0", + "@wrnexus/styles": "^0.6.0", + "@wrnexus/dev-server": "^0.6.0", + "@wrnexus/ui": "^0.6.0", + "@wrnexus/validation": "^0.6.0", + "@wrnexus/i18n": "^0.6.0", + "@wrnexus/db": "^0.6.0", + "@wrnexus/plugin": "^0.6.0", + "@wrnexus/syntax": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json index af9a4871..4addc0c7 100644 --- a/.publish/compiler/package.json +++ b/.publish/compiler/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/compiler", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/compiler — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,8 @@ } }, "dependencies": { - "@wrnexus/syntax": "^0.5.14" + "@wrnexus/syntax": "^0.6.0", + "@wrnexus/store": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/core/package.json b/.publish/core/package.json index 1e57b73d..ea549dc7 100644 --- a/.publish/core/package.json +++ b/.publish/core/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/core", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/core — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/csr/package.json b/.publish/csr/package.json index 3af0ff63..8713b037 100644 --- a/.publish/csr/package.json +++ b/.publish/csr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/csr", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/csr — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.14" + "@wrnexus/core": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/db/package.json b/.publish/db/package.json index d873c228..ea554d7d 100644 --- a/.publish/db/package.json +++ b/.publish/db/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/db", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/db — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/dev-server/package.json b/.publish/dev-server/package.json index f10a8da5..8a0ca71b 100644 --- a/.publish/dev-server/package.json +++ b/.publish/dev-server/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-server", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/dev-server — part of the WrNexus framework.", "license": "MIT", @@ -25,20 +25,21 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.14", - "@wrnexus/dev-toolbar": "^0.5.14", - "@wrnexus/router": "^0.5.14", - "@wrnexus/ssr": "^0.5.14", - "@wrnexus/csr": "^0.5.14", - "@wrnexus/compiler": "^0.5.14", - "@wrnexus/styles": "^0.5.14", - "@wrnexus/ui": "^0.5.14", - "@wrnexus/validation": "^0.5.14", - "@wrnexus/i18n": "^0.5.14", - "@wrnexus/db": "^0.5.14", - "@wrnexus/pubsub": "^0.5.14", - "@wrnexus/uploader": "^0.5.14", - "@wrnexus/plugin": "^0.5.14" + "@wrnexus/core": "^0.6.0", + "@wrnexus/dev-toolbar": "^0.6.0", + "@wrnexus/router": "^0.6.0", + "@wrnexus/ssr": "^0.6.0", + "@wrnexus/csr": "^0.6.0", + "@wrnexus/compiler": "^0.6.0", + "@wrnexus/styles": "^0.6.0", + "@wrnexus/ui": "^0.6.0", + "@wrnexus/validation": "^0.6.0", + "@wrnexus/i18n": "^0.6.0", + "@wrnexus/db": "^0.6.0", + "@wrnexus/pubsub": "^0.6.0", + "@wrnexus/uploader": "^0.6.0", + "@wrnexus/plugin": "^0.6.0", + "@wrnexus/store": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/dev-toolbar/package.json b/.publish/dev-toolbar/package.json index cf238ae6..418c0b3f 100644 --- a/.publish/dev-toolbar/package.json +++ b/.publish/dev-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-toolbar", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/dev-toolbar — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json index d44edbaf..27ebad40 100644 --- a/.publish/encryption/package.json +++ b/.publish/encryption/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/encryption", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/encryption — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/helpers/package.json b/.publish/helpers/package.json index 3678f311..e34f0b7d 100644 --- a/.publish/helpers/package.json +++ b/.publish/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/helpers", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "Safe convenience helpers for WrNexus request contexts and common application flows.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.14" + "@wrnexus/core": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json index ca5911c5..114a30e5 100644 --- a/.publish/i18n/package.json +++ b/.publish/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/i18n", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/i18n — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.14" + "@wrnexus/core": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json index ecdb3e19..3c1e592b 100644 --- a/.publish/jwt/package.json +++ b/.publish/jwt/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/jwt", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/jwt — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/mobile/package.json b/.publish/mobile/package.json index ffadccd7..e1d2c669 100644 --- a/.publish/mobile/package.json +++ b/.publish/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/mobile", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/mobile — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/native": "^0.5.14" + "@wrnexus/native": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/native/package.json b/.publish/native/package.json index 22d0e31a..11c0b3c1 100644 --- a/.publish/native/package.json +++ b/.publish/native/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/native", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/native — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/oauth/package.json b/.publish/oauth/package.json index d21c1ead..17cc0912 100644 --- a/.publish/oauth/package.json +++ b/.publish/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/oauth", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/oauth — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/plugin/package.json b/.publish/plugin/package.json index affd75dd..5ab4b0ca 100644 --- a/.publish/plugin/package.json +++ b/.publish/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/plugin", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/plugin — part of the WrNexus framework.", "license": "MIT", @@ -33,7 +33,7 @@ } }, "dependencies": { - "@wrnexus/syntax": "^0.5.14" + "@wrnexus/syntax": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json index f25f0d6a..712fa7a6 100644 --- a/.publish/pubsub/package.json +++ b/.publish/pubsub/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/pubsub", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/pubsub — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/queue/package.json b/.publish/queue/package.json index b8913bf7..dceaeb87 100644 --- a/.publish/queue/package.json +++ b/.publish/queue/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/queue", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/queue — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/reactive/package.json b/.publish/reactive/package.json index b20c8b55..b2504c33 100644 --- a/.publish/reactive/package.json +++ b/.publish/reactive/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/reactive", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/reactive — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/router/package.json b/.publish/router/package.json index d74e1e63..1b8ee612 100644 --- a/.publish/router/package.json +++ b/.publish/router/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/router", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/router — part of the WrNexus framework.", "license": "MIT", @@ -21,8 +21,8 @@ } }, "dependencies": { - "@wrnexus/compiler": "^0.5.14", - "@wrnexus/core": "^0.5.14" + "@wrnexus/compiler": "^0.6.0", + "@wrnexus/core": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json index ffe959e5..c982c104 100644 --- a/.publish/ssr/package.json +++ b/.publish/ssr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ssr", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/ssr — part of the WrNexus framework.", "license": "MIT", @@ -18,10 +18,19 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" + }, + "./rpc": { + "types": "./dist/rpc.d.ts", + "import": "./dist/rpc.js" + }, + "./store-context": { + "types": "./dist/store-context.d.ts", + "import": "./dist/store-context.js" } }, "dependencies": { - "@wrnexus/core": "^0.5.14" + "@wrnexus/core": "^0.6.0", + "@wrnexus/store": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/styles/package.json b/.publish/styles/package.json index f711b152..212c0667 100644 --- a/.publish/styles/package.json +++ b/.publish/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/styles", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/styles — part of the WrNexus framework.", "license": "MIT", @@ -21,9 +21,9 @@ } }, "dependencies": { - "@wrnexus/uploader": "^0.5.14", - "@wrnexus/core": "^0.5.14", - "@wrnexus/plugin": "^0.5.14" + "@wrnexus/uploader": "^0.6.0", + "@wrnexus/core": "^0.6.0", + "@wrnexus/plugin": "^0.6.0" }, "files": [ "dist" diff --git a/.publish/syntax/package.json b/.publish/syntax/package.json index 87650176..18c92779 100644 --- a/.publish/syntax/package.json +++ b/.publish/syntax/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/syntax", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/syntax — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/test/package.json b/.publish/test/package.json index 26df4f29..6ef1dfd2 100644 --- a/.publish/test/package.json +++ b/.publish/test/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/test", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/test — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/tracking/package.json b/.publish/tracking/package.json index f3e6b336..68a5e664 100644 --- a/.publish/tracking/package.json +++ b/.publish/tracking/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/tracking", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "description": "@wrnexus/tracking — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/ui/COMPONENTS.md b/.publish/ui/COMPONENTS.md index b1a26d5f..a4f489bd 100644 --- a/.publish/ui/COMPONENTS.md +++ b/.publish/ui/COMPONENTS.md @@ -9,18 +9,18 @@ This reference is generated from the 108 packaged `.wrn` component sources. Prop Theme-aware, responsive advanced select component. - Mount: `data-component="AdvancedSelect"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: string = []`, `options: string = []`, `groups: string = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: unknown[] = []`, `options: unknown[] = []`, `groups: unknown[] = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""` - Slots: None -- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` +- Outputs: `search({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### ComboBox Editable autocomplete combobox with local and remote suggestions. - Mount: `data-component="ComboBox"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `groups: string = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: unknown[] = []`, `groups: unknown[] = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""` - Slots: None -- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` +- Outputs: `search({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### CopyMarkup @@ -29,7 +29,7 @@ Theme-aware, responsive copy markup component. - Mount: `data-component="CopyMarkup"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `copy`, `success`, `error` +- Outputs: `copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### InputNumber @@ -38,7 +38,7 @@ Theme-aware, responsive input number component. - Mount: `data-component="InputNumber"` - Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = ""`, `name: string = "quantity"`, `value: number = 0`, `min: string = ""`, `max: string = ""`, `step: number = 1`, `precision: string = "auto"`, `label: string = ""`, `description: string = ""`, `helpText: string = ""`, `error: string = ""`, `invalid: boolean = false`, `prefix: string = ""`, `suffix: string = ""`, `placeholder: string = ""`, `autocomplete: string = "off"`, `inputMode: string = "decimal"`, `ariaLabel: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `inputDisabled: boolean = false`, `buttonsDisabled: boolean = false`, `readonly: boolean = false`, `allowInput: boolean = true`, `keyboard: boolean = true`, `wheel: boolean = false`, `clamp: boolean = true`, `fullWidth: boolean = false`, `showButtons: boolean = true`, `showValidationMessage: boolean = true`, `decrementLabel: string = "Decrease value"`, `incrementLabel: string = "Increase value"`, `controlsLabel: string = "Quantity controls"`, `requiredMessage: string = "A value is required."`, `minMessage: string = "Value is below the minimum."`, `maxMessage: string = "Value is above the maximum."` - Slots: None -- Events: `input`, `change`, `increment`, `decrement` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `increment({ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `decrement({ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### PinInput @@ -47,16 +47,7 @@ Secure multi-cell PIN and verification-code input with regex and paste support. - Mount: `data-component="PinInput"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Verification code"`, `name: string = "pin"`, `value: string = ""`, `length: number = 4`, `pattern: string = "[0-9]"`, `type: string = "text"`, `inputMode: string = "numeric"`, `placeholder: string = "○"`, `autocomplete: string = "one-time-code"`, `masked: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `autoFocus: boolean = false`, `autoSubmit: boolean = false`, `allowPaste: boolean = true`, `clearable: boolean = true`, `clearLabel: string = "Clear code"`, `separator: string = ""`, `groupSize: number = 0`, `helpText: string = ""`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `complete`, `paste`, `clear`, `error` - -### SearchBox - -Theme-aware, responsive search box component. - -- Mount: `data-component="SearchBox"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` -- Slots: None -- Events: None +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `paste({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### StrongPassword @@ -65,25 +56,25 @@ Theme-aware, responsive strong password component. - Mount: `data-component="StrongPassword"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `strength` +- Outputs: `input({ value: string; score: number; maximumScore: number; percent: number; level: string })`, `change({ value: string; score: number; maximumScore: number; percent: number; level: string })`, `strength({ value: string; score: number; maximumScore: number; percent: number; level: string })` ### ToggleCount Theme-aware, responsive toggle count component. - Mount: `data-component="ToggleCount"` -- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "segmented"`, `class: string = ""`, `name: string = "billing-cycle"`, `value: string = "monthly"`, `firstValue: string = "monthly"`, `firstLabel: string = "Monthly"`, `secondValue: string = "annual"`, `secondLabel: string = "Annual"`, `ariaLabel: string = "Billing frequency"`, `items: string = []`, `currency: string = "$"`, `suffix: string = ""`, `firstValueKey: string = "monthly"`, `secondValueKey: string = "annual"`, `emptyValue: string = "—"`, `align: string = "end"`, `fullWidth: boolean = true`, `disabled: boolean = false`, `animate: boolean = true`, `animationDuration: number = 450`, `animationSteps: number = 18` +- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "segmented"`, `class: string = ""`, `name: string = "billing-cycle"`, `value: string = "monthly"`, `firstValue: string = "monthly"`, `firstLabel: string = "Monthly"`, `secondValue: string = "annual"`, `secondLabel: string = "Annual"`, `ariaLabel: string = "Billing frequency"`, `items: unknown[] = []`, `currency: string = "$"`, `suffix: string = ""`, `firstValueKey: string = "monthly"`, `secondValueKey: string = "annual"`, `emptyValue: string = "—"`, `align: string = "end"`, `fullWidth: boolean = true`, `disabled: boolean = false`, `animate: boolean = true`, `animationDuration: number = 450`, `animationSteps: number = 18` - Slots: None -- Events: `change`, `toggle` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### TogglePassword Accessible password field with optional show and hide controls. - Mount: `data-component="TogglePassword"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: string = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: unknown[] = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `toggle` +- Outputs: `input({ name?: string; value: string | number | boolean | null | object; visible: boolean })`, `change({ name?: string; value: string | number | boolean | null | object; visible: boolean })`, `toggle({ visible: boolean })` ## Base @@ -92,18 +83,18 @@ Accessible password field with optional show and hide controls. Theme-aware, responsive accordion component. - Mount: `data-component="Accordion"` -- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = "accordion"`, `items: string = []`, `defaultOpen: string = []`, `multiple: boolean = false`, `alwaysOpen: boolean = false`, `disabled: boolean = false`, `indicator: string = "plus"`, `indicatorPosition: string = "start"`, `showIndicator: boolean = true`, `bordered: boolean = false`, `separated: boolean = false`, `flush: boolean = false`, `contentItalic: boolean = false` +- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = "accordion"`, `items: unknown[] = []`, `defaultOpen: unknown[] = []`, `multiple: boolean = false`, `alwaysOpen: boolean = false`, `disabled: boolean = false`, `indicator: string = "plus"`, `indicatorPosition: string = "start"`, `showIndicator: boolean = true`, `bordered: boolean = false`, `separated: boolean = false`, `flush: boolean = false`, `contentItalic: boolean = false` - Slots: None -- Events: `change`, `open`, `close` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Alert Theme-aware, responsive alert component. - Mount: `data-component="Alert"` -- Props: `size: string = "default"`, `color: string = "info"`, `variant: string = "soft"`, `class: string = ""`, `radius: string = "md"`, `shadow: string = "sm"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `actions: string = []`, `showIcon: boolean = false`, `icon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss alert"`, `role: string = "alert"`, `live: string = "polite"`, `linkLabel: string = ""`, `linkHref: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `compact: boolean = false` +- Props: `size: string = "default"`, `color: string = "info"`, `variant: string = "soft"`, `class: string = ""`, `radius: string = "md"`, `shadow: string = "sm"`, `title: string = "Alert"`, `description: string = ""`, `items: unknown[] = []`, `actions: unknown[] = []`, `showIcon: boolean = false`, `icon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss alert"`, `role: string = "alert"`, `live: string = "polite"`, `linkLabel: string = ""`, `linkHref: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `compact: boolean = false` - Slots: None -- Events: `dismiss`, `action` +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Avatar @@ -112,16 +103,16 @@ Theme-aware, responsive avatar component. - Mount: `data-component="Avatar"` - Props: `src: string = ""`, `alt: string = ""`, `initials: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `status: string = ""`, `statusLabel: string = ""`, `statusPosition: string = "bottom"`, `badge: string = ""`, `badgeIcon: string = ""`, `badgeLabel: string = ""`, `tooltip: string = ""`, `name: string = ""`, `description: string = ""`, `loading: string = "lazy"`, `class: string = ""` - Slots: None -- Events: `load`, `error`, `click` +- Outputs: `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)`, `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### AvatarGroup Theme-aware, responsive avatar group component. - Mount: `data-component="AvatarGroup"` -- Props: `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `layout: string = "stack"`, `maxVisible: number = 4`, `columns: number = 3`, `borderColor: string = ""`, `showTooltips: boolean = true`, `overflowLabel: string = "Show remaining members"`, `class: string = ""` +- Props: `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `layout: string = "stack"`, `maxVisible: number = 4`, `columns: number = 3`, `borderColor: string = ""`, `showTooltips: boolean = true`, `overflowLabel: string = "Show remaining members"`, `class: string = ""` - Slots: None -- Events: `overflow` +- Outputs: `overflow({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Badge @@ -130,7 +121,7 @@ Theme-aware, responsive badge component. - Mount: `data-component="Badge"` - Props: `label: string = "Badge"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "pill"`, `class: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `dot: boolean = false`, `dotOnly: boolean = false`, `dotLabel: string = "Status"`, `animated: boolean = false`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Remove badge"`, `truncate: boolean = false`, `maxWidth: string = "12rem"`, `anchorLabel: string = ""`, `anchorIcon: string = ""`, `placement: string = "inline"`, `anchorLabelText: string = "Badge anchor"` - Slots: None -- Events: `dismiss` +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Blockquote @@ -139,7 +130,7 @@ Theme-aware, responsive blockquote component. - Mount: `data-component="Blockquote"` - Props: `quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."`, `citation: string = ""`, `citationTitle: string = ""`, `citationUrl: string = ""`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `size: string = "md"`, `color: string = "primary"`, `align: string = "left"`, `variant: string = "default"`, `quoteMark: boolean = true`, `italic: boolean = true`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Button @@ -148,52 +139,52 @@ Theme-aware, responsive button component. - Mount: `data-component="Button"` - Props: `label: string = "Button"`, `loadingLabel: string = "Loading…"`, `description: string = ""`, `as: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `type: string = "button"`, `variant: string = "default"`, `color: string = "primary"`, `size: string = "default"`, `disabled: boolean = false`, `loading: boolean = false`, `pill: boolean = false`, `fullWidth: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `ariaLabel: string = ""`, `ariaPressed: string = ""`, `ariaExpanded: string = ""`, `ariaControls: string = ""`, `title: string = ""`, `autofocus: boolean = false`, `controlClass: string = ""`, `class: string = ""` - Slots: `default` -- Events: `click`, `focus`, `blur` +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### ButtonGroup Theme-aware, responsive button group component. - Mount: `data-component="ButtonGroup"` -- Props: `items: string = []`, `value: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `orientation: string = "horizontal"`, `responsive: boolean = false`, `attached: boolean = true`, `selectable: boolean = false`, `toolbar: boolean = false`, `disabled: boolean = false`, `ariaLabel: string = "Button group"`, `class: string = ""` +- Props: `items: unknown[] = []`, `value: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `orientation: string = "horizontal"`, `responsive: boolean = false`, `attached: boolean = true`, `selectable: boolean = false`, `toolbar: boolean = false`, `disabled: boolean = false`, `ariaLabel: string = "Button group"`, `class: string = ""` - Slots: `default` -- Events: `click`, `select`, `change` +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })`, `change({ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })` ### Card -Theme-aware, responsive card component. +Group related content in a responsive themed surface with title, description, content, and supporting slots. - Mount: `data-component="Card"` -- Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: string = []`, `navigation: string = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""` +- Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: unknown[] = []`, `navigation: unknown[] = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""` - Slots: `default` -- Events: `click`, `action`, `navigate`, `dismiss`, `load`, `error` +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `navigate({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### Carousel Theme-aware, responsive carousel component. - Mount: `data-component="Carousel"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `activeIndex: number = 0`, `slidesPerView: number = 1`, `gap: string = "0.75rem"`, `showPagination: boolean = false`, `isAutoPlay: boolean = false`, `autoplayInterval: number = 4000`, `isInfiniteLoop: boolean = false`, `isRTL: boolean = false`, `isCentered: boolean = false`, `isDraggable: boolean = false`, `isAutoHeight: boolean = false`, `isSnap: boolean = false`, `showCounter: boolean = false`, `thumbnails: string = "none"`, `ariaLabel: string = "Content carousel"`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: unknown[] = []`, `activeIndex: number = 0`, `slidesPerView: number = 1`, `gap: string = "0.75rem"`, `showPagination: boolean = false`, `isAutoPlay: boolean = false`, `autoplayInterval: number = 4000`, `isInfiniteLoop: boolean = false`, `isRTL: boolean = false`, `isCentered: boolean = false`, `isDraggable: boolean = false`, `isAutoHeight: boolean = false`, `isSnap: boolean = false`, `showCounter: boolean = false`, `thumbnails: string = "none"`, `ariaLabel: string = "Content carousel"`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `initialize`, `change`, `previous`, `next`, `play`, `pause`, `reachStart`, `reachEnd`, `dragStart`, `dragEnd` +- Outputs: `initialize({ index: number; count: number })`, `change({ index: number; previousIndex: number; item: string | number | boolean | null | object; reason: string | boolean })`, `previous({ index: number; previousIndex: number; item: string | number | boolean | null | object })`, `next({ index: number; previousIndex: number; item: string | number | boolean | null | object })`, `play({ index: number; interval: number })`, `pause({ index: number })`, `reachStart({ index: number })`, `reachEnd({ index: number })`, `dragStart({ index: number; x: null })`, `dragEnd({ index: number; distance: number })` ### ChatBubble Theme-aware, responsive chat bubble component. - Mount: `data-component="ChatBubble"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `oneSided: boolean = false`, `showAvatars: boolean = false`, `showMetadata: boolean = false`, `ariaLabel: string = "Conversation"`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: unknown[] = []`, `oneSided: boolean = false`, `showAvatars: boolean = false`, `showMetadata: boolean = false`, `ariaLabel: string = "Conversation"`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `action`, `messageClick`, `avatarClick`, `linkClick` +- Outputs: `action({ action: boolean; item: string | number | boolean | null | object; index: number })`, `messageClick({ item: string | number | boolean | null | object; index: number; direction: string })`, `avatarClick({ item: string | number | boolean | null | object; index: number; direction: string })`, `linkClick({ link: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })` ### Collapse Theme-aware, responsive collapse component. - Mount: `data-component="Collapse"` -- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `mode: string = "panel"`, `initialOpenIndexes: string = []`, `ariaLabel: string = "Collapsible content"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: unknown[] = []`, `multiple: boolean = false`, `mode: string = "panel"`, `initialOpenIndexes: unknown[] = []`, `ariaLabel: string = "Collapsible content"`, `class: string = ""` - Slots: `default` -- Events: `toggle`, `open`, `close` +- Outputs: `toggle({ index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] })`, `open({ index: number; item: string | number | boolean | null | object })`, `close({ index: number; item: string | number | boolean | null | object })` ### DatePicker @@ -202,16 +193,16 @@ Theme-aware, responsive date picker component. - Mount: `data-component="DatePicker"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `id: string = ""`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `locale: string = "en-US"`, `firstDayOfWeek: number = 0`, `months: string = [{ 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" }]`, `days: string = [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]`, `years: string = [2024, 2025, 2026, 2027, 2028, 2029, 2030]`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `variant: string = "normal"`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `open`, `close`, `focus`, `blur`, `invalid` +- Outputs: `input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `open({ value: string; name: string; sourceEvent: Event })`, `close({ value: string; name: string; sourceEvent: Event })`, `focus({ value: string; name: string; sourceEvent: Event })`, `blur({ value: string; name: string; sourceEvent: Event })`, `invalid({ name: string; message: string; sourceEvent: Event })` ### DeviceFrame Theme-aware, responsive device frame component. - Mount: `data-component="DeviceFrame"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `device: string = "phone"`, `orientation: string = "portrait"`, `src: string = ""`, `srcdoc: string = ""`, `frameTitle: string = "Device preview"`, `showToolbar: boolean = true`, `allow: string = ""`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `device: string = "phone"`, `orientation: string = "portrait"`, `src: string = ""`, `srcdoc: string = ""`, `frameTitle: string = "Device preview"`, `showToolbar: boolean = true`, `allow: string = ""`, `class: string = ""` - Slots: `default` -- Events: `change`, `rotate` +- Outputs: `change({ device: string; orientation: string; sourceEvent: Event })`, `rotate({ device: string; orientation: string; sourceEvent: Event })` ### FileUploadProgress @@ -220,52 +211,43 @@ Theme-aware, responsive file upload progress component. - Mount: `data-component="FileUploadProgress"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `fileName: string = ""`, `fileSize: string = ""`, `uploadedSize: string = ""`, `status: string = "uploading"`, `cancelLabel: string = "Cancel upload"`, `retryLabel: string = "Retry upload"`, `class: string = ""` - Slots: None -- Events: `cancel`, `retry`, `complete` - -### HeroActions - -Responsive action group for hero and call-to-action sections. - -- Mount: `data-component="HeroActions"` -- Props: `actions: string = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""` -- Slots: `default` -- Events: None +- Outputs: `cancel({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `retry({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `complete({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### LegendIndicator Theme-aware, responsive legend indicator component. - Mount: `data-component="LegendIndicator"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `toggle`, `select` +- Outputs: `toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### List -Theme-aware, responsive list component. +Present structured responsive linked or status items with icons, descriptions, actions, and selection events. - Mount: `data-component="List"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### ListGroup Theme-aware, responsive list group component. - Mount: `data-component="ListGroup"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `change` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Marquee -Theme-aware, responsive marquee component. +Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior. - Mount: `data-component="Marquee"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Progress @@ -274,16 +256,16 @@ Theme-aware, responsive progress component. - Mount: `data-component="Progress"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### Rating Theme-aware, responsive rating component. - Mount: `data-component="Rating"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Skeleton @@ -292,7 +274,7 @@ Theme-aware, responsive skeleton component. - Mount: `data-component="Skeleton"` - Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### Spinner @@ -301,164 +283,121 @@ Theme-aware, responsive spinner component. - Mount: `data-component="Spinner"` - Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### StyledIcon Theme-aware, responsive styled icon component. - Mount: `data-component="StyledIcon"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Timeline -Theme-aware, responsive timeline component. +Present responsive chronological activity, milestones, or workflow status with rich item metadata. - Mount: `data-component="Timeline"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Toast Theme-aware, responsive toast component. - Mount: `data-component="Toast"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `dismiss`, `action` +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### TreeView Theme-aware, responsive tree view component. - Mount: `data-component="TreeView"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `toggle`, `expand`, `collapse` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `expand({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `collapse({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` -## Blocks - -### AnnouncementBar - -Accessible public announcement, emergency, maintenance, or status bar. - -- Mount: `data-component="AnnouncementBar"` -- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""` -- Slots: None -- Events: None - -### CTASection - -Reusable closing call-to-action section with primary and secondary actions. - -- Mount: `data-component="CTASection"` -- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `maxWidth: string = "xl"`, `class: string = ""` -- Slots: `default`, `actions`, `visual`, `footer` -- Events: None - -### FeatureCard - -Reusable linked feature or service card with icon, badge, description, and action. - -- Mount: `data-component="FeatureCard"` -- Props: `icon: string = ""`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `actionIcon: string = ""`, `badge: string = ""`, `badgeColor: string = "primary"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `disabled: boolean = false`, `class: string = ""` -- Slots: `icon`, `default`, `footer` -- Events: None - -### FeatureIconCard - -Feature card with a prominent themed icon treatment. - -- Mount: `data-component="FeatureIconCard"` -- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""` -- Slots: `default`, `footer` -- Events: None - -### Hero - -Reusable public-page hero with actions, trust items, badges, and visual slots. - -- Mount: `data-component="Hero"` -- Props: `eyebrow: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `badges: string = []`, `trustItems: string = []`, `maxWidth: string = "xl"`, `class: string = ""` -- Slots: `eyebrow`, `actions`, `trust`, `default`, `visual`, `footer` -- Events: None - -### MarketingSectionHeader - -Marketing section heading with an optional linked action. - -- Mount: `data-component="MarketingSectionHeader"` -- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "split"`, `size: string = "default"`, `color: string = "primary"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `actionExternal: boolean = false`, `class: string = ""` -- Slots: `icon`, `actions`, `default` -- Events: None - -### MetricCard - -Single statistic or operational metric with icon, trend, and optional action. - -- Mount: `data-component="MetricCard"` -- Props: `label: string = "Metric"`, `value: string = "0"`, `description: string = ""`, `icon: string = ""`, `prefix: string = ""`, `suffix: string = ""`, `trend: string = ""`, `trendLabel: string = ""`, `trendDirection: string = "neutral"`, `href: string = ""`, `actionLabel: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `class: string = ""` -- Slots: None -- Events: None - -### PageHeader - -Public and application page header with breadcrumbs, metadata, and actions. - -- Mount: `data-component="PageHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `align: string = "left"`, `size: string = "default"`, `compact: boolean = false`, `showBreadcrumbs: boolean = false`, `breadcrumbs: string = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""` -- Slots: `meta`, `actions`, `default` -- Events: None - -### PortalDashboard - -Responsive portal dashboard with metrics, actions, tasks, and updates. - -- Mount: `data-component="PortalDashboard"` -- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Overview"`, `eyebrowKey: string = ""`, `title: string = "Dashboard"`, `titleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `userName: string = ""`, `metrics: string = []`, `actions: string = []`, `updates: string = []`, `tasks: string = []`, `class: string = ""` -- Slots: `hero-action` -- Events: `action`, `navigate` - -### SplitHero - -Two-column hero with configurable content and visual placement. - -- Mount: `data-component="SplitHero"` -- Props: `eyebrow: string = ""`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `trustItems: string = []`, `class: string = ""` -- Slots: `actions`, `trust`, `default`, `visual` -- Events: None - -### StatsBar - -Compact responsive statistics strip. - -- Mount: `data-component="StatsBar"` -- Props: `items: string = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""` -- Slots: None -- Events: None - -## Forms +## Core ### AuthForm -Reusable authentication form for sign-in, registration, recovery, reset, and MFA. +Reusable auth form component. - Mount: `data-component="AuthForm"` - Props: `size: string = "default"`, `color: string = "primary"`, `mode: string = "sign-in"`, `action: string = "/api/auth/login"`, `method: string = "post"`, `title: string = "Sign in"`, `description: string = ""`, `returnTo: string = ""`, `schema: string = ""`, `showRemember: boolean = true`, `showName: boolean = true`, `submitLabel: string = "Continue"`, `class: string = ""` - Slots: `default` -- Events: `submit`, `change`, `input`, `focus`, `blur` +- Outputs: `submit({ event: Event; mode: string; action: string })`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` + +### AuthSplitLayout + +Reusable auth split layout component. + +- Mount: `data-component="AuthSplitLayout"` +- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Secure identity"`, `title: string = "Welcome back"`, `description: string = ""`, `brand: string = "Police Management System"`, `features: unknown[] = []`, `class: string = ""` +- Slots: `aside-extra`, `form` +- Outputs: None + +### PortalDashboard + +Reusable portal dashboard component. + +- Mount: `data-component="PortalDashboard"` +- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Overview"`, `eyebrowKey: string = ""`, `title: string = "Dashboard"`, `titleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `userName: string = ""`, `metrics: unknown[] = []`, `actions: unknown[] = []`, `updates: unknown[] = []`, `tasks: unknown[] = []`, `class: string = ""` +- Slots: `hero-action` +- Outputs: `action({ item: string | number | boolean | null | object; value: string | number | boolean; index: number })`, `navigate({ item: string | number | boolean | null | object; value: string | number | boolean; index: number })` + +### PreferenceSwitcher + +Reusable preference switcher component. + +- Mount: `data-component="PreferenceSwitcher"` +- Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `class: string = ""` +- Slots: None +- Outputs: `theme({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `color({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `language({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` + +## Data + +### MetricCard + +Display one operational metric with value, suffix, description, icon, trend, progress, and optional action. + +- Mount: `data-component="MetricCard"` +- Props: `label: string = "Metric"`, `value: string = "0"`, `description: string = ""`, `icon: string = ""`, `iconStyle: string = "soft"`, `prefix: string = ""`, `suffix: string = ""`, `badge: string = ""`, `trend: string = ""`, `trendLabel: string = ""`, `trendDirection: string = "neutral"`, `progress: number = -1`, `progressLabel: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `actionLabel: string = ""`, `actionIcon: string = ""`, `showArrow: boolean = true`, `selectable: boolean = false`, `disabled: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `class: string = ""` +- Slots: `default`, `footer` +- Outputs: `select({ label: string; value: string; href: string; sourceEvent: Event })`, `action({ label: string; value: string; href: string; sourceEvent: Event })` + +### MetricGrid + +Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid. + +- Mount: `data-component="MetricGrid"` +- Props: `items: unknown[] = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "full"`, `minItemWidth: string = ""`, `class: string = ""` +- Slots: `default` +- Outputs: `select({ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event })`, `action({ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event })` + +### StatsBar + +Present a compact responsive strip of key facts, counts, performance indicators, or trust signals. + +- Mount: `data-component="StatsBar"` +- Props: `items: unknown[] = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: None +- Outputs: None + +## Forms ### Checkbox Theme-aware, responsive checkbox component. - Mount: `data-component="Checkbox"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `values: string = []`, `options: string = []`, `checked: boolean = false`, `indeterminate: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `values: unknown[] = []`, `options: unknown[] = []`, `checked: boolean = false`, `indeterminate: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `focus`, `blur`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### ColorPicker @@ -467,7 +406,7 @@ Theme-aware, responsive color picker component. - Mount: `data-component="ColorPicker"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Color"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = "#2563eb"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### FileInput @@ -476,7 +415,7 @@ Theme-aware, responsive file input component. - Mount: `data-component="FileInput"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "File"`, `hiddenLabel: boolean = false`, `placeholder: string = "Choose a file"`, `value: string = ""`, `icon: string = "icon-[lucide--upload]"`, `iconPosition: string = "start"`, `accept: string = ""`, `multiple: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `select`, `clear`, `invalid` +- Outputs: `input({ files: File[]; name: string; sourceEvent: Event })`, `change({ files: File[]; name: string; sourceEvent: Event })`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ files: File[]; name: string; sourceEvent: Event })`, `clear({ name: string; sourceEvent: Event })`, `invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Input @@ -485,7 +424,7 @@ Theme-aware, responsive input component. - Mount: `data-component="Input"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `type: string = "text"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `autocomplete: string = ""`, `inputmode: string = ""`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = ""`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `invalid`, `keydown`, `keyup` +- Outputs: `input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `focus({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `blur({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `invalid({ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event })`, `keydown({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })`, `keyup({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })` ### InputGroup @@ -494,34 +433,43 @@ Theme-aware, responsive input group component. - Mount: `data-component="InputGroup"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input group"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `startText: string = ""`, `endText: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `actionLabel: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `submit`, `action` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `submit({ value: string | number | boolean | null | object; name: string; sourceEvent: Event })`, `action({ name: string; sourceEvent: Event })` ### Radio Theme-aware, responsive radio component. - Mount: `data-component="Radio"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Radio"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `options: string = []`, `checked: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Radio"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `options: unknown[] = []`, `checked: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### RangeSlider Theme-aware, responsive range slider component. - Mount: `data-component="RangeSlider"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Range"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: number = 50`, `min: number = 0`, `max: number = 100`, `step: number = 1`, `showValue: boolean = true`, `showBounds: boolean = true`, `showSteps: boolean = false`, `marks: string = []`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Range"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: number = 50`, `min: number = 0`, `max: number = 100`, `step: number = 1`, `showValue: boolean = true`, `showBounds: boolean = true`, `showSteps: boolean = false`, `marks: unknown[] = []`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input(({ 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[]))`, `change(({ 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[]))`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` + +### SearchBox + +Provide an accessible responsive search field with labels, validation states, sizes, and input or change events. + +- Mount: `data-component="SearchBox"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Slots: None +- Outputs: None ### Select Theme-aware, responsive select component. - Mount: `data-component="Select"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `hiddenLabel: boolean = false`, `value: string = ""`, `values: string = []`, `options: string = []`, `placeholder: string = "Select an option"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `multiple: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `hiddenLabel: boolean = false`, `value: string = ""`, `values: unknown[] = []`, `options: unknown[] = []`, `placeholder: string = "Select an option"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `multiple: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `open({ name: string; sourceEvent: Event })`, `close({ name: string; sourceEvent: Event })`, `invalid({ name: string; message: string; sourceEvent: Event })` ### Switch @@ -530,7 +478,7 @@ Theme-aware, responsive switch component. - Mount: `data-component="Switch"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `checked: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Textarea @@ -539,7 +487,7 @@ Theme-aware, responsive textarea component. - Mount: `data-component="Textarea"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Textarea"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `rows: number = 5`, `resize: string = "vertical"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `minlength: string = ""`, `maxlength: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `invalid({ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event })` ### TimePicker @@ -548,7 +496,7 @@ Theme-aware, responsive time picker component. - Mount: `data-component="TimePicker"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Time"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = "icon-[lucide--clock-3]"`, `iconPosition: string = "end"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `format: string = "24"`, `minuteStep: number = 5`, `hours: string = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]`, `minutes: string = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid` +- Outputs: `input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `focus({ value: string; name: string; sourceEvent: Event })`, `blur({ value: string; name: string; sourceEvent: Event })`, `open({ value: string; name: string; sourceEvent: Event })`, `close({ value: string; name: string; sourceEvent: Event })`, `invalid({ name: string; message: string; sourceEvent: Event })` ## Integrations @@ -557,137 +505,128 @@ Theme-aware, responsive time picker component. Theme-aware, responsive advanced date picker component. - Mount: `data-component="AdvancedDatePicker"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `open`, `close`, `clear` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### AdvancedRangeSlider Theme-aware, responsive advanced range slider component. - Mount: `data-component="AdvancedRangeSlider"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `start`, `end` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `end({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Chart Theme-aware, responsive chart component. - Mount: `data-component="Chart"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `dataPointClick`, `legendToggle` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `dataPointClick({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `legendToggle({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Clipboard Theme-aware, responsive clipboard component. - Mount: `data-component="Clipboard"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `copy`, `success`, `error` +- Outputs: `copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### Confetti Theme-aware, responsive confetti component. - Mount: `data-component="Confetti"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `start`, `complete` +- Outputs: `start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### DataMap Theme-aware, responsive data map component. - Mount: `data-component="DataMap"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `change` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### DataTable Theme-aware, responsive data table component. - Mount: `data-component="DataTable"` -- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: unknown[] = []`, `rows: unknown[] = []`, `striped: boolean = true`, `class: string = ""` - Slots: `default` -- Events: `sort`, `select`, `change`, `rowClick`, `pageChange` +- Outputs: `sort({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `rowClick({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `pageChange({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### DragAndDrop Theme-aware, responsive drag and drop component. - Mount: `data-component="DragAndDrop"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `dragStart`, `dragEnd`, `dragEnter`, `dragLeave`, `drop`, `change` +- Outputs: `dragStart({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragEnd({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragEnter({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragLeave({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `drop({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### FileUpload Theme-aware, responsive file upload component. - Mount: `data-component="FileUpload"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `upload`, `progress`, `success`, `error`, `cancel`, `remove` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `upload({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `progress({ progress: number; [key: string]: string | number | boolean | null | object } | number)`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)`, `cancel({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `remove({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Map -Theme-aware, responsive map component. +Present responsive location information and markers with map-ready metadata and movement or marker events. - Mount: `data-component="Map"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### ToastNotifications Theme-aware, responsive toast notifications component. - Mount: `data-component="ToastNotifications"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `add`, `dismiss`, `clear`, `action` +- Outputs: `add({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### WysiwygEditor Theme-aware, responsive wysiwyg editor component. - Mount: `data-component="WysiwygEditor"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ## Layout -### AuthSplitLayout - -Responsive 50/50 authentication layout with content and form regions. - -- Mount: `data-component="AuthSplitLayout"` -- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Secure identity"`, `title: string = "Welcome back"`, `description: string = ""`, `brand: string = "Police Management System"`, `features: string = []`, `class: string = ""` -- Slots: `aside-extra`, `form` -- Events: None - ### Columns -Theme-aware, responsive columns component. +Create responsive balanced content columns with configurable count, gap, density, and maximum width. - Mount: `data-component="Columns"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Container -Theme-aware, responsive container component. +Constrain and align page content with responsive gutters and compact, wide, or full width options. - Mount: `data-component="Container"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### CustomScrollbar @@ -696,43 +635,52 @@ Theme-aware, responsive custom scrollbar component. - Mount: `data-component="CustomScrollbar"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: `scroll` +- Outputs: `scroll({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Divider -Theme-aware, responsive divider component. +Separate related horizontal or vertical content with optional labels, sizes, and semantic colors. - Mount: `data-component="Divider"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### FeatureGrid -Responsive equal-height grid for feature and service cards. +Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid. - Mount: `data-component="FeatureGrid"` -- Props: `color: string = "primary"`, `size: string = "default"`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: unknown[] = []`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `variant: string = "default"`, `label: string = "Features"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None + +### Footer + +Render structured responsive footer navigation, pre and post content, copyright content, links, and public events. + +- Mount: `data-component="Footer"` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: unknown[] = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""` +- Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Grid -Theme-aware, responsive grid component. +Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width. - Mount: `data-component="Grid"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Image -Theme-aware, responsive image component. +Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment. - Mount: `data-component="Image"` - Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Kbd @@ -741,7 +689,7 @@ Theme-aware, responsive kbd component. - Mount: `data-component="Kbd"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "⌘ K"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### LayoutSplitter @@ -750,236 +698,292 @@ Theme-aware, responsive layout splitter component. - Mount: `data-component="LayoutSplitter"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: `resizeStart`, `resize`, `resizeEnd` +- Outputs: `resizeStart({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `resize({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `resizeEnd({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Link -Theme-aware, responsive link component. +Render an accessible internal or external link with target, relation, size, color, and public focus or click events. - Mount: `data-component="Link"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""` - Slots: `default` -- Events: None - -### MetricGrid - -Responsive collection of metric cards. - -- Mount: `data-component="MetricGrid"` -- Props: `items: string = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Events: None +- Outputs: None ### PublicPageShell -Consistent structural wrapper for public-facing pages. +Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages. - Mount: `data-component="PublicPageShell"` - Props: `maxWidth: string = "full"`, `fullWidth: boolean = true`, `headerOffset: string = "none"`, `background: string = "default"`, `overflow: string = "clip"`, `minHeight: string = "screen"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""` - Slots: `before`, `default`, `after` -- Events: None +- Outputs: None ### Section -Theme-aware page section with consistent spacing, width, background, and border controls. +Create a responsive themed page section with controlled spacing, width, borders, and surface treatment. - Mount: `data-component="Section"` - Props: `id: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `spacing: string = "lg"`, `maxWidth: string = "xl"`, `fullWidth: boolean = false`, `borderTop: boolean = false`, `borderBottom: boolean = false`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### SectionHeader -Reusable accessible section heading with eyebrow, title, description, icon, and actions. +Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy. - Mount: `data-component="SectionHeader"` - Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `headingLevel: number = 2`, `maxWidth: string = "3xl"`, `class: string = ""` - Slots: `icon`, `default`, `actions` -- Events: None - -### TextLink - -Styled inline action link with icons, arrows, external state, and disabled handling. - -- Mount: `data-component="TextLink"` -- Props: `label: string = "Learn more"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `showArrow: boolean = true`, `underline: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `disabled: boolean = false`, `class: string = ""` -- Slots: None -- Events: `click`, `focus`, `blur` +- Outputs: None ### Typography -Theme-aware, responsive typography component. +Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy. - Mount: `data-component="Typography"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None + +## Marketing + +### AnnouncementBar + +Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls. + +- Mount: `data-component="AnnouncementBar"` +- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `width: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""` +- Slots: None +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` + +### CTASection + +Close a page or major section with conversion-focused copy, actions, and optional supporting visual content. + +- Mount: `data-component="CTASection"` +- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""` +- Slots: `default`, `actions`, `visual`, `footer` +- Outputs: None + +### FeatureCard + +Present one linked feature or service with media, icon, badge, description, and action. + +- Mount: `data-component="FeatureCard"` +- Props: `icon: string = ""`, `iconStyle: string = "soft"`, `iconSize: string = "default"`, `eyebrow: string = ""`, `title: string = "Feature"`, `description: string = ""`, `image: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `imageAspect: string = "wide"`, `imageLoading: string = "lazy"`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `actionLabel: string = "Learn more"`, `actionIcon: string = ""`, `showArrow: boolean = true`, `stretchedLink: boolean = true`, `badge: string = ""`, `badgeColor: string = "primary"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `disabled: boolean = false`, `class: string = ""` +- Slots: `media`, `icon`, `default`, `footer` +- Outputs: None + +### FeatureIconCard + +Present a compact feature or benefit with a styled icon, title, description, badge, and optional link. + +- Mount: `data-component="FeatureIconCard"` +- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""` +- Slots: `default`, `footer` +- Outputs: None + +### Hero + +Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel. + +- Mount: `data-component="Hero"` +- Props: `eyebrow: string = ""`, `eyebrowIcon: string = ""`, `icon: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "split"`, `visualPosition: string = "right"`, `visualStyle: string = "plain"`, `showDecorations: boolean = true`, `fullBleed: boolean = true`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualIcon: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualItems: unknown[] = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `primaryTarget: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `secondaryTarget: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `tertiaryIcon: string = ""`, `tertiaryTarget: string = ""`, `badges: unknown[] = []`, `trustItems: unknown[] = []`, `maxWidth: string = "xl"`, `class: string = ""` +- Slots: `eyebrow`, `actions`, `trust`, `default`, `visual`, `footer` +- Outputs: None + +### HeroActions + +Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking. + +- Mount: `data-component="HeroActions"` +- Props: `actions: unknown[] = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""` +- Slots: `default` +- Outputs: None + +### MarketingSectionHeader + +Introduce marketing content with an eyebrow, title, description, and optional linked action. + +- Mount: `data-component="MarketingSectionHeader"` +- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "split"`, `size: string = "default"`, `color: string = "primary"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `actionExternal: boolean = false`, `class: string = ""` +- Slots: `icon`, `actions`, `default` +- Outputs: None + +### PageHeader + +Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions. + +- Mount: `data-component="PageHeader"` +- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `id: string = "page-title"`, `align: string = "left"`, `centered: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `maxWidth: string = "xl"`, `showBreadcrumbs: boolean = false`, `breadcrumbs: unknown[] = []`, `breadcrumbParent: string = ""`, `breadcrumbParentHref: string = ""`, `breadcrumbCurrent: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `borderBottom: boolean = true`, `class: string = ""` +- Slots: `meta`, `actions`, `default` +- Outputs: None + +### SplitHero + +Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel. + +- Mount: `data-component="SplitHero"` +- Props: `eyebrow: string = ""`, `eyebrowIcon: string = "icon-[lucide--sparkles]"`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "xl"`, `fullBleed: boolean = true`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualStyle: string = "panel"`, `trustItems: unknown[] = []`, `class: string = ""` +- Slots: `default`, `actions`, `trust`, `visual` +- Outputs: None + +### TextLink + +Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling. + +- Mount: `data-component="TextLink"` +- Props: `label: string = "Learn more"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `showArrow: boolean = true`, `underline: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `disabled: boolean = false`, `class: string = ""` +- Slots: None +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ## Navigation ### BackToTop -Accessible scroll-to-top control with visibility threshold. +Provide a responsive floating control that returns long pages to the top and can show scroll progress. - Mount: `data-component="BackToTop"` -- Props: `threshold: number = 500`, `label: string = "Back to top"`, `ariaLabel: string = "Scroll back to top"`, `icon: string = "icon-[lucide--arrow-up]"`, `position: string = "right"`, `offset: string = "md"`, `behavior: string = "smooth"`, `showProgress: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `class: string = ""` +- Props: `threshold: number = 500`, `label: string = "Back to top"`, `ariaLabel: string = "Scroll back to top"`, `icon: string = "icon-[lucide--arrow-up]"`, `position: string = "right"`, `offset: string = "md"`, `behavior: string = "smooth"`, `showProgress: boolean = false`, `showLabel: boolean = false`, `alwaysVisible: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "round"`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### Breadcrumb -Theme-aware, responsive breadcrumb component. +Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events. - Mount: `data-component="Breadcrumb"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` -- Slots: `default` -- Events: `navigate`, `click` - -### Footer - -Responsive application footer with structured links and pre/post content slots. - -- Mount: `data-component="Footer"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: string = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""` -- Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right` -- Events: `select`, `action` +- Props: `label: string = "Breadcrumb"`, `items: unknown[] = []`, `active: string = ""`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""` +- Slots: None +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### MegaMenu Theme-aware, responsive mega menu component. - Mount: `data-component="MegaMenu"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `open`, `close`, `select` +- Outputs: `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Nav Theme-aware, responsive nav component. - Mount: `data-component="Nav"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `select`, `change` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Navbar Theme-aware, responsive navbar component. - Mount: `data-component="Navbar"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: string = {}`, `items: string = []`, `actions: string = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: Record = {}`, `items: unknown[] = []`, `actions: unknown[] = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `class: string = ""` - Slots: `topbar`, `actions` -- Events: `toggle`, `open`, `close`, `select`, `action` +- Outputs: `toggle({ open: boolean })`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string })`, `action({ item: string | number | boolean | null | object; value: string | number | boolean })` ### Pagination Theme-aware, responsive pagination component. - Mount: `data-component="Pagination"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `change`, `previous`, `next` - -### PreferenceSwitcher - -Accessible theme, accent color, and language preference controls. - -- Mount: `data-component="PreferenceSwitcher"` -- Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `class: string = ""` -- Slots: None -- Events: `theme`, `color`, `language` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `previous({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `next({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Scrollspy Theme-aware, responsive scrollspy component. - Mount: `data-component="Scrollspy"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `change` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Sidebar Theme-aware, responsive sidebar component. - Mount: `data-component="Sidebar"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `mobileLabel: string = "Open navigation"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `mobileLabel: string = "Open navigation"`, `class: string = ""` - Slots: `default` -- Events: `toggle`, `open`, `close`, `select` +- Outputs: `toggle({ open: boolean })`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ source: string })`, `select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string })` ### Stepper Theme-aware, responsive stepper component. - Mount: `data-component="Stepper"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `change`, `previous`, `next`, `complete` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `previous({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `next({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Tabs -Theme-aware, responsive tabs component. +Switch between related responsive content panels with horizontal or vertical orientation and selection events. - Mount: `data-component="Tabs"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ## Overlays ### ContextMenu -Theme-aware, responsive context menu component. +Open an accessible keyboard-aware action menu from pointer or keyboard context interactions. - Mount: `data-component="ContextMenu"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Context Menu"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: `open`, `close`, `select` +- Props: `items: unknown[] = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `trigger: string = "contextmenu"`, `placement: string = "pointer"`, `align: string = "start"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `title: string = ""`, `description: string = ""`, `label: string = "Context menu"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `minWidth: string = "14rem"`, `maxWidth: string = "20rem"`, `class: string = ""` +- Slots: `trigger`, `header`, `default`, `footer` +- Outputs: `open({ x: number; y: number; trigger: string; sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `select({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })`, `action({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })` ### Drawer -Theme-aware, responsive drawer component. +Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events. - Mount: `data-component="Drawer"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drawer"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: `open`, `close` +- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `placement: string = "right"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `title: string = "Drawer"`, `description: string = ""`, `icon: string = ""`, `label: string = "Drawer"`, `closeLabel: string = "Close drawer"`, `showClose: boolean = true`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `overlay: boolean = true`, `scrollable: boolean = true`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `class: string = ""` +- Slots: `trigger`, `header`, `default`, `footer` +- Outputs: `open({ placement: string; sourceEvent: Event })`, `close({ reason: string; placement: string; sourceEvent: Event })`, `cancel({ placement: string; sourceEvent: Event })` ### Dropdown -Theme-aware, responsive dropdown component. +Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement. - Mount: `data-component="Dropdown"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Open menu"`, `items: string = []`, `placement: string = "end"`, `class: string = ""` -- Slots: `trigger`, `header`, `footer` -- Events: `toggle`, `open`, `close`, `select` +- Props: `items: unknown[] = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `label: string = "Open menu"`, `icon: string = ""`, `showChevron: boolean = true`, `menuLabel: string = "Dropdown menu"`, `placement: string = "bottom-start"`, `width: string = "md"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `emptyLabel: string = "No menu items"`, `class: string = ""` +- Slots: `trigger`, `header`, `default`, `footer` +- Outputs: `toggle({ open: boolean; sourceEvent: Event; reason?: object })`, `open({ sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `select({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })`, `action({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })` ### Modal -Theme-aware, responsive modal component. +Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing. - Mount: `data-component="Modal"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Modal"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: `open`, `close`, `cancel`, `confirm` +- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = "Modal"`, `description: string = ""`, `icon: string = ""`, `label: string = "Modal dialog"`, `size: string = "md"`, `placement: string = "center"`, `color: string = "primary"`, `variant: string = "default"`, `showClose: boolean = true`, `closeLabel: string = "Close modal"`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `closeOnCancel: boolean = true`, `closeOnConfirm: boolean = false`, `showFooter: boolean = true`, `cancelLabel: string = "Cancel"`, `cancelIcon: string = ""`, `confirmLabel: string = "Confirm"`, `confirmIcon: string = ""`, `confirmDisabled: boolean = false`, `confirmLoading: boolean = false`, `destructive: boolean = false`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `scrollable: boolean = true`, `class: string = ""` +- Slots: `trigger`, `header`, `default`, `footer` +- Outputs: `open({ sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `cancel({ sourceEvent: Event })`, `confirm({ sourceEvent: Event })` ### Popover -Theme-aware, responsive popover component. +Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events. - Mount: `data-component="Popover"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Popover"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: `open`, `close` +- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `triggerLabel: string = "Open popover"`, `triggerIcon: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `placement: string = "bottom-start"`, `width: string = "md"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `showArrow: boolean = true`, `showClose: boolean = false`, `closeLabel: string = "Close popover"`, `closeOnOutside: boolean = true`, `closeOnEscape: boolean = true`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `closeOnAction: boolean = true`, `disabled: boolean = false`, `class: string = ""` +- Slots: `trigger`, `header`, `default`, `footer` +- Outputs: `toggle({ open: boolean; sourceEvent: Event; reason?: object })`, `open({ sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `action({ href: string; sourceEvent: Event })` ### Tooltip -Theme-aware, responsive tooltip component. +Show concise accessible contextual help on hover, focus, click, or controlled open state. - Mount: `data-component="Tooltip"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tooltip"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` -- Events: `open`, `close` +- Props: `id: string = ""`, `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = ""`, `description: string = ""`, `content: string = "Tooltip"`, `trigger: string = "hover"`, `placement: string = "top"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "dark"`, `maxWidth: string = "18rem"`, `offset: number = 10`, `showArrow: boolean = true`, `interactive: boolean = false`, `disabled: boolean = false`, `class: string = ""` +- Slots: `trigger`, `default` +- Outputs: `toggle({ open: boolean; reason: string; sourceEvent: Event })`, `open({ reason: string; sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })` ## Tables @@ -988,6 +992,6 @@ Theme-aware, responsive tooltip component. Theme-aware, responsive table component. - Mount: `data-component="Table"` -- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: unknown[] = []`, `rows: unknown[] = []`, `striped: boolean = true`, `class: string = ""` - Slots: `default` -- Events: `sort`, `select`, `rowClick` +- Outputs: `sort({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `rowClick({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` diff --git a/.publish/ui/component-catalog.json b/.publish/ui/component-catalog.json index 299cb70b..0c82d960 100644 --- a/.publish/ui/component-catalog.json +++ b/.publish/ui/component-catalog.json @@ -19,8 +19,7 @@ { "name": "AdvancedSelect", "category": "advanced-forms", - "purpose": "Theme-aware, responsive advanced select component.", - "events": ["search", "select", "change", "clear", "open", "close", "load", "error"] + "purpose": "Theme-aware, responsive advanced select component." }, { "name": "Alert", @@ -29,18 +28,18 @@ }, { "name": "AnnouncementBar", - "category": "blocks", - "purpose": "Accessible public announcement, emergency, maintenance, or status bar." + "category": "marketing", + "purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls." }, { "name": "AuthForm", - "category": "forms", - "purpose": "Reusable authentication form for sign-in, registration, recovery, reset, and MFA." + "category": "core", + "purpose": "Reusable auth form component." }, { "name": "AuthSplitLayout", - "category": "layout", - "purpose": "Responsive 50/50 authentication layout with content and form regions." + "category": "core", + "purpose": "Reusable auth split layout component." }, { "name": "Avatar", @@ -55,7 +54,7 @@ { "name": "BackToTop", "category": "navigation", - "purpose": "Accessible scroll-to-top control with visibility threshold." + "purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress." }, { "name": "Badge", @@ -70,7 +69,7 @@ { "name": "Breadcrumb", "category": "navigation", - "purpose": "Theme-aware, responsive breadcrumb component." + "purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events." }, { "name": "Button", @@ -85,7 +84,7 @@ { "name": "Card", "category": "base", - "purpose": "Theme-aware, responsive card component." + "purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots." }, { "name": "Carousel", @@ -125,13 +124,12 @@ { "name": "Columns", "category": "layout", - "purpose": "Theme-aware, responsive columns component." + "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width." }, { "name": "ComboBox", "category": "advanced-forms", - "purpose": "Editable autocomplete combobox with local and remote suggestions.", - "events": ["search", "select", "change", "clear", "open", "close", "load", "error"] + "purpose": "Editable autocomplete combobox with local and remote suggestions." }, { "name": "Confetti", @@ -141,12 +139,12 @@ { "name": "Container", "category": "layout", - "purpose": "Theme-aware, responsive container component." + "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options." }, { "name": "ContextMenu", "category": "overlays", - "purpose": "Theme-aware, responsive context menu component." + "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions." }, { "name": "CopyMarkup", @@ -155,8 +153,8 @@ }, { "name": "CTASection", - "category": "blocks", - "purpose": "Reusable closing call-to-action section with primary and secondary actions." + "category": "marketing", + "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content." }, { "name": "CustomScrollbar", @@ -186,7 +184,7 @@ { "name": "Divider", "category": "layout", - "purpose": "Theme-aware, responsive divider component." + "purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors." }, { "name": "DragAndDrop", @@ -196,27 +194,27 @@ { "name": "Drawer", "category": "overlays", - "purpose": "Theme-aware, responsive drawer component." + "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events." }, { "name": "Dropdown", "category": "overlays", - "purpose": "Theme-aware, responsive dropdown component." + "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement." }, { "name": "FeatureCard", - "category": "blocks", - "purpose": "Reusable linked feature or service card with icon, badge, description, and action." + "category": "marketing", + "purpose": "Present one linked feature or service with media, icon, badge, description, and action." }, { "name": "FeatureGrid", "category": "layout", - "purpose": "Responsive equal-height grid for feature and service cards." + "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid." }, { "name": "FeatureIconCard", - "category": "blocks", - "purpose": "Feature card with a prominent themed icon treatment." + "category": "marketing", + "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link." }, { "name": "FileInput", @@ -235,28 +233,28 @@ }, { "name": "Footer", - "category": "navigation", - "purpose": "Responsive application footer with structured links and pre/post content slots." + "category": "layout", + "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events." }, { "name": "Grid", "category": "layout", - "purpose": "Theme-aware, responsive grid component." + "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width." }, { "name": "Hero", - "category": "blocks", - "purpose": "Reusable public-page hero with actions, trust items, badges, and visual slots." + "category": "marketing", + "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel." }, { "name": "HeroActions", - "category": "base", - "purpose": "Responsive action group for hero and call-to-action sections." + "category": "marketing", + "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking." }, { "name": "Image", "category": "layout", - "purpose": "Theme-aware, responsive image component." + "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment." }, { "name": "Input", @@ -291,12 +289,12 @@ { "name": "Link", "category": "layout", - "purpose": "Theme-aware, responsive link component." + "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events." }, { "name": "List", "category": "base", - "purpose": "Theme-aware, responsive list component." + "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events." }, { "name": "ListGroup", @@ -306,17 +304,17 @@ { "name": "Map", "category": "integrations", - "purpose": "Theme-aware, responsive map component." + "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events." }, { "name": "MarketingSectionHeader", - "category": "blocks", - "purpose": "Marketing section heading with an optional linked action." + "category": "marketing", + "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action." }, { "name": "Marquee", "category": "base", - "purpose": "Theme-aware, responsive marquee component." + "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior." }, { "name": "MegaMenu", @@ -325,18 +323,18 @@ }, { "name": "MetricCard", - "category": "blocks", - "purpose": "Single statistic or operational metric with icon, trend, and optional action." + "category": "data", + "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action." }, { "name": "MetricGrid", - "category": "layout", - "purpose": "Responsive collection of metric cards." + "category": "data", + "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid." }, { "name": "Modal", "category": "overlays", - "purpose": "Theme-aware, responsive modal component." + "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing." }, { "name": "Nav", @@ -350,8 +348,8 @@ }, { "name": "PageHeader", - "category": "blocks", - "purpose": "Public and application page header with breadcrumbs, metadata, and actions." + "category": "marketing", + "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions." }, { "name": "Pagination", @@ -361,23 +359,22 @@ { "name": "PinInput", "category": "advanced-forms", - "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.", - "events": ["input", "change", "complete", "paste", "clear", "error"] + "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support." }, { "name": "Popover", "category": "overlays", - "purpose": "Theme-aware, responsive popover component." + "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events." }, { "name": "PortalDashboard", - "category": "blocks", - "purpose": "Responsive portal dashboard with metrics, actions, tasks, and updates." + "category": "core", + "purpose": "Reusable portal dashboard component." }, { "name": "PreferenceSwitcher", - "category": "navigation", - "purpose": "Accessible theme, accent color, and language preference controls." + "category": "core", + "purpose": "Reusable preference switcher component." }, { "name": "Progress", @@ -387,7 +384,7 @@ { "name": "PublicPageShell", "category": "layout", - "purpose": "Consistent structural wrapper for public-facing pages." + "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages." }, { "name": "Radio", @@ -411,18 +408,18 @@ }, { "name": "SearchBox", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive search box component." + "category": "forms", + "purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events." }, { "name": "Section", "category": "layout", - "purpose": "Theme-aware page section with consistent spacing, width, background, and border controls." + "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment." }, { "name": "SectionHeader", "category": "layout", - "purpose": "Reusable accessible section heading with eyebrow, title, description, icon, and actions." + "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy." }, { "name": "Select", @@ -446,13 +443,13 @@ }, { "name": "SplitHero", - "category": "blocks", - "purpose": "Two-column hero with configurable content and visual placement." + "category": "marketing", + "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel." }, { "name": "StatsBar", - "category": "blocks", - "purpose": "Compact responsive statistics strip." + "category": "data", + "purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals." }, { "name": "Stepper", @@ -482,7 +479,7 @@ { "name": "Tabs", "category": "navigation", - "purpose": "Theme-aware, responsive tabs component." + "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events." }, { "name": "Textarea", @@ -491,13 +488,13 @@ }, { "name": "TextLink", - "category": "layout", - "purpose": "Styled inline action link with icons, arrows, external state, and disabled handling." + "category": "marketing", + "purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling." }, { "name": "Timeline", "category": "base", - "purpose": "Theme-aware, responsive timeline component." + "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata." }, { "name": "TimePicker", @@ -522,13 +519,12 @@ { "name": "TogglePassword", "category": "advanced-forms", - "purpose": "Accessible password field with optional show and hide controls.", - "events": ["input", "change", "toggle"] + "purpose": "Accessible password field with optional show and hide controls." }, { "name": "Tooltip", "category": "overlays", - "purpose": "Theme-aware, responsive tooltip component." + "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state." }, { "name": "TreeView", @@ -538,7 +534,7 @@ { "name": "Typography", "category": "layout", - "purpose": "Theme-aware, responsive typography component." + "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy." }, { "name": "WysiwygEditor", diff --git a/.publish/ui/component-reference.json b/.publish/ui/component-reference.json index 5a717e4a..d85433a7 100644 --- a/.publish/ui/component-reference.json +++ b/.publish/ui/component-reference.json @@ -12,106 +12,137 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"accordion\"" + "default": "\"accordion\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "defaultOpen", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "alwaysOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "indicator", "type": "string", "required": false, - "default": "\"plus\"" + "default": "\"plus\"", + "options": [] }, { "name": "indicatorPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "showIndicator", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "bordered", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "separated", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "flush", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "contentItalic", "type": "boolean", "required": false, - "default": "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" }, @@ -125,46 +156,75 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Advanced Date Picker\"" + "default": "\"Advanced Date Picker\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "open", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "close", + "payloadType": "{ sourceEvent?: Event; [key: string]: 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" + } + ], "events": ["input", "change", "open", "close", "clear"], "source": "components/AdvancedDatePicker.wrn" }, @@ -178,46 +238,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Advanced Range Slider\"" + "default": "\"Advanced Range Slider\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "start", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "end", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["input", "change", "start", "end"], "source": "components/AdvancedRangeSlider.wrn" }, @@ -231,310 +316,395 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Advanced Select\"" + "default": "\"Advanced Select\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "values", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "groups", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Select an option\"" + "default": "\"Select an option\"", + "options": [] }, { "name": "placeholderIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "searchPlaceholder", "type": "string", "required": false, - "default": "\"Search options…\"" + "default": "\"Search options…\"", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "searchable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "clearable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "allowEmpty", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "tags", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "loadingLabel", "type": "string", "required": false, - "default": "\"Loading options…\"" + "default": "\"Loading options…\"", + "options": [] }, { "name": "emptyLabel", "type": "string", "required": false, - "default": "\"No options found\"" + "default": "\"No options found\"", + "options": [] }, { "name": "selectedOptionsLabel", "type": "string", "required": false, - "default": "\"Selected options\"" + "default": "\"Selected options\"", + "options": [] }, { "name": "clearLabel", "type": "string", "required": false, - "default": "\"Clear selection\"" + "default": "\"Clear selection\"", + "options": [] }, { "name": "createLabel", "type": "string", "required": false, - "default": "\"Create\"" + "default": "\"Create\"", + "options": [] }, { "name": "loadMoreLabel", "type": "string", "required": false, - "default": "\"Load more\"" + "default": "\"Load more\"", + "options": [] }, { "name": "searchMode", "type": "string", "required": false, - "default": "\"contains\"" + "default": "\"contains\"", + "options": [] }, { "name": "searchFields", "type": "string", "required": false, - "default": "\"label,description\"" + "default": "\"label,description\"", + "options": [] }, { "name": "minSearchLength", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "searchResultLimit", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "maxSelections", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "showCounter", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "counterTemplate", "type": "string", "required": false, - "default": "\"{selected} selected\"" + "default": "\"{selected} selected\"", + "options": [] }, { "name": "optionTemplate", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "selectedTemplate", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "closeOnSelect", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "scrollToSelected", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fixed", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom\"" + "default": "\"bottom\"", + "options": [] }, { "name": "remote", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "remoteUrl", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "remoteQueryParam", "type": "string", "required": false, - "default": "\"q\"" + "default": "\"q\"", + "options": [] }, { "name": "remoteDebounce", "type": "number", "required": false, - "default": "250" + "default": "250", + "options": [] }, { "name": "remoteAutoLoad", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "infinite", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "hasMore", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "page", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -548,397 +718,503 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"info\"" + "default": "\"info\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "radius", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "shadow", "type": "string", "required": false, - "default": "\"sm\"" + "default": "\"sm\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Alert\"" + "default": "\"Alert\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "actions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "showIcon", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dismissLabel", "type": "string", "required": false, - "default": "\"Dismiss alert\"" + "default": "\"Dismiss alert\"", + "options": [] }, { "name": "role", "type": "string", "required": false, - "default": "\"alert\"" + "default": "\"alert\"", + "options": [] }, { "name": "live", "type": "string", "required": false, - "default": "\"polite\"" + "default": "\"polite\"", + "options": [] }, { "name": "linkLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "linkHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "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": "blocks", - "purpose": "Accessible public announcement, emergency, maintenance, or status bar.", + "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": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badgeIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "message", "type": "string", "required": false, - "default": "\"Announcement\"" + "default": "\"Announcement\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--megaphone]\"" + "default": "\"icon-[lucide--megaphone]\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dismissLabel", "type": "string", "required": false, - "default": "\"Dismiss announcement\"" + "default": "\"Dismiss announcement\"", + "options": [] }, { "name": "sticky", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] + }, + { + "name": "width", + "type": "string", + "required": false, + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "role", "type": "string", "required": false, - "default": "\"status\"" + "default": "\"status\"", + "options": [] }, { "name": "live", "type": "string", "required": false, - "default": "\"polite\"" + "default": "\"polite\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], - "events": [], + "outputs": [ + { + "name": "dismiss", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], + "events": ["dismiss"], "source": "components/AnnouncementBar.wrn" }, { "name": "AuthForm", "mount": "AuthForm", - "category": "forms", - "purpose": "Reusable authentication form for sign-in, registration, recovery, reset, and MFA.", + "category": "core", + "purpose": "Reusable auth form component.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "mode", "type": "string", "required": false, - "default": "\"sign-in\"" + "default": "\"sign-in\"", + "options": [] }, { "name": "action", "type": "string", "required": false, - "default": "\"/api/auth/login\"" + "default": "\"/api/auth/login\"", + "options": [] }, { "name": "method", "type": "string", "required": false, - "default": "\"post\"" + "default": "\"post\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Sign in\"" + "default": "\"Sign in\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "returnTo", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "schema", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "showRemember", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showName", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "submitLabel", "type": "string", "required": false, - "default": "\"Continue\"" + "default": "\"Continue\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "layout", - "purpose": "Responsive 50/50 authentication layout with content and form regions.", + "category": "core", + "purpose": "Reusable auth split layout component.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"Secure identity\"" + "default": "\"Secure identity\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Welcome back\"" + "default": "\"Welcome back\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "brand", "type": "string", "required": false, - "default": "\"Police Management System\"" + "default": "\"Police Management System\"", + "options": [] }, { "name": "features", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["aside-extra", "form"], + "outputs": [], "events": [], "source": "components/AuthSplitLayout.wrn" }, @@ -952,112 +1228,144 @@ "name": "src", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "alt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "initials", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "shape", "type": "string", "required": false, - "default": "\"circle\"" + "default": "\"circle\"", + "options": [] }, { "name": "status", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "statusLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "statusPosition", "type": "string", "required": false, - "default": "\"bottom\"" + "default": "\"bottom\"", + "options": [] }, { "name": "badge", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badgeIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badgeLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "tooltip", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "string", "required": false, - "default": "\"lazy\"" + "default": "\"lazy\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1069,78 +1377,96 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "shape", "type": "string", "required": false, - "default": "\"circle\"" + "default": "\"circle\"", + "options": [] }, { "name": "layout", "type": "string", "required": false, - "default": "\"stack\"" + "default": "\"stack\"", + "options": [] }, { "name": "maxVisible", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "borderColor", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "showTooltips", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "overflowLabel", "type": "string", "required": false, - "default": "\"Show remaining members\"" + "default": "\"Show remaining members\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1148,82 +1474,116 @@ "name": "BackToTop", "mount": "BackToTop", "category": "navigation", - "purpose": "Accessible scroll-to-top control with visibility threshold.", + "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" + "default": "500", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Back to top\"" + "default": "\"Back to top\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Scroll back to top\"" + "default": "\"Scroll back to top\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--arrow-up]\"" + "default": "\"icon-[lucide--arrow-up]\"", + "options": [] }, { "name": "position", "type": "string", "required": false, - "default": "\"right\"" + "default": "\"right\"", + "options": [] }, { "name": "offset", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "behavior", "type": "string", "required": false, - "default": "\"smooth\"" + "default": "\"smooth\"", + "options": [] }, { "name": "showProgress", "type": "boolean", "required": false, - "default": "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] + }, + { + "name": "shape", + "type": "string", + "required": false, + "default": "\"round\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/BackToTop.wrn" }, @@ -1237,136 +1597,164 @@ "name": "label", "type": "string", "required": false, - "default": "\"Badge\"" + "default": "\"Badge\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "shape", "type": "string", "required": false, - "default": "\"pill\"" + "default": "\"pill\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "dot", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dotOnly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dotLabel", "type": "string", "required": false, - "default": "\"Status\"" + "default": "\"Status\"", + "options": [] }, { "name": "animated", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "avatarSrc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "avatarAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dismissLabel", "type": "string", "required": false, - "default": "\"Remove badge\"" + "default": "\"Remove badge\"", + "options": [] }, { "name": "truncate", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"12rem\"" + "default": "\"12rem\"", + "options": [] }, { "name": "anchorLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "anchorIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"inline\"" + "default": "\"inline\"", + "options": [] }, { "name": "anchorLabelText", "type": "string", "required": false, - "default": "\"Badge anchor\"" + "default": "\"Badge anchor\"", + "options": [] } ], "slots": [], + "outputs": [ + { + "name": "dismiss", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["dismiss"], "source": "components/Badge.wrn" }, @@ -1380,82 +1768,96 @@ "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.\"" + "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": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "citationTitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "citationUrl", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "avatarSrc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "avatarAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "quoteMark", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "italic", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Blockquote.wrn" }, @@ -1463,53 +1865,101 @@ "name": "Breadcrumb", "mount": "Breadcrumb", "category": "navigation", - "purpose": "Theme-aware, responsive breadcrumb component.", + "purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.", "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"" - }, { "name": "label", "type": "string", "required": false, - "default": "\"Breadcrumb\"" + "default": "\"Breadcrumb\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { - "name": "orientation", + "name": "separator", "type": "string", "required": false, - "default": "\"horizontal\"" + "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": "\"\"" + "default": "\"\"", + "options": [] } ], - "slots": ["default"], - "events": ["navigate", "click"], + "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" }, { @@ -1522,154 +1972,193 @@ "name": "label", "type": "string", "required": false, - "default": "\"Button\"" + "default": "\"Button\"", + "options": [] }, { "name": "loadingLabel", "type": "string", "required": false, - "default": "\"Loading…\"" + "default": "\"Loading…\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "as", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"button\"" + "default": "\"button\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "loading", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "pill", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "ariaPressed", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "ariaExpanded", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "ariaControls", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "autofocus", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "controlClass", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1681,84 +2170,111 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "responsive", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "attached", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "selectable", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "toolbar", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Button group\"" + "default": "\"Button group\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1766,196 +2282,253 @@ "name": "Card", "mount": "Card", "category": "base", - "purpose": "Theme-aware, responsive card component.", + "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\"" + "default": "\"Card title\"", + "options": [] }, { "name": "subtitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "header", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "footer", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imageSrc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imageAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imagePosition", "type": "string", "required": false, - "default": "\"top\"" + "default": "\"top\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "headerActions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "navigation", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "activeNav", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "mobileNavigation", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "alertTitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "alertDescription", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "empty", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "emptyTitle", "type": "string", "required": false, - "default": "\"No data to show\"" + "default": "\"No data to show\"", + "options": [] }, { "name": "emptyIcon", "type": "string", "required": false, - "default": "\"icon-[lucide--inbox]\"" + "default": "\"icon-[lucide--inbox]\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "layout", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "hover", "type": "string", "required": false, - "default": "\"none\"" + "default": "\"none\"", + "options": [] }, { "name": "scrollable", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "maxHeight", "type": "string", "required": false, - "default": "\"18rem\"" + "default": "\"18rem\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1969,136 +2542,200 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "activeIndex", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "slidesPerView", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"0.75rem\"" + "default": "\"0.75rem\"", + "options": [] }, { "name": "showPagination", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isAutoPlay", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autoplayInterval", "type": "number", "required": false, - "default": "4000" + "default": "4000", + "options": [] }, { "name": "isInfiniteLoop", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isRTL", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isCentered", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isDraggable", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isAutoHeight", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isSnap", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showCounter", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "thumbnails", "type": "string", "required": false, - "default": "\"none\"" + "default": "\"none\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Content carousel\"" + "default": "\"Content carousel\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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", @@ -2123,46 +2760,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Chart\"" + "default": "\"Chart\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "dataPointClick", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "legendToggle", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + } + ], "events": ["select", "dataPointClick", "legendToggle"], "source": "components/Chart.wrn" }, @@ -2176,70 +2834,99 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "oneSided", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showAvatars", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showMetadata", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Conversation\"" + "default": "\"Conversation\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2253,166 +2940,215 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Checkbox\"" + "default": "\"Checkbox\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"on\"" + "default": "\"on\"", + "options": [] }, { "name": "values", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "checked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "indeterminate", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "card", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "rightAligned", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "list", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2426,46 +3162,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Clipboard\"" + "default": "\"Clipboard\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "copy", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "success", + "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": ["copy", "success", "error"], "source": "components/Clipboard.wrn" }, @@ -2479,52 +3236,74 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "mode", "type": "string", "required": false, - "default": "\"panel\"" + "default": "\"panel\"", + "options": [] }, { "name": "initialOpenIndexes", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Collapsible content\"" + "default": "\"Collapsible content\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2538,118 +3317,155 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Color\"" + "default": "\"Color\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"#2563eb\"" + "default": "\"#2563eb\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2657,46 +3473,53 @@ "name": "Columns", "mount": "Columns", "category": "layout", - "purpose": "Theme-aware, responsive columns component.", + "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Columns.wrn" }, @@ -2710,250 +3533,325 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"ComboBox\"" + "default": "\"ComboBox\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "groups", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Search or select an option\"" + "default": "\"Search or select an option\"", + "options": [] }, { "name": "searchPlaceholder", "type": "string", "required": false, - "default": "\"Start typing…\"" + "default": "\"Start typing…\"", + "options": [] }, { "name": "clearable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "allowCustomValue", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "loadingLabel", "type": "string", "required": false, - "default": "\"Loading suggestions…\"" + "default": "\"Loading suggestions…\"", + "options": [] }, { "name": "emptyLabel", "type": "string", "required": false, - "default": "\"No matching options\"" + "default": "\"No matching options\"", + "options": [] }, { "name": "clearLabel", "type": "string", "required": false, - "default": "\"Clear value\"" + "default": "\"Clear value\"", + "options": [] }, { "name": "toggleLabel", "type": "string", "required": false, - "default": "\"Toggle suggestions\"" + "default": "\"Toggle suggestions\"", + "options": [] }, { "name": "searchMode", "type": "string", "required": false, - "default": "\"contains\"" + "default": "\"contains\"", + "options": [] }, { "name": "searchFields", "type": "string", "required": false, - "default": "\"label,description\"" + "default": "\"label,description\"", + "options": [] }, { "name": "minSearchLength", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "searchResultLimit", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "optionTemplate", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "closeOnSelect", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fixed", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom\"" + "default": "\"bottom\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"off\"" + "default": "\"off\"", + "options": [] }, { "name": "remote", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "remoteUrl", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "remoteQueryParam", "type": "string", "required": false, - "default": "\"q\"" + "default": "\"q\"", + "options": [] }, { "name": "remoteDebounce", "type": "number", "required": false, - "default": "250" + "default": "250", + "options": [] }, { "name": "remoteAutoLoad", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "infinite", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "hasMore", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "page", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "loadMoreLabel", "type": "string", "required": false, - "default": "\"Load more\"" + "default": "\"Load more\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2967,46 +3865,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Confetti\"" + "default": "\"Confetti\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "start", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "complete", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["start", "complete"], "source": "components/Confetti.wrn" }, @@ -3014,46 +3929,53 @@ "name": "Container", "mount": "Container", "category": "layout", - "purpose": "Theme-aware, responsive container component.", + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Container.wrn" }, @@ -3061,59 +3983,155 @@ "name": "ContextMenu", "mount": "ContextMenu", "category": "overlays", - "purpose": "Theme-aware, responsive context menu component.", + "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.", "props": [ { - "name": "size", - "type": "string", + "name": "items", + "type": "unknown[]", "required": false, - "default": "\"default\"" - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Context Menu\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" + "default": "[]", + "options": [] }, { "name": "open", "type": "boolean", "required": false, - "default": "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": "\"bottom\"" + "default": "\"pointer\"", + "options": [] }, { - "name": "closeLabel", + "name": "align", "type": "string", "required": false, - "default": "\"Close\"" + "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": "\"\"" + "default": "\"\"", + "options": [] } ], - "slots": ["default"], - "events": ["open", "close", "select"], + "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" }, { @@ -3126,195 +4144,296 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Copy Markup\"" + "default": "\"Copy Markup\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [ + { + "name": "copy", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "success", + "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": ["copy", "success", "error"], "source": "components/CopyMarkup.wrn" }, { "name": "CTASection", "mount": "CTASection", - "category": "blocks", - "purpose": "Reusable closing call-to-action section with primary and secondary actions.", + "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": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Ready to get started?\"" + "default": "\"Ready to get started?\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"center\"" + "default": "\"center\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "primaryLabel", "type": "string", "required": false, - "default": "\"Get started\"" + "default": "\"Get started\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"#\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "backgroundImage", "type": "string", "required": false, - "default": "\"\"" + "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\"" + "default": "\"xl\"", + "options": [] + }, + { + "name": "fullBleed", + "type": "boolean", + "required": false, + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default", "actions", "visual", "footer"], + "outputs": [], "events": [], "source": "components/CTASection.wrn" }, @@ -3328,40 +4447,52 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "scroll", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + } + ], "events": ["scroll"], "source": "components/CustomScrollbar.wrn" }, @@ -3375,46 +4506,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Data Map\"" + "default": "\"Data Map\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3428,46 +4576,75 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "caption", "type": "string", "required": false, - "default": "\"Data Table\"" + "default": "\"Data Table\"", + "options": [] }, { "name": "columns", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "rows", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "striped", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "sort", + "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": "rowClick", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + }, + { + "name": "pageChange", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["sort", "select", "change", "rowClick", "pageChange"], "source": "components/DataTable.wrn" }, @@ -3481,154 +4658,209 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Date Picker\"" + "default": "\"Date Picker\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"date\"" + "default": "\"date\"", + "options": [] }, { "name": "locale", "type": "string", "required": false, - "default": "\"en-US\"" + "default": "\"en-US\"", + "options": [] }, { "name": "firstDayOfWeek", "type": "number", "required": false, - "default": "0" + "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\" }]" + "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]" + "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]" + "default": "[2024, 2025, 2026, 2027, 2028, 2029, 2030]", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3642,88 +4874,112 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Device Frame\"" + "default": "\"Device Frame\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "device", "type": "string", "required": false, - "default": "\"phone\"" + "default": "\"phone\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"portrait\"" + "default": "\"portrait\"", + "options": [] }, { "name": "src", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "srcdoc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "frameTitle", "type": "string", "required": false, - "default": "\"Device preview\"" + "default": "\"Device preview\"", + "options": [] }, { "name": "showToolbar", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "allow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3731,40 +4987,46 @@ "name": "Divider", "mount": "Divider", "category": "layout", - "purpose": "Theme-aware, responsive divider component.", + "purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/Divider.wrn" }, @@ -3778,46 +5040,79 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Drag And Drop\"" + "default": "\"Drag And Drop\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3825,206 +5120,517 @@ "name": "Drawer", "mount": "Drawer", "category": "overlays", - "purpose": "Theme-aware, responsive drawer component.", + "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.", "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"" - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Drawer\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, { "name": "open", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] + }, + { + "name": "defaultOpen", + "type": "boolean", + "required": false, + "default": "false", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom\"" + "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\"" + "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": "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": "\"\"" + "default": "\"\"", + "options": [] } ], - "slots": ["default"], - "events": ["open", "close"], + "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": "Theme-aware, responsive dropdown component.", + "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.", "props": [ { - "name": "size", - "type": "string", + "name": "items", + "type": "unknown[]", "required": false, - "default": "\"default\"" + "default": "[]", + "options": [] }, { - "name": "color", - "type": "string", + "name": "open", + "type": "boolean", "required": false, - "default": "\"primary\"" + "default": "false", + "options": [] + }, + { + "name": "defaultOpen", + "type": "boolean", + "required": false, + "default": "false", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Open menu\"" + "default": "\"Open menu\"", + "options": [] }, { - "name": "items", + "name": "icon", "type": "string", "required": false, - "default": "[]" + "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": "\"end\"" + "default": "\"bottom-start\"", + "options": [] }, { - "name": "class", + "name": "width", "type": "string", "required": false, - "default": "\"\"" - } - ], - "slots": ["trigger", "header", "footer"], - "events": ["toggle", "open", "close", "select"], - "source": "components/Dropdown.wrn" - }, - { - "name": "FeatureCard", - "mount": "FeatureCard", - "category": "blocks", - "purpose": "Reusable linked feature or service card with icon, badge, description, and action.", - "props": [ - { - "name": "icon", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Feature\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "href", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "actionLabel", - "type": "string", - "required": false, - "default": "\"Learn more\"" - }, - { - "name": "actionIcon", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "badge", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "badgeColor", - "type": "string", - "required": false, - "default": "\"primary\"" + "default": "\"md\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"raised\"", + "options": [] }, { - "name": "hover", - "type": "string", + "name": "closeOnSelect", + "type": "boolean", "required": false, - "default": "\"lift\"" + "default": "true", + "options": [] }, { - "name": "align", - "type": "string", + "name": "closeOnOutside", + "type": "boolean", "required": false, - "default": "\"left\"" + "default": "true", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] + }, + { + "name": "emptyLabel", + "type": "string", + "required": false, + "default": "\"No menu items\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], - "slots": ["icon", "default", "footer"], + "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" }, @@ -4032,171 +5638,219 @@ "name": "FeatureGrid", "mount": "FeatureGrid", "category": "layout", - "purpose": "Responsive equal-height grid for feature and service cards.", + "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.", "props": [ - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"" - }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "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" + "default": "3", + "options": [] }, { "name": "tabletColumns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "mobileColumns", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "minItemWidth", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "equalHeight", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"stretch\"" + "default": "\"stretch\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"full\"" + "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": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/FeatureGrid.wrn" }, { "name": "FeatureIconCard", "mount": "FeatureIconCard", - "category": "blocks", - "purpose": "Feature card with a prominent themed icon treatment.", + "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]\"" + "default": "\"icon-[lucide--sparkles]\"", + "options": [] }, { "name": "iconSize", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "iconVariant", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Feature\"" + "default": "\"Feature\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"Explore\"" + "default": "\"Explore\"", + "options": [] }, { "name": "badge", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "hover", "type": "string", "required": false, - "default": "\"lift\"" + "default": "\"lift\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default", "footer"], + "outputs": [], "events": [], "source": "components/FeatureIconCard.wrn" }, @@ -4210,130 +5864,181 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"File\"" + "default": "\"File\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Choose a file\"" + "default": "\"Choose a file\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--upload]\"" + "default": "\"icon-[lucide--upload]\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "accept", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -4347,46 +6052,83 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"File Upload\"" + "default": "\"File Upload\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "upload", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "progress", + "payloadType": "{ progress: number; [key: string]: string | number | boolean | null | object } | number" + }, + { + "name": "success", + "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": "cancel", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "remove", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["select", "upload", "progress", "success", "error", "cancel", "remove"], "source": "components/FileUpload.wrn" }, @@ -4400,141 +6142,186 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Progress\"" + "default": "\"Progress\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "50" + "default": "50", + "options": [] }, { "name": "max", "type": "number", "required": false, - "default": "100" + "default": "100", + "options": [] }, { "name": "showValue", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fileName", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "fileSize", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "uploadedSize", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "status", "type": "string", "required": false, - "default": "\"uploading\"" + "default": "\"uploading\"", + "options": [] }, { "name": "cancelLabel", "type": "string", "required": false, - "default": "\"Cancel upload\"" + "default": "\"Cancel upload\"", + "options": [] }, { "name": "retryLabel", "type": "string", "required": false, - "default": "\"Retry upload\"" + "default": "\"Retry upload\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "navigation", - "purpose": "Responsive application footer with structured links and pre/post content slots.", + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Footer navigation\"" + "default": "\"Footer navigation\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"compact\"" + "default": "\"compact\"", + "options": [] }, { "name": "copyright", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -4542,236 +6329,399 @@ "name": "Grid", "mount": "Grid", "category": "layout", - "purpose": "Theme-aware, responsive grid component.", + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Grid.wrn" }, { "name": "Hero", "mount": "Hero", - "category": "blocks", - "purpose": "Reusable public-page hero with actions, trust items, badges, and visual slots.", + "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": "\"\"" + "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\"" + "default": "\"Build something remarkable\"", + "options": [] }, { "name": "highlight", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "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": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] + }, + { + "name": "primaryTarget", + "type": "string", + "required": false, + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] + }, + { + "name": "secondaryTarget", + "type": "string", + "required": false, + "default": "\"\"", + "options": [] }, { "name": "tertiaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "tertiaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] + }, + { + "name": "tertiaryIcon", + "type": "string", + "required": false, + "default": "\"\"", + "options": [] + }, + { + "name": "tertiaryTarget", + "type": "string", + "required": false, + "default": "\"\"", + "options": [] }, { "name": "badges", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "trustItems", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"], + "outputs": [], "events": [], "source": "components/Hero.wrn" }, { "name": "HeroActions", "mount": "HeroActions", - "category": "base", - "purpose": "Responsive action group for hero and call-to-action sections.", + "category": "marketing", + "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.", "props": [ { "name": "actions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "stackOnMobile", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fullWidthMobile", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/HeroActions.wrn" }, @@ -4779,64 +6729,74 @@ "name": "Image", "mount": "Image", "category": "layout", - "purpose": "Theme-aware, responsive image component.", + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "src", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "alt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "width", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "height", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "string", "required": false, - "default": "\"lazy\"" + "default": "\"lazy\"", + "options": [] }, { "name": "rounded", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Image.wrn" }, @@ -4850,172 +6810,230 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Input\"" + "default": "\"Input\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inputmode", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "minlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "maxlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "pattern", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -5029,142 +7047,191 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Input group\"" + "default": "\"Input group\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "startText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "endText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -5178,244 +7245,302 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"quantity\"" + "default": "\"quantity\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "precision", "type": "string", "required": false, - "default": "\"auto\"" + "default": "\"auto\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "prefix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "suffix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"off\"" + "default": "\"off\"", + "options": [] }, { "name": "inputMode", "type": "string", "required": false, - "default": "\"decimal\"" + "default": "\"decimal\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "inputDisabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "buttonsDisabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "allowInput", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "keyboard", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "wheel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "clamp", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showButtons", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showValidationMessage", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "decrementLabel", "type": "string", "required": false, - "default": "\"Decrease value\"" + "default": "\"Decrease value\"", + "options": [] }, { "name": "incrementLabel", "type": "string", "required": false, - "default": "\"Increase value\"" + "default": "\"Increase value\"", + "options": [] }, { "name": "controlsLabel", "type": "string", "required": false, - "default": "\"Quantity controls\"" + "default": "\"Quantity controls\"", + "options": [] }, { "name": "requiredMessage", "type": "string", "required": false, - "default": "\"A value is required.\"" + "default": "\"A value is required.\"", + "options": [] }, { "name": "minMessage", "type": "string", "required": false, - "default": "\"Value is below the minimum.\"" + "default": "\"Value is below the minimum.\"", + "options": [] }, { "name": "maxMessage", "type": "string", "required": false, - "default": "\"Value is above the maximum.\"" + "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" }, @@ -5429,28 +7554,33 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"⌘ K\"" + "default": "\"⌘ K\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Kbd.wrn" }, @@ -5464,40 +7594,60 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "resizeStart", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "resize", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "resizeEnd", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + } + ], "events": ["resizeStart", "resize", "resizeEnd"], "source": "components/LayoutSplitter.wrn" }, @@ -5511,46 +7661,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Legend Indicator\"" + "default": "\"Legend Indicator\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -5558,58 +7725,67 @@ "name": "Link", "mount": "Link", "category": "layout", - "purpose": "Theme-aware, responsive link component.", + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Link\"" + "default": "\"Link\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"#\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "external", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Link.wrn" }, @@ -5617,52 +7793,60 @@ "name": "List", "mount": "List", "category": "base", - "purpose": "Theme-aware, responsive list component.", + "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"List\"" + "default": "\"List\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/List.wrn" }, @@ -5676,46 +7860,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"List Group\"" + "default": "\"List Group\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -5723,135 +7924,156 @@ "name": "Map", "mount": "Map", "category": "integrations", - "purpose": "Theme-aware, responsive map component.", + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Map\"" + "default": "\"Map\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Map.wrn" }, { "name": "MarketingSectionHeader", "mount": "MarketingSectionHeader", - "category": "blocks", - "purpose": "Marketing section heading with an optional linked action.", + "category": "marketing", + "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.", "props": [ { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"split\"" + "default": "\"split\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionExternal", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["icon", "actions", "default"], + "outputs": [], "events": [], "source": "components/MarketingSectionHeader.wrn" }, @@ -5859,52 +8081,60 @@ "name": "Marquee", "mount": "Marquee", "category": "base", - "purpose": "Theme-aware, responsive marquee component.", + "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Marquee\"" + "default": "\"Marquee\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Marquee.wrn" }, @@ -5918,289 +8148,621 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Mega Menu\"" + "default": "\"Mega Menu\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "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": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["open", "close", "select"], "source": "components/MegaMenu.wrn" }, { "name": "MetricCard", "mount": "MetricCard", - "category": "blocks", - "purpose": "Single statistic or operational metric with icon, trend, and optional action.", + "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\"" + "default": "\"Metric\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"0\"" + "default": "\"0\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] + }, + { + "name": "iconStyle", + "type": "string", + "required": false, + "default": "\"soft\"", + "options": [] }, { "name": "prefix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "suffix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] + }, + { + "name": "badge", + "type": "string", + "required": false, + "default": "\"\"", + "options": [] }, { "name": "trend", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "trendLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "trendDirection", "type": "string", "required": false, - "default": "\"neutral\"" + "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": "\"\"" + "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": "\"\"" + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] + }, + { + "name": "hover", + "type": "string", + "required": false, + "default": "\"lift\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], - "slots": [], - "events": [], + "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": "layout", - "purpose": "Responsive collection of metric cards.", + "category": "data", + "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.", "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "tabletColumns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "mobileColumns", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "equalHeight", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "dividers", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "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": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], - "events": [], + "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": "Theme-aware, responsive modal component.", + "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.", "props": [ { - "name": "size", - "type": "string", + "name": "open", + "type": "boolean", "required": false, - "default": "\"default\"" + "default": "false", + "options": [] }, { - "name": "color", - "type": "string", + "name": "defaultOpen", + "type": "boolean", "required": false, - "default": "\"primary\"" + "default": "false", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Modal\"" + "default": "\"Modal\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { - "name": "open", - "type": "boolean", + "name": "icon", + "type": "string", "required": false, - "default": "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": "\"bottom\"" + "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\"" + "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": "class", "type": "string", "required": false, - "default": "\"\"" + "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 }" } ], - "slots": ["default"], "events": ["open", "close", "cancel", "confirm"], "source": "components/Modal.wrn" }, @@ -6214,46 +8776,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Nav\"" + "default": "\"Nav\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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/Nav.wrn" }, @@ -6267,201 +8846,304 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Primary navigation\"" + "default": "\"Primary navigation\"", + "options": [] }, { "name": "topbarLabel", "type": "string", "required": false, - "default": "\"Utility navigation\"" + "default": "\"Utility navigation\"", + "options": [] }, { "name": "brand", - "type": "string", + "type": "Record", "required": false, - "default": "{}" + "default": "{}", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "actions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "sticky", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "openOnHover", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"full\"" + "default": "\"full\"", + "options": [] }, { "name": "mobileLabel", "type": "string", "required": false, - "default": "\"Toggle navigation\"" + "default": "\"Toggle navigation\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "blocks", - "purpose": "Public and application page header with breadcrumbs, metadata, and actions.", + "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": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] + }, + { + "name": "id", + "type": "string", + "required": false, + "default": "\"page-title\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { - "name": "size", - "type": "string", + "name": "centered", + "type": "boolean", "required": false, - "default": "\"default\"" + "default": "false", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "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" + "default": "false", + "options": [] }, { "name": "breadcrumbs", + "type": "unknown[]", + "required": false, + "default": "[]", + "options": [] + }, + { + "name": "breadcrumbParent", "type": "string", "required": false, - "default": "[]" + "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": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] + }, + { + "name": "borderBottom", + "type": "boolean", + "required": false, + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["meta", "actions", "default"], + "outputs": [], "events": [], "source": "components/PageHeader.wrn" }, @@ -6475,46 +9157,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Pagination\"" + "default": "\"Pagination\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "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": "previous", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "next", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["change", "previous", "next"], "source": "components/Pagination.wrn" }, @@ -6528,160 +9231,212 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Verification code\"" + "default": "\"Verification code\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"pin\"" + "default": "\"pin\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "length", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "pattern", "type": "string", "required": false, - "default": "\"[0-9]\"" + "default": "\"[0-9]\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "inputMode", "type": "string", "required": false, - "default": "\"numeric\"" + "default": "\"numeric\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"○\"" + "default": "\"○\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"one-time-code\"" + "default": "\"one-time-code\"", + "options": [] }, { "name": "masked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autoFocus", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autoSubmit", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "allowPaste", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "clearable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "clearLabel", "type": "string", "required": false, - "default": "\"Clear code\"" + "default": "\"Clear code\"", + "options": [] }, { "name": "separator", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "groupSize", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -6689,218 +9444,396 @@ "name": "Popover", "mount": "Popover", "category": "overlays", - "purpose": "Theme-aware, responsive popover component.", + "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.", "props": [ { - "name": "size", - "type": "string", + "name": "open", + "type": "boolean", "required": false, - "default": "\"default\"" + "default": "false", + "options": [] }, { - "name": "color", + "name": "defaultOpen", + "type": "boolean", + "required": false, + "default": "false", + "options": [] + }, + { + "name": "triggerLabel", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"Open popover\"", + "options": [] + }, + { + "name": "triggerIcon", + "type": "string", + "required": false, + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Popover\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { - "name": "open", - "type": "boolean", + "name": "icon", + "type": "string", "required": false, - "default": "false" + "default": "\"\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom\"" + "default": "\"bottom-start\"", + "options": [] }, { - "name": "closeLabel", + "name": "width", "type": "string", "required": false, - "default": "\"Close\"" + "default": "\"md\"", + "options": [] }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"" - } - ], - "slots": ["default"], - "events": ["open", "close"], - "source": "components/Popover.wrn" - }, - { - "name": "PortalDashboard", - "mount": "PortalDashboard", - "category": "blocks", - "purpose": "Responsive portal dashboard with metrics, actions, tasks, and updates.", - "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { - "name": "eyebrow", + "name": "variant", "type": "string", "required": false, - "default": "\"Overview\"" + "default": "\"raised\"", + "options": [] }, { - "name": "eyebrowKey", - "type": "string", + "name": "showArrow", + "type": "boolean", "required": false, - "default": "\"\"" + "default": "true", + "options": [] }, { - "name": "title", - "type": "string", + "name": "showClose", + "type": "boolean", "required": false, - "default": "\"Dashboard\"" + "default": "false", + "options": [] }, { - "name": "titleKey", + "name": "closeLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Close popover\"", + "options": [] }, { - "name": "description", - "type": "string", + "name": "closeOnOutside", + "type": "boolean", "required": false, - "default": "\"\"" + "default": "true", + "options": [] }, { - "name": "descriptionKey", - "type": "string", + "name": "closeOnEscape", + "type": "boolean", "required": false, - "default": "\"\"" + "default": "true", + "options": [] }, { - "name": "userName", + "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { - "name": "metrics", + "name": "actionHref", "type": "string", "required": false, - "default": "[]" + "default": "\"\"", + "options": [] }, { - "name": "actions", + "name": "actionIcon", "type": "string", "required": false, - "default": "[]" + "default": "\"\"", + "options": [] }, { - "name": "updates", - "type": "string", + "name": "closeOnAction", + "type": "boolean", "required": false, - "default": "[]" + "default": "true", + "options": [] }, { - "name": "tasks", - "type": "string", + "name": "disabled", + "type": "boolean", "required": false, - "default": "[]" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "navigation", - "purpose": "Accessible theme, accent color, and language preference controls.", + "category": "core", + "purpose": "Reusable preference switcher component.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "themeLabel", "type": "string", "required": false, - "default": "\"Theme\"" + "default": "\"Theme\"", + "options": [] }, { "name": "colorLabel", "type": "string", "required": false, - "default": "\"Accent color\"" + "default": "\"Accent color\"", + "options": [] }, { "name": "languageLabel", "type": "string", "required": false, - "default": "\"Language\"" + "default": "\"Language\"", + "options": [] }, { "name": "languages", "type": "string", "required": false, - "default": "[" + "default": "[", + "options": [] }, { "name": "colors", "type": "string", "required": false, - "default": "[" + "default": "[", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -6914,46 +9847,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Progress\"" + "default": "\"Progress\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "50" + "default": "50", + "options": [] }, { "name": "max", "type": "number", "required": false, - "default": "100" + "default": "100", + "options": [] }, { "name": "showValue", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/progress.wrn" }, @@ -6961,70 +9902,81 @@ "name": "PublicPageShell", "mount": "PublicPageShell", "category": "layout", - "purpose": "Consistent structural wrapper for public-facing pages.", + "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\"" + "default": "\"full\"", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "headerOffset", "type": "string", "required": false, - "default": "\"none\"" + "default": "\"none\"", + "options": [] }, { "name": "background", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "overflow", "type": "string", "required": false, - "default": "\"clip\"" + "default": "\"clip\"", + "options": [] }, { "name": "minHeight", "type": "string", "required": false, - "default": "\"screen\"" + "default": "\"screen\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["before", "default", "after"], + "outputs": [], "events": [], "source": "components/PublicPageShell.wrn" }, @@ -7038,154 +9990,201 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Radio\"" + "default": "\"Radio\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"on\"" + "default": "\"on\"", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "checked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "card", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "rightAligned", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "list", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7199,160 +10198,204 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Range\"" + "default": "\"Range\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "50" + "default": "50", + "options": [] }, { "name": "min", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "max", "type": "number", "required": false, - "default": "100" + "default": "100", + "options": [] }, { "name": "step", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "showValue", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showBounds", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showSteps", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "marks", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7366,46 +10409,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Rating\"" + "default": "\"Rating\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7419,135 +10479,162 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Scrollspy\"" + "default": "\"Scrollspy\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "change", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["change"], "source": "components/Scrollspy.wrn" }, { "name": "SearchBox", "mount": "SearchBox", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive search box component.", + "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\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Search Box\"" + "default": "\"Search Box\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"search\"" + "default": "\"search\"", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/SearchBox.wrn" }, @@ -7555,70 +10642,81 @@ "name": "Section", "mount": "Section", "category": "layout", - "purpose": "Theme-aware page section with consistent spacing, width, background, and border controls.", + "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.", "props": [ { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "spacing", "type": "string", "required": false, - "default": "\"lg\"" + "default": "\"lg\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "borderTop", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "borderBottom", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Section.wrn" }, @@ -7626,70 +10724,81 @@ "name": "SectionHeader", "mount": "SectionHeader", "category": "layout", - "purpose": "Reusable accessible section heading with eyebrow, title, description, icon, and actions.", + "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.", "props": [ { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "headingLevel", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"3xl\"" + "default": "\"3xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["icon", "default", "actions"], + "outputs": [], "events": [], "source": "components/SectionHeader.wrn" }, @@ -7703,136 +10812,188 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Select\"" + "default": "\"Select\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "values", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Select an option\"" + "default": "\"Select an option\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7846,52 +11007,78 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Sidebar\"" + "default": "\"Sidebar\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "mobileLabel", "type": "string", "required": false, - "default": "\"Open navigation\"" + "default": "\"Open navigation\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "toggle", + "payloadType": "{ open: boolean }" + }, + { + "name": "open", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "close", + "payloadType": "{ source: string }" + }, + { + "name": "select", + "payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean; level: string }" + } + ], "events": ["toggle", "open", "close", "select"], "source": "components/Sidebar.wrn" }, @@ -7905,34 +11092,40 @@ "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Loading\"" + "default": "\"Loading\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "lines", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/skeleton.wrn" }, @@ -7946,224 +11139,351 @@ "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Loading\"" + "default": "\"Loading\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "lines", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/spinner.wrn" }, { "name": "SplitHero", "mount": "SplitHero", - "category": "blocks", - "purpose": "Two-column hero with configurable content and visual placement.", + "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": "\"\"" + "default": "\"\"", + "options": [] + }, + { + "name": "eyebrowIcon", + "type": "string", + "required": false, + "default": "\"icon-[lucide--sparkles]\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"A better digital experience\"" + "default": "\"A better digital experience\"", + "options": [] }, { "name": "highlight", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualPosition", "type": "string", "required": false, - "default": "\"right\"" + "default": "\"right\"", + "options": [] }, { "name": "reverse", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ratio", "type": "string", "required": false, - "default": "\"balanced\"" + "default": "\"balanced\"", + "options": [] + }, + { + "name": "align", + "type": "string", + "required": false, + "default": "\"left\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "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": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], - "slots": ["actions", "trust", "default", "visual"], + "slots": ["default", "actions", "trust", "visual"], + "outputs": [], "events": [], "source": "components/SplitHero.wrn" }, { "name": "StatsBar", "mount": "StatsBar", - "category": "blocks", - "purpose": "Compact responsive statistics strip.", + "category": "data", + "purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.", "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "dividers", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "icons", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"raised\"" + "default": "\"raised\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/StatsBar.wrn" }, @@ -8177,46 +11497,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Stepper\"" + "default": "\"Stepper\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "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": "previous", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "next", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "complete", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["change", "previous", "next", "complete"], "source": "components/Stepper.wrn" }, @@ -8230,166 +11575,207 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Password\"" + "default": "\"Password\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"password\"" + "default": "\"password\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Create a strong password\"" + "default": "\"Create a strong password\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"new-password\"" + "default": "\"new-password\"", + "options": [] }, { "name": "minLength", "type": "number", "required": false, - "default": "8" + "default": "8", + "options": [] }, { "name": "specialCharactersSet", "type": "string", "required": false, - "default": "\"!@#$%^&*()_+-=[]{}|;:,.<>?\"" + "default": "\"!@#$%^&*()_+-=[]{}|;:,.<>?\"", + "options": [] }, { "name": "requireLowercase", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "requireUppercase", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "requireNumber", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "requireSpecialCharacter", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showRequirements", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "presentation", "type": "string", "required": false, - "default": "\"inline\"" + "default": "\"inline\"", + "options": [] }, { "name": "hintText", "type": "string", "required": false, - "default": "\"Use a unique password you do not use elsewhere.\"" + "default": "\"Use a unique password you do not use elsewhere.\"", + "options": [] }, { "name": "emptyLabel", "type": "string", "required": false, - "default": "\"Enter a password\"" + "default": "\"Enter a password\"", + "options": [] }, { "name": "weakLabel", "type": "string", "required": false, - "default": "\"Weak\"" + "default": "\"Weak\"", + "options": [] }, { "name": "fairLabel", "type": "string", "required": false, - "default": "\"Fair\"" + "default": "\"Fair\"", + "options": [] }, { "name": "goodLabel", "type": "string", "required": false, - "default": "\"Good\"" + "default": "\"Good\"", + "options": [] }, { "name": "strongLabel", "type": "string", "required": false, - "default": "\"Strong\"" + "default": "\"Strong\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -8403,46 +11789,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Styled Icon\"" + "default": "\"Styled Icon\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/StyledIcon.wrn" }, @@ -8456,124 +11850,162 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Switch\"" + "default": "\"Switch\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"on\"" + "default": "\"on\"", + "options": [] }, { "name": "checked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -8587,46 +12019,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "caption", "type": "string", "required": false, - "default": "\"Table\"" + "default": "\"Table\"", + "options": [] }, { "name": "columns", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "rows", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "striped", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "sort", + "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": "rowClick", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["sort", "select", "rowClick"], "source": "components/table.wrn" }, @@ -8634,52 +12087,60 @@ "name": "Tabs", "mount": "Tabs", "category": "navigation", - "purpose": "Theme-aware, responsive tabs component.", + "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Tabs\"" + "default": "\"Tabs\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Tabs.wrn" }, @@ -8693,237 +12154,310 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Textarea\"" + "default": "\"Textarea\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "rows", "type": "number", "required": false, - "default": "5" + "default": "5", + "options": [] }, { "name": "resize", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "minlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "maxlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "TextLink", "mount": "TextLink", - "category": "layout", - "purpose": "Styled inline action link with icons, arrows, external state, and disabled handling.", + "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\"" + "default": "\"Learn more\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"#\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "external", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "showArrow", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "underline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -8931,52 +12465,60 @@ "name": "Timeline", "mount": "Timeline", "category": "base", - "purpose": "Theme-aware, responsive timeline component.", + "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Timeline\"" + "default": "\"Timeline\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Timeline.wrn" }, @@ -8990,160 +12532,216 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Time\"" + "default": "\"Time\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--clock-3]\"" + "default": "\"icon-[lucide--clock-3]\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"end\"" + "default": "\"end\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "format", "type": "string", "required": false, - "default": "\"24\"" + "default": "\"24\"", + "options": [] }, { "name": "minuteStep", "type": "number", "required": false, - "default": "5" + "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\"]" + "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\"]" + "default": "[\"00\", \"05\", \"10\", \"15\", \"20\", \"25\", \"30\", \"35\", \"40\", \"45\", \"50\", \"55\"]", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -9157,46 +12755,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Toast\"" + "default": "\"Toast\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "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/Toast.wrn" }, @@ -9210,46 +12825,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Toast Notifications\"" + "default": "\"Toast Notifications\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "add", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "dismiss", + "payloadType": "{ sourceEvent?: Event; [key: string]: 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": "action", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["add", "dismiss", "clear", "action"], "source": "components/ToastNotifications.wrn" }, @@ -9263,142 +12903,175 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"segmented\"" + "default": "\"segmented\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"billing-cycle\"" + "default": "\"billing-cycle\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"monthly\"" + "default": "\"monthly\"", + "options": [] }, { "name": "firstValue", "type": "string", "required": false, - "default": "\"monthly\"" + "default": "\"monthly\"", + "options": [] }, { "name": "firstLabel", "type": "string", "required": false, - "default": "\"Monthly\"" + "default": "\"Monthly\"", + "options": [] }, { "name": "secondValue", "type": "string", "required": false, - "default": "\"annual\"" + "default": "\"annual\"", + "options": [] }, { "name": "secondLabel", "type": "string", "required": false, - "default": "\"Annual\"" + "default": "\"Annual\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Billing frequency\"" + "default": "\"Billing frequency\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "currency", "type": "string", "required": false, - "default": "\"$\"" + "default": "\"$\"", + "options": [] }, { "name": "suffix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "firstValueKey", "type": "string", "required": false, - "default": "\"monthly\"" + "default": "\"monthly\"", + "options": [] }, { "name": "secondValueKey", "type": "string", "required": false, - "default": "\"annual\"" + "default": "\"annual\"", + "options": [] }, { "name": "emptyValue", "type": "string", "required": false, - "default": "\"—\"" + "default": "\"—\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"end\"" + "default": "\"end\"", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "animate", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "animationDuration", "type": "number", "required": false, - "default": "450" + "default": "450", + "options": [] }, { "name": "animationSteps", "type": "number", "required": false, - "default": "18" + "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" }, @@ -9412,148 +13085,186 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Password\"" + "default": "\"Password\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"password\"" + "default": "\"password\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Enter your password\"" + "default": "\"Enter your password\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"current-password\"" + "default": "\"current-password\"", + "options": [] }, { "name": "minlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "maxlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "pattern", "type": "string", "required": false, - "default": "\"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}\"" + "default": "\"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}\"", + "options": [] }, { "name": "fields", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "visible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "toggleable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "toggleMode", "type": "string", "required": false, - "default": "\"button\"" + "default": "\"button\"", + "options": [] }, { "name": "checkboxLabel", "type": "string", "required": false, - "default": "\"Show password\"" + "default": "\"Show password\"", + "options": [] }, { "name": "showLabel", "type": "string", "required": false, - "default": "\"Show password\"" + "default": "\"Show password\"", + "options": [] }, { "name": "hideLabel", "type": "string", "required": false, - "default": "\"Hide password\"" + "default": "\"Hide password\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -9561,60 +13272,145 @@ "name": "Tooltip", "mount": "Tooltip", "category": "overlays", - "purpose": "Theme-aware, responsive tooltip component.", + "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state.", "props": [ { - "name": "size", + "name": "id", "type": "string", "required": false, - "default": "\"default\"" - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"" - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Tooltip\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "open", "type": "boolean", "required": false, - "default": "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": "\"bottom\"" + "default": "\"top\"", + "options": [] }, { - "name": "closeLabel", + "name": "size", "type": "string", "required": false, - "default": "\"Close\"" + "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": "\"\"" + "default": "\"\"", + "options": [] } ], - "slots": ["default"], - "events": ["open", "close"], - "source": "components/tooltip.wrn" + "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", @@ -9626,46 +13422,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Tree View\"" + "default": "\"Tree View\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "toggle", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "expand", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "collapse", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["select", "toggle", "expand", "collapse"], "source": "components/TreeView.wrn" }, @@ -9673,46 +13494,53 @@ "name": "Typography", "mount": "Typography", "category": "layout", - "purpose": "Theme-aware, responsive typography component.", + "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.", "props": [ { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Typography.wrn" }, @@ -9726,46 +13554,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Wysiwyg Editor\"" + "default": "\"Wysiwyg Editor\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" } diff --git a/.publish/ui/components/Accordion.wrn b/.publish/ui/components/Accordion.wrn index 8e75cc66..b75e6df9 100644 --- a/.publish/ui/components/Accordion.wrn +++ b/.publish/ui/components/Accordion.wrn @@ -1,52 +1,55 @@ component Accordion { - props { - size = "default" - color = "primary" - variant = "default" - class = "" - - id = "accordion" - items = [] - defaultOpen = [] - multiple = false - alwaysOpen = false - disabled = false - - indicator = "plus" - indicatorPosition = "start" - showIndicator = true - bordered = false - separated = false - flush = false - contentItalic = false - - @event change = function - @event open = function - @event close = function + outputs { + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) } + props { + size: string = "default" + color: string = "primary" + variant: string = "default" + class: string = "" + + id: string = "accordion" + items: unknown[] = [] + defaultOpen: unknown[] = [] + multiple: boolean = false + alwaysOpen: boolean = false + disabled: boolean = false + + indicator: string = "plus" + indicatorPosition: string = "start" + showIndicator: boolean = true + bordered: boolean = false + separated: boolean = false + flush: boolean = false + contentItalic: boolean = false + +} + state openValues = defaultOpen functions { - function itemValue(item, index) { + shared function itemValue(item, index) { return item.value !== undefined && item.value !== "" ? String(item.value) : String(index) } - function nestedValue(parent, parentIndex, item, index) { + shared function nestedValue(parent, parentIndex, item, index) { return itemValue(parent, parentIndex) + "." + itemValue(item, index) } - function isOpen(value) { + shared function isOpen(value) { return openValues.includes(value) } - function allowsMultiple() { + shared function allowsMultiple() { return multiple || alwaysOpen } - function dispatchAccordionEvent(sourceEvent, eventName, value, item, root, customEvent) { + client function dispatchAccordionEvent(sourceEvent, eventName, value, item, root, customEvent) { root = sourceEvent.currentTarget.closest("[data-wrn-accordion]") if (!root) { @@ -64,7 +67,7 @@ component Accordion { root.dispatchEvent(customEvent) } - function toggleItem(sourceEvent, value, item, wasOpen) { + client function toggleItem(sourceEvent, value, item, wasOpen) { if (disabled || item.disabled) { return } diff --git a/.publish/ui/components/AdvancedDatePicker.wrn b/.publish/ui/components/AdvancedDatePicker.wrn index e9664362..c43ad8f1 100644 --- a/.publish/ui/components/AdvancedDatePicker.wrn +++ b/.publish/ui/components/AdvancedDatePicker.wrn @@ -1,17 +1,20 @@ component AdvancedDatePicker { + outputs { + input(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + clear(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + } + props { - @event input = function - @event change = function - @event open = function - @event close = function - @event clear = function - size = "default" - color = "primary" - title = "Advanced Date Picker" - description = "" - items = [] - variant = "default" - class = "" +size: string = "default" + color: string = "primary" + title: string = "Advanced Date Picker" + description: string = "" + items: unknown[] = [] + variant: string = "default" + class: string = "" } view {
diff --git a/.publish/ui/components/AdvancedRangeSlider.wrn b/.publish/ui/components/AdvancedRangeSlider.wrn index 51090087..463a9f3c 100644 --- a/.publish/ui/components/AdvancedRangeSlider.wrn +++ b/.publish/ui/components/AdvancedRangeSlider.wrn @@ -1,16 +1,19 @@ component AdvancedRangeSlider { + outputs { + input(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + start(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + end(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + } + props { - @event input = function - @event change = function - @event start = function - @event end = function - size = "default" - color = "primary" - title = "Advanced Range Slider" - description = "" - items = [] - variant = "default" - class = "" + size: string = "default" + color: string = "primary" + title: string = "Advanced Range Slider" + description: string = "" + items: unknown[] = [] + variant: string = "default" + class: string = "" } view {
diff --git a/.publish/ui/components/AdvancedSelect.wrn b/.publish/ui/components/AdvancedSelect.wrn index 6bd6fe16..c4629879 100644 --- a/.publish/ui/components/AdvancedSelect.wrn +++ b/.publish/ui/components/AdvancedSelect.wrn @@ -1,82 +1,85 @@ component AdvancedSelect { + outputs { + search(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + select(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + clear(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + load(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + error(payload: { error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string) + } + props { - size = "default" - color = "primary" - label = "Advanced Select" - name = "" - value = "" - values = [] - options = [] - groups = [] - placeholder = "Select an option" - placeholderIcon = "" - searchPlaceholder = "Search options…" - multiple = false - searchable = true - defaultOpen = false - clearable = true - allowEmpty = true - tags = false - disabled = false - required = false - invalid = false - validationMessage = "" - helpText = "" - loading = false - loadingLabel = "Loading options…" - emptyLabel = "No options found" - selectedOptionsLabel = "Selected options" - clearLabel = "Clear selection" - createLabel = "Create" - loadMoreLabel = "Load more" - searchMode = "contains" - searchFields = "label,description" - minSearchLength = 0 - searchResultLimit = 0 - maxSelections = 0 - showCounter = false - counterTemplate = "{selected} selected" - optionTemplate = "default" - selectedTemplate = "default" - closeOnSelect = true - scrollToSelected = true - fixed = false - placement = "bottom" - remote = false - remoteUrl = "" - remoteQueryParam = "q" - remoteDebounce = 250 - remoteAutoLoad = true - infinite = false - hasMore = false - page = 1 - class = "" - @event search = function - @event select = function - @event change = function - @event clear = function - @event open = function - @event close = function - @event load = function - @event error = function + size: string = "default" + color: string = "primary" + label: string = "Advanced Select" + name: string = "" + value: string = "" + values: unknown[] = [] + options: unknown[] = [] + groups: unknown[] = [] + placeholder: string = "Select an option" + placeholderIcon: string = "" + searchPlaceholder: string = "Search options…" + multiple: boolean = false + searchable: boolean = true + defaultOpen: boolean = false + clearable: boolean = true + allowEmpty: boolean = true + tags: boolean = false + disabled: boolean = false + required: boolean = false + invalid: boolean = false + validationMessage: string = "" + helpText: string = "" + loading: boolean = false + loadingLabel: string = "Loading options…" + emptyLabel: string = "No options found" + selectedOptionsLabel: string = "Selected options" + clearLabel: string = "Clear selection" + createLabel: string = "Create" + loadMoreLabel: string = "Load more" + searchMode: string = "contains" + searchFields: string = "label,description" + minSearchLength: number = 0 + searchResultLimit: number = 0 + maxSelections: number = 0 + showCounter: boolean = false + counterTemplate: string = "{selected} selected" + optionTemplate: string = "default" + selectedTemplate: string = "default" + closeOnSelect: boolean = true + scrollToSelected: boolean = true + fixed: boolean = false + placement: string = "bottom" + remote: boolean = false + remoteUrl: string = "" + remoteQueryParam: string = "q" + remoteDebounce: number = 250 + remoteAutoLoad: boolean = true + infinite: boolean = false + hasMore: boolean = false + page: number = 1 + class: string = "" } state open = defaultOpen - state query = "" - state activeIndex = -1 + state query: string = "" + state activeIndex: number = -1 state selectedValue = value state selectedValues = values functions { - function allOptions() { + shared function allOptions() { return [...groups.flatMap((group) => group.options || []), ...options] } - function searchableText(option) { + shared function searchableText(option) { return ((option.label || "") + " " + (option.description || "")).toLowerCase() } - function matches(option) { + shared function matches(option) { if (!query || query.length < Number(minSearchLength || 0)) { return true } @@ -89,22 +92,22 @@ component AdvancedSelect { return searchableText(option).includes(query.toLowerCase()) } - function matchingOptions(list) { + shared function matchingOptions(list) { return list.filter((option) => matches(option)) } - function visibleOptions(list) { + shared function visibleOptions(list) { if (searchResultLimit > 0) { return matchingOptions(list).slice(0, Number(searchResultLimit)) } return matchingOptions(list) } - function flatVisibleOptions() { + shared function flatVisibleOptions() { return visibleOptions(allOptions()) } - function isSelected(option) { + shared function isSelected(option) { return ( multiple ? selectedValues.includes(option.value) @@ -112,15 +115,15 @@ component AdvancedSelect { ) } - function selectedOptions() { + shared function selectedOptions() { return allOptions().filter((option) => isSelected(option)) } - function selectedCount() { + shared function selectedCount() { return multiple ? selectedValues.length : selectedValue ? 1 : 0 } - function counterText() { + shared function counterText() { return ( maxSelections ? selectedCount() + " / " + maxSelections + " selected" @@ -128,7 +131,7 @@ component AdvancedSelect { ) } - function selectedText() { + shared function selectedText() { return ( multiple ? selectedValues.join(", ") @@ -138,11 +141,11 @@ component AdvancedSelect { ) } - function triggerText() { + shared function triggerText() { return selectedCount() ? selectedText() : placeholder } - function canSelect(option) { + shared function canSelect(option) { if (option.disabled) { return false } @@ -155,7 +158,7 @@ component AdvancedSelect { return selectedCount() < maxSelections } - function chooseSingle(option) { + shared function chooseSingle(option) { if (!canSelect(option)) { return } @@ -166,7 +169,7 @@ component AdvancedSelect { } } - function chooseMultiple(option) { + shared function chooseMultiple(option) { if (!canSelect(option)) { return } @@ -178,7 +181,7 @@ component AdvancedSelect { query = "" } - function chooseOption(option) { + shared function chooseOption(option) { if (multiple) { chooseMultiple(option) return @@ -186,7 +189,7 @@ component AdvancedSelect { chooseSingle(option) } - function clearSelection(event) { + client function clearSelection(event) { event.stopPropagation() selectedValue = "" selectedValues = [] @@ -194,7 +197,7 @@ component AdvancedSelect { open = false } - function toggle() { + shared function toggle() { if (disabled) { return; }; @@ -202,14 +205,14 @@ component AdvancedSelect { activeIndex = open && flatVisibleOptions().length ? 0 : -1; } - function moveActive(direction) { + shared function moveActive(direction) { if (!flatVisibleOptions().length) { return } activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length } - function handleKeydown(event) { + client function handleKeydown(event) { if (disabled) { return } @@ -243,7 +246,7 @@ component AdvancedSelect { } } - function optionIndex(option) { + shared function optionIndex(option) { return flatVisibleOptions().findIndex((item) => item.value === option.value) } } diff --git a/.publish/ui/components/AvatarGroup.wrn b/.publish/ui/components/AvatarGroup.wrn index 45623306..197b4f56 100644 --- a/.publish/ui/components/AvatarGroup.wrn +++ b/.publish/ui/components/AvatarGroup.wrn @@ -1,33 +1,36 @@ component AvatarGroup { - props { - items = [] - size = "md" - color = "primary" - variant = "solid" - shape = "circle" - layout = "stack" - maxVisible = 4 - columns = 3 - borderColor = "" - showTooltips = true - overflowLabel = "Show remaining members" - class = "" - - @event overflow = function + outputs { + overflow(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]) } - state overflowOpen = false + props { + items: unknown[] = [] + size: string = "md" + color: string = "primary" + variant: string = "solid" + shape: string = "circle" + layout: string = "stack" + maxVisible: number = 4 + columns: number = 3 + borderColor: string = "" + showTooltips: boolean = true + overflowLabel: string = "Show remaining members" + class: string = "" + +} + + state overflowOpen: boolean = false functions { - function visibleMembers() { + shared function visibleMembers() { return items.slice(0, Number(maxVisible)) } - function hiddenMembers() { + shared function hiddenMembers() { return items.slice(Number(maxVisible)) } - function toggleOverflow(sourceEvent, root, customEvent) { + client function toggleOverflow(sourceEvent, root, customEvent) { overflowOpen = !overflowOpen root = sourceEvent.currentTarget.closest("[data-wrn-avatar-group]") diff --git a/.publish/ui/components/Blockquote.wrn b/.publish/ui/components/Blockquote.wrn index dc476675..a06e4a16 100644 --- a/.publish/ui/components/Blockquote.wrn +++ b/.publish/ui/components/Blockquote.wrn @@ -1,18 +1,18 @@ component Blockquote { props { - quote = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed." - citation = "" - citationTitle = "" - citationUrl = "" - avatarSrc = "" - avatarAlt = "" - size = "md" - color = "primary" - align = "left" - variant = "default" - quoteMark = true - italic = true - class = "" + quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed." + citation: string = "" + citationTitle: string = "" + citationUrl: string = "" + avatarSrc: string = "" + avatarAlt: string = "" + size: string = "md" + color: string = "primary" + align: string = "left" + variant: string = "default" + quoteMark: boolean = true + italic: boolean = true + class: string = "" } view { diff --git a/.publish/ui/components/Breadcrumb.wrn b/.publish/ui/components/Breadcrumb.wrn index 1fee40b5..06ca58d1 100644 --- a/.publish/ui/components/Breadcrumb.wrn +++ b/.publish/ui/components/Breadcrumb.wrn @@ -1,19 +1,323 @@ component Breadcrumb { - props { - @event navigate = function - @event click = function - size = "default" - color = "primary" - label = "Breadcrumb" - items = [] - active = "" - orientation = "horizontal" - class = "" + outputs { + select(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) } + + props { +label: string = "Breadcrumb" + items: unknown[] = [] + active: string = "" + separator: string = "chevron" + showHome: boolean = false + homeLabel: string = "Home" + homeHref: string = "/" + homeIcon: string = "icon-[lucide--house]" + size: string = "default" + color: string = "primary" + variant: string = "minimal" + class: string = "" + } + view { -
@@ -312,27 +312,29 @@ page TogglePasswordDetail {
-
Component events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@inputFires as the editable value changes.
@changeFires when the component's committed value or selection changes.
@toggleFires when the component changes between open and closed or on and off states.
Declarative handlers.wrn
<TogglePassword
-  @input='console.log(event.detail)'
-  @change='console.log(event.detail)'
-  @toggle='console.log(event.detail)'
-/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"TogglePassword\"], [data-component=\"TogglePassword\"]")
+        
Component outputs
Receive every typed component output
Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@inputFires as the editable value changes.
@changeFires when the component's committed value or selection changes.
@toggleFires when the component changes between open and closed or on and off states.
Declarative handlers.wrn
<TogglePassword
+  @input='console.log(payload)'
+  @change='console.log(payload)'
+  @toggle='console.log(payload)'
+/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"
 
-component?.addEventListener("input", (event) => {
-  console.log("input", event.detail)
+const component = document.querySelector("[data-ui-component=\"TogglePassword\"], [data-component=\"TogglePassword\"]")
+
+if (component) registerOutputHandler(component, "input", (payload) => {
+  console.log("input", payload)
 })
 
-component?.addEventListener("change", (event) => {
-  console.log("change", event.detail)
+if (component) registerOutputHandler(component, "change", (payload) => {
+  console.log("change", payload)
 })
 
-component?.addEventListener("toggle", (event) => {
-  console.log("toggle", event.detail)
+if (component) registerOutputHandler(component, "toggle", (payload) => {
+  console.log("toggle", payload)
 })

-        
Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Password"No
namestring"password"No
valuestring""No
placeholderstring"Enter your password"No
autocompletestring"current-password"No
minlengthstring""No
maxlengthstring""No
patternstring"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"No
fieldsstring[]No
visiblebooleanfalseNo
toggleablebooleantrueNo
toggleModestring"button"No
checkboxLabelstring"Show password"No
showLabelstring"Show password"No
hideLabelstring"Hide password"No
disabledbooleanfalseNo
readonlybooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
helpTextstring""No
validationMessagestring""No
classstring""No

+        
Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Password"No
namestring"password"No
valuestring""No
placeholderstring"Enter your password"No
autocompletestring"current-password"No
minlengthstring""No
maxlengthstring""No
patternstring"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"No
fieldsunknown[][]No
visiblebooleanfalseNo
toggleablebooleantrueNo
toggleModestring"button"No
checkboxLabelstring"Show password"No
showLabelstring"Show password"No
hideLabelstring"Hide password"No
disabledbooleanfalseNo
readonlybooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
helpTextstring""No
validationMessagestring""No
classstring""No
@@ -52,7 +52,7 @@ page TooltipDetail { </Tooltip>
-
Event outputInteract with the preview to inspect event.detail.
+
Event outputInteract with the preview to inspect the typed payload.
Component props17 controls
@@ -147,27 +147,29 @@ page TooltipDetail { -
Component events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@toggleFires when the component changes between open and closed or on and off states.
@openFires after the component opens.
@closeFires after the component closes.
Declarative handlers.wrn
<Tooltip
-  @toggle='console.log(event.detail)'
-  @open='console.log(event.detail)'
-  @close='console.log(event.detail)'
-/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"Tooltip\"], [data-component=\"Tooltip\"]")
+        
Component outputs
Receive every typed component output
Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@toggleFires when the component changes between open and closed or on and off states.
@openFires after the component opens.
@closeFires after the component closes.
Declarative handlers.wrn
<Tooltip
+  @toggle='console.log(payload)'
+  @open='console.log(payload)'
+  @close='console.log(payload)'
+/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"
 
-component?.addEventListener("toggle", (event) => {
-  console.log("toggle", event.detail)
+const component = document.querySelector("[data-ui-component=\"Tooltip\"], [data-component=\"Tooltip\"]")
+
+if (component) registerOutputHandler(component, "toggle", (payload) => {
+  console.log("toggle", payload)
 })
 
-component?.addEventListener("open", (event) => {
-  console.log("open", event.detail)
+if (component) registerOutputHandler(component, "open", (payload) => {
+  console.log("open", payload)
 })
 
-component?.addEventListener("close", (event) => {
-  console.log("close", event.detail)
+if (component) registerOutputHandler(component, "close", (payload) => {
+  console.log("close", payload)
 })

         
Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
PropTypeDefaultRequired
idstring""No
openbooleanfalseNo
defaultOpenbooleanfalseNo
titlestring""No
descriptionstring""No
contentstring"Tooltip"No
triggerstring"hover"No
placementstring"top"No
sizestring"default"No
colorstring"primary"No
variantstring"dark"No
maxWidthstring"18rem"No
offsetnumber10No
showArrowbooleantrueNo
interactivebooleanfalseNo
disabledbooleanfalseNo
classstring""No
@@ -147,11 +147,11 @@ page TreeViewDetail { />
-
Event outputInteract with the preview to inspect event.detail.
+
Event outputInteract with the preview to inspect the typed payload.
Component props7 controls
-
" }), + standard( + "Confirmation modal", + "Focus the user on one clear decision with confirm and cancel actions.", + { + triggerLabel: "Open modal", + triggerIcon: "icon-[lucide--square-stack]", + title: "Confirm service request", + description: "Review the information before continuing.", + icon: "icon-[lucide--shield-check]", + confirmLabel: "Confirm request", + confirmIcon: "icon-[lucide--check]", + cancelLabel: "Go back", + size: "md", + }, + { + default: + '

This request will be submitted for review.

', + }, + ), + compact("Destructive confirmation", "Use a danger treatment for irreversible operations.", { + triggerLabel: "Delete record", + title: "Delete this record?", + description: "This action cannot be undone.", + confirmLabel: "Delete record", + cancelLabel: "Keep record", + destructive: true, + size: "sm", + variant: "outline", + }), + advanced( + "Scrollable form modal", + "Open a larger modal for focused forms while keeping actions visible.", + { + open: false, + defaultOpen: false, + triggerLabel: "Open request form", + triggerIcon: "icon-[lucide--file-plus-2]", + title: "Create service request", + description: "Complete the required information.", + confirmLabel: "Submit request", + size: "lg", + scrollable: true, + variant: "soft", + }, + { + default: + '
', + }, + ), ], - playground: { open: false, defaultOpen: false, triggerLabel: "Open playground modal", title: "Modal playground" }, + playground: { + open: false, + defaultOpen: false, + triggerLabel: "Open playground modal", + title: "Modal playground", + }, options: { size: ["sm", "md", "lg", "xl", "full"], placement: ["center", "top"], @@ -732,13 +1491,80 @@ export const componentProfiles = { Popover: { demos: [ - standard("Supporting information", "Attach contextual information and actions to a nearby trigger.", { triggerLabel: "View details", triggerIcon: "icon-[lucide--info]", title: "Verified public information", description: "This panel can contain text, actions, forms, or custom content.", icon: "icon-[lucide--badge-check]", actionLabel: "Open guide", actionHref: "#guide", width: "lg" }, { default: "

Popover content remains attached to its trigger and becomes mobile-friendly on small screens.

" }), - compact("Compact action popover", "Use a small popover for quick actions and concise explanations.", { triggerLabel: "Quick actions", triggerIcon: "icon-[lucide--zap]", title: "Quick actions", placement: "top", width: "sm", size: "sm", variant: "soft" }, { default: "
" }), - advanced("Rich status popover", "Open a wide panel with close control, arrow, custom content, and footer action.", { open: false, defaultOpen: false, triggerLabel: "Open rich panel", title: "Service status", description: "Current operational information.", placement: "bottom-end", width: "xl", showClose: true, actionLabel: "Open status page", actionHref: "#status", variant: "raised" }, { default: "
All systems operationalLast checked moments ago
" }), + standard( + "Supporting information", + "Attach contextual information and actions to a nearby trigger.", + { + triggerLabel: "View details", + triggerIcon: "icon-[lucide--info]", + title: "Verified public information", + description: "This panel can contain text, actions, forms, or custom content.", + icon: "icon-[lucide--badge-check]", + actionLabel: "Open guide", + actionHref: "#guide", + width: "lg", + }, + { + default: + "

Popover content remains attached to its trigger and becomes mobile-friendly on small screens.

", + }, + ), + compact( + "Compact action popover", + "Use a small popover for quick actions and concise explanations.", + { + triggerLabel: "Quick actions", + triggerIcon: "icon-[lucide--zap]", + title: "Quick actions", + placement: "top", + width: "sm", + size: "sm", + variant: "soft", + }, + { + default: + '
', + }, + ), + advanced( + "Rich status popover", + "Open a wide panel with close control, arrow, custom content, and footer action.", + { + open: false, + defaultOpen: false, + triggerLabel: "Open rich panel", + title: "Service status", + description: "Current operational information.", + placement: "bottom-end", + width: "xl", + showClose: true, + actionLabel: "Open status page", + actionHref: "#status", + variant: "raised", + }, + { + default: + '
All systems operationalLast checked moments ago
', + }, + ), ], - playground: { open: false, defaultOpen: false, triggerLabel: "Open playground popover", title: "Popover playground" }, + playground: { + open: false, + defaultOpen: false, + triggerLabel: "Open playground popover", + title: "Popover playground", + }, options: { - placement: ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"], + placement: [ + "top", + "top-start", + "top-end", + "bottom", + "bottom-start", + "bottom-end", + "left", + "right", + ], width: ["sm", "md", "lg", "xl"], size: ["sm", "default", "lg"], variant: ["default", "raised", "soft", "outline"], @@ -747,14 +1573,65 @@ export const componentProfiles = { Tooltip: { demos: [ - standard("Hover and focus tooltip", "Explain an unfamiliar control without interrupting the workflow.", { id: "help-tooltip", title: "Helpful information", content: "Tooltips explain controls without interrupting the user.", placement: "top" }, { trigger: "" }), - compact("Click tooltip", "Use click activation for touch-first or interactive help.", { id: "click-tooltip", content: "Click again or press Escape to close.", trigger: "click", placement: "bottom", size: "sm", variant: "soft" }, { trigger: "" }), - advanced("Interactive rich tooltip", "Allow pointer interaction when the tooltip contains supporting links or controls.", { id: "interactive-tooltip", title: "Keyboard shortcut", description: "Open global search from anywhere.", content: "Press Ctrl or Command plus K.", trigger: "both", placement: "right", interactive: true, maxWidth: "22rem", variant: "dark" }, { trigger: "" }), + standard( + "Hover and focus tooltip", + "Explain an unfamiliar control without interrupting the workflow.", + { + id: "help-tooltip", + title: "Helpful information", + content: "Tooltips explain controls without interrupting the user.", + placement: "top", + }, + { trigger: '' }, + ), + compact( + "Click tooltip", + "Use click activation for touch-first or interactive help.", + { + id: "click-tooltip", + content: "Click again or press Escape to close.", + trigger: "click", + placement: "bottom", + size: "sm", + variant: "soft", + }, + { trigger: '' }, + ), + advanced( + "Interactive rich tooltip", + "Allow pointer interaction when the tooltip contains supporting links or controls.", + { + id: "interactive-tooltip", + title: "Keyboard shortcut", + description: "Open global search from anywhere.", + content: "Press Ctrl or Command plus K.", + trigger: "both", + placement: "right", + interactive: true, + maxWidth: "22rem", + variant: "dark", + }, + { trigger: '' }, + ), ], - playground: { open: false, defaultOpen: false, trigger: "hover", content: "Hover or focus the trigger to inspect the tooltip." }, + playground: { + open: false, + defaultOpen: false, + trigger: "hover", + content: "Hover or focus the trigger to inspect the tooltip.", + }, options: { trigger: ["hover", "focus", "click", "both"], - placement: ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"], + placement: [ + "top", + "top-start", + "top-end", + "bottom", + "bottom-start", + "bottom-end", + "left", + "right", + ], size: ["sm", "default", "lg"], variant: ["dark", "light", "soft", "solid"], }, @@ -762,126 +1639,582 @@ export const componentProfiles = { Container: { demos: [ - standard("Standard content container", "Keep page content aligned to a predictable readable width.", { maxWidth: "xl", size: "default" }, { default: "
Centered container content
" }), - compact("Compact reading container", "Use a smaller maximum width for forms, legal copy, and focused content.", { maxWidth: "compact", size: "compact" }, { default: "
Compact readable content
" }), - advanced("Full-width layout container", "Allow dashboards and data-heavy pages to use the available width.", { maxWidth: "full", size: "spacious" }, { default: "
Full-width dashboard content
" }), + standard( + "Standard content container", + "Keep page content aligned to a predictable readable width.", + { maxWidth: "xl", size: "default" }, + { default: '
Centered container content
' }, + ), + compact( + "Compact reading container", + "Use a smaller maximum width for forms, legal copy, and focused content.", + { maxWidth: "compact", size: "compact" }, + { default: '
Compact readable content
' }, + ), + advanced( + "Full-width layout container", + "Allow dashboards and data-heavy pages to use the available width.", + { maxWidth: "full", size: "spacious" }, + { default: '
Full-width dashboard content
' }, + ), ], - options: { maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], size: ["compact", "default", "spacious"] }, + options: { + maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], + size: ["compact", "default", "spacious"], + }, }, Grid: { demos: [ - standard("Responsive three-column grid", "Arrange equal-width children with consistent gaps.", { columns: 3, gap: "md", maxWidth: "xl" }, { default: "
OneTwoThree
" }), - compact("Dense four-column grid", "Use smaller gaps for dashboards and compact overview pages.", { columns: 4, gap: "sm", maxWidth: "wide", size: "compact" }, { default: "
OneTwoThreeFour
" }), - advanced("Full-width two-column grid", "Use larger gaps for editorial or marketing split layouts.", { columns: 2, gap: "xl", maxWidth: "full", size: "spacious" }, { default: "
PrimarySecondary
" }), + standard( + "Responsive three-column grid", + "Arrange equal-width children with consistent gaps.", + { columns: 3, gap: "md", maxWidth: "xl" }, + { + default: + '
OneTwoThree
', + }, + ), + compact( + "Dense four-column grid", + "Use smaller gaps for dashboards and compact overview pages.", + { columns: 4, gap: "sm", maxWidth: "wide", size: "compact" }, + { + default: + '
OneTwoThreeFour
', + }, + ), + advanced( + "Full-width two-column grid", + "Use larger gaps for editorial or marketing split layouts.", + { columns: 2, gap: "xl", maxWidth: "full", size: "spacious" }, + { + default: + '
PrimarySecondary
', + }, + ), ], - options: { columns: ["1", "2", "3", "4", "5", "6"], gap: ["none", "sm", "md", "lg", "xl"], maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"] }, + options: { + columns: ["1", "2", "3", "4", "5", "6"], + gap: ["none", "sm", "md", "lg", "xl"], + maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], + }, }, Columns: { demos: [ - standard("Two-column content layout", "Split supporting content into balanced responsive columns.", { columns: 2, gap: "lg", maxWidth: "xl" }, { default: "
Content columnSupporting column
" }), - compact("Three compact columns", "Use three columns for short summaries and dashboard groups.", { columns: 3, gap: "sm", size: "compact", maxWidth: "wide" }, { default: "
OneTwoThree
" }), - advanced("Full-width four columns", "Use the full available width for structured application content.", { columns: 4, gap: "md", maxWidth: "full" }, { default: "
ABCD
" }), + standard( + "Two-column content layout", + "Split supporting content into balanced responsive columns.", + { columns: 2, gap: "lg", maxWidth: "xl" }, + { + default: + '
Content columnSupporting column
', + }, + ), + compact( + "Three compact columns", + "Use three columns for short summaries and dashboard groups.", + { columns: 3, gap: "sm", size: "compact", maxWidth: "wide" }, + { + default: + '
OneTwoThree
', + }, + ), + advanced( + "Full-width four columns", + "Use the full available width for structured application content.", + { columns: 4, gap: "md", maxWidth: "full" }, + { + default: + '
ABCD
', + }, + ), ], - options: { columns: ["1", "2", "3", "4", "5", "6"], gap: ["none", "sm", "md", "lg", "xl"], maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"] }, + options: { + columns: ["1", "2", "3", "4", "5", "6"], + gap: ["none", "sm", "md", "lg", "xl"], + maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], + }, }, Card: { demos: [ - standard("Structured content card", "Group a title, description, content, and supporting actions.", { title: "Citizen service", description: "Access a trusted online service.", variant: "default" }, { default: "

Supporting content belongs inside the default slot.

" }), - compact("Compact dashboard card", "Use reduced spacing for metrics, filters, and operational information.", { title: "Open requests", description: "Requests waiting for assignment.", size: "compact", variant: "soft" }, { default: "38" }), - advanced("Raised interactive card", "Use a stronger visual treatment for featured content.", { title: "Featured guide", description: "A complete guide to public safety and emergency readiness.", size: "spacious", variant: "raised" }, { default: "Read guide" }), + standard( + "Structured content card", + "Group a title, description, content, and supporting actions.", + { + title: "Citizen service", + description: "Access a trusted online service.", + variant: "default", + }, + { + default: + '

Supporting content belongs inside the default slot.

', + }, + ), + compact( + "Compact dashboard card", + "Use reduced spacing for metrics, filters, and operational information.", + { + title: "Open requests", + description: "Requests waiting for assignment.", + size: "compact", + variant: "soft", + }, + { default: '38' }, + ), + advanced( + "Raised interactive card", + "Use a stronger visual treatment for featured content.", + { + title: "Featured guide", + description: "A complete guide to public safety and emergency readiness.", + size: "spacious", + variant: "raised", + }, + { default: 'Read guide' }, + ), ], - options: { size: ["compact", "default", "spacious"], variant: ["default", "soft", "raised", "outline", "minimal"] }, + options: { + size: ["compact", "default", "spacious"], + variant: ["default", "soft", "raised", "outline", "minimal"], + }, }, Link: { demos: [ - standard("Standard navigation link", "Use for routes within the current application.", { label: "Open components", href: "/base" }), - compact("External resource link", "Communicate external navigation and use safe target attributes.", { label: "WRNexusJS documentation", href: "https://wrnexusjs.dev", external: true, target: "_blank" }), - advanced("Large emphasized link", "Use a larger link in empty states, promotional cards, and resource lists.", { label: "Explore framework guides", href: "/framework-guides", size: "lg", color: "info" }), + standard("Standard navigation link", "Use for routes within the current application.", { + label: "Open components", + href: "/base", + }), + compact( + "External resource link", + "Communicate external navigation and use safe target attributes.", + { + label: "WRNexusJS documentation", + href: "https://wrnexusjs.dev", + external: true, + target: "_blank", + }, + ), + advanced( + "Large emphasized link", + "Use a larger link in empty states, promotional cards, and resource lists.", + { label: "Explore framework guides", href: "/framework-guides", size: "lg", color: "info" }, + ), ], options: { size: ["sm", "default", "lg"], target: ["_self", "_blank", "_parent", "_top"] }, }, Image: { demos: [ - standard("Responsive content image", "Render a responsive image with meaningful alternative text.", { src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E", alt: "Abstract violet circle on a dark surface", width: "800", height: "450" }), - compact("Rounded thumbnail", "Use a rounded image in cards, directories, and compact summaries.", { src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E", alt: "Abstract blue thumbnail", width: "400", height: "400", rounded: true, size: "sm" }), - advanced("Eager hero image", "Use explicit dimensions and eager loading for an above-the-fold visual.", { src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E", alt: "Abstract green hero visual", width: "1200", height: "600", loading: "eager", rounded: true, size: "lg" }), + standard( + "Responsive content image", + "Render a responsive image with meaningful alternative text.", + { + src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E", + alt: "Abstract violet circle on a dark surface", + width: "800", + height: "450", + }, + ), + compact( + "Rounded thumbnail", + "Use a rounded image in cards, directories, and compact summaries.", + { + src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E", + alt: "Abstract blue thumbnail", + width: "400", + height: "400", + rounded: true, + size: "sm", + }, + ), + advanced( + "Eager hero image", + "Use explicit dimensions and eager loading for an above-the-fold visual.", + { + src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E", + alt: "Abstract green hero visual", + width: "1200", + height: "600", + loading: "eager", + rounded: true, + size: "lg", + }, + ), ], options: { loading: ["lazy", "eager"], size: ["sm", "default", "lg"] }, }, SearchBox: { demos: [ - standard("Site search", "Give visitors a clear way to search pages, services, or resources.", { label: "Search documentation", name: "site-search", placeholder: "Search components and guides", type: "search" }), - compact("Compact directory search", "Use a compact field above tables, lists, and directories.", { label: "Search stations", name: "station-search", placeholder: "Name, district, or jurisdiction", size: "sm" }), - advanced("Required service lookup", "Use validation and required semantics in focused lookup flows.", { label: "Complaint reference", name: "complaint-reference", placeholder: "Enter reference number", required: true, size: "lg", color: "info" }), + standard( + "Site search", + "Give visitors a clear way to search pages, services, or resources.", + { + label: "Search documentation", + name: "site-search", + placeholder: "Search components and guides", + type: "search", + }, + ), + compact( + "Compact directory search", + "Use a compact field above tables, lists, and directories.", + { + label: "Search stations", + name: "station-search", + placeholder: "Name, district, or jurisdiction", + size: "sm", + }, + ), + advanced( + "Required service lookup", + "Use validation and required semantics in focused lookup flows.", + { + label: "Complaint reference", + name: "complaint-reference", + placeholder: "Enter reference number", + required: true, + size: "lg", + color: "info", + }, + ), ], options: { size: ["sm", "default", "lg"], type: ["search", "text"] }, }, Map: { demos: [ - standard("Station directory map", "Present locations with supporting names, addresses, and actions.", { title: "Nearby police stations", description: "Select a station to view contact details and jurisdiction information.", items: [{ title: "Central station", description: "Main Road", latitude: 18.5204, longitude: 73.8567 }, { title: "North station", description: "University Road", latitude: 18.559, longitude: 73.807 }] }), - compact("Compact location preview", "Use a smaller map preview inside cards, drawers, and record details.", { title: "Service location", description: "Public service office", items: [{ title: "Public office", description: "City centre" }], size: "sm", variant: "soft" }), - advanced("Operations map", "Use a larger map surface for multiple markers and operational context.", { title: "Jurisdiction overview", description: "Stations, service areas, and public facilities.", items: [{ title: "Station A" }, { title: "Station B" }, { title: "Control room" }], size: "lg", variant: "raised", color: "info" }), + standard( + "Station directory map", + "Present locations with supporting names, addresses, and actions.", + { + title: "Nearby police stations", + description: "Select a station to view contact details and jurisdiction information.", + items: [ + { + title: "Central station", + description: "Main Road", + latitude: 18.5204, + longitude: 73.8567, + }, + { + title: "North station", + description: "University Road", + latitude: 18.559, + longitude: 73.807, + }, + ], + }, + ), + compact( + "Compact location preview", + "Use a smaller map preview inside cards, drawers, and record details.", + { + title: "Service location", + description: "Public service office", + items: [{ title: "Public office", description: "City centre" }], + size: "sm", + variant: "soft", + }, + ), + advanced( + "Operations map", + "Use a larger map surface for multiple markers and operational context.", + { + title: "Jurisdiction overview", + description: "Stations, service areas, and public facilities.", + items: [{ title: "Station A" }, { title: "Station B" }, { title: "Control room" }], + size: "lg", + variant: "raised", + color: "info", + }, + ), ], options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] }, }, List: { demos: [ - standard("Linked resource list", "Present related links with supporting descriptions and icons.", { title: "Citizen resources", description: "Commonly requested public information.", items: [{ label: "Report crime", href: "#report", icon: "icon-[lucide--shield-alert]" }, { label: "Track complaint", href: "#track", icon: "icon-[lucide--scan-search]" }, { label: "Certificates", href: "#certificates", icon: "icon-[lucide--file-check-2]" }] }), - compact("Compact status list", "Use a dense list in sidebars, dashboards, and record panels.", { title: "Current status", items: [{ label: "Application received", status: "Complete" }, { label: "Verification", status: "In progress" }, { label: "Decision", status: "Pending" }], size: "sm", variant: "soft" }), - advanced("Rich action list", "Combine descriptions, icons, statuses, and actions in a structured collection.", { title: "Service requests", description: "Recent requests and their current status.", items: [{ label: "Address verification", description: "Submitted yesterday", status: "Review", href: "#request-1" }, { label: "Character certificate", description: "Submitted 3 days ago", status: "Approved", href: "#request-2" }], size: "lg", variant: "raised" }), + standard( + "Linked resource list", + "Present related links with supporting descriptions and icons.", + { + title: "Citizen resources", + description: "Commonly requested public information.", + items: [ + { label: "Report crime", href: "#report", icon: "icon-[lucide--shield-alert]" }, + { label: "Track complaint", href: "#track", icon: "icon-[lucide--scan-search]" }, + { label: "Certificates", href: "#certificates", icon: "icon-[lucide--file-check-2]" }, + ], + }, + ), + compact( + "Compact status list", + "Use a dense list in sidebars, dashboards, and record panels.", + { + title: "Current status", + items: [ + { label: "Application received", status: "Complete" }, + { label: "Verification", status: "In progress" }, + { label: "Decision", status: "Pending" }, + ], + size: "sm", + variant: "soft", + }, + ), + advanced( + "Rich action list", + "Combine descriptions, icons, statuses, and actions in a structured collection.", + { + title: "Service requests", + description: "Recent requests and their current status.", + items: [ + { + label: "Address verification", + description: "Submitted yesterday", + status: "Review", + href: "#request-1", + }, + { + label: "Character certificate", + description: "Submitted 3 days ago", + status: "Approved", + href: "#request-2", + }, + ], + size: "lg", + variant: "raised", + }, + ), ], options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] }, }, Marquee: { demos: [ - standard("Partner and capability strip", "Continuously present short labels, partners, channels, or capabilities.", { title: "Supported capabilities", items: [{ label: "SSR" }, { label: "CSR" }, { label: "Themes" }, { label: "Accessibility" }, { label: "Responsive UI" }], variant: "default" }), - compact("Compact announcement ticker", "Use a dense ticker for short operational updates.", { items: [{ label: "All services operational" }, { label: "New components published" }, { label: "Documentation updated" }], size: "sm", variant: "soft" }), - advanced("Large visual marquee", "Use stronger spacing and richer items on marketing pages.", { title: "Built for complete digital platforms", items: [{ label: "Public portals", icon: "icon-[lucide--landmark]" }, { label: "Enterprise systems", icon: "icon-[lucide--building-2]" }, { label: "Developer tools", icon: "icon-[lucide--code-2]" }], size: "lg", variant: "raised", color: "info" }), + standard( + "Partner and capability strip", + "Continuously present short labels, partners, channels, or capabilities.", + { + title: "Supported capabilities", + items: [ + { label: "SSR" }, + { label: "CSR" }, + { label: "Themes" }, + { label: "Accessibility" }, + { label: "Responsive UI" }, + ], + variant: "default", + }, + ), + compact("Compact announcement ticker", "Use a dense ticker for short operational updates.", { + items: [ + { label: "All services operational" }, + { label: "New components published" }, + { label: "Documentation updated" }, + ], + size: "sm", + variant: "soft", + }), + advanced( + "Large visual marquee", + "Use stronger spacing and richer items on marketing pages.", + { + title: "Built for complete digital platforms", + items: [ + { label: "Public portals", icon: "icon-[lucide--landmark]" }, + { label: "Enterprise systems", icon: "icon-[lucide--building-2]" }, + { label: "Developer tools", icon: "icon-[lucide--code-2]" }, + ], + size: "lg", + variant: "raised", + color: "info", + }, + ), ], options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] }, }, Tabs: { demos: [ - standard("Horizontal content tabs", "Switch between related content panels without navigating away.", { label: "Service information", items: [{ label: "Overview", value: "overview", content: "Overview content" }, { label: "Requirements", value: "requirements", content: "Requirements content" }, { label: "Process", value: "process", content: "Process content" }], active: "overview", orientation: "horizontal" }), - compact("Compact application tabs", "Use smaller tabs in dashboards, panels, and dense product interfaces.", { label: "Record views", items: [{ label: "Details", value: "details" }, { label: "History", value: "history" }, { label: "Files", value: "files" }], active: "details", size: "sm" }), - advanced("Vertical settings tabs", "Use vertical tabs for settings, configuration, and long-form navigation.", { label: "Settings", items: [{ label: "Profile", value: "profile", icon: "icon-[lucide--user]" }, { label: "Security", value: "security", icon: "icon-[lucide--shield]" }, { label: "Notifications", value: "notifications", icon: "icon-[lucide--bell]" }], active: "security", orientation: "vertical", size: "lg" }), + standard( + "Horizontal content tabs", + "Switch between related content panels without navigating away.", + { + label: "Service information", + items: [ + { label: "Overview", value: "overview", content: "Overview content" }, + { label: "Requirements", value: "requirements", content: "Requirements content" }, + { label: "Process", value: "process", content: "Process content" }, + ], + active: "overview", + orientation: "horizontal", + }, + ), + compact( + "Compact application tabs", + "Use smaller tabs in dashboards, panels, and dense product interfaces.", + { + label: "Record views", + items: [ + { label: "Details", value: "details" }, + { label: "History", value: "history" }, + { label: "Files", value: "files" }, + ], + active: "details", + size: "sm", + }, + ), + advanced( + "Vertical settings tabs", + "Use vertical tabs for settings, configuration, and long-form navigation.", + { + label: "Settings", + items: [ + { label: "Profile", value: "profile", icon: "icon-[lucide--user]" }, + { label: "Security", value: "security", icon: "icon-[lucide--shield]" }, + { label: "Notifications", value: "notifications", icon: "icon-[lucide--bell]" }, + ], + active: "security", + orientation: "vertical", + size: "lg", + }, + ), ], options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] }, }, Timeline: { demos: [ - standard("Application timeline", "Explain the sequence and current status of a request or process.", { title: "Request progress", description: "Latest updates for this service request.", items: [{ title: "Request submitted", description: "Received successfully", time: "09:30", status: "complete" }, { title: "Verification", description: "Documents are being reviewed", time: "10:15", current: true }, { title: "Decision", description: "Pending verification", time: "—" }] }), - compact("Compact activity history", "Use a dense history inside drawers, side panels, and record views.", { title: "Recent activity", items: [{ title: "Status changed", time: "Today" }, { title: "Comment added", time: "Yesterday" }, { title: "Document uploaded", time: "3 days ago" }], size: "sm", variant: "soft" }), - advanced("Rich milestone timeline", "Use icons, descriptions, times, and states for longer workflows.", { title: "Implementation milestones", description: "Planned delivery sequence.", items: [{ title: "Foundation", description: "Tokens, themes, and primitives", icon: "icon-[lucide--layers-3]", status: "complete" }, { title: "Components", description: "Reusable UI and documentation", icon: "icon-[lucide--blocks]", current: true }, { title: "Applications", description: "Compose production interfaces", icon: "icon-[lucide--rocket]" }], size: "lg", variant: "raised" }), + standard( + "Application timeline", + "Explain the sequence and current status of a request or process.", + { + title: "Request progress", + description: "Latest updates for this service request.", + items: [ + { + title: "Request submitted", + description: "Received successfully", + time: "09:30", + status: "complete", + }, + { + title: "Verification", + description: "Documents are being reviewed", + time: "10:15", + current: true, + }, + { title: "Decision", description: "Pending verification", time: "—" }, + ], + }, + ), + compact( + "Compact activity history", + "Use a dense history inside drawers, side panels, and record views.", + { + title: "Recent activity", + items: [ + { title: "Status changed", time: "Today" }, + { title: "Comment added", time: "Yesterday" }, + { title: "Document uploaded", time: "3 days ago" }, + ], + size: "sm", + variant: "soft", + }, + ), + advanced( + "Rich milestone timeline", + "Use icons, descriptions, times, and states for longer workflows.", + { + title: "Implementation milestones", + description: "Planned delivery sequence.", + items: [ + { + title: "Foundation", + description: "Tokens, themes, and primitives", + icon: "icon-[lucide--layers-3]", + status: "complete", + }, + { + title: "Components", + description: "Reusable UI and documentation", + icon: "icon-[lucide--blocks]", + current: true, + }, + { + title: "Applications", + description: "Compose production interfaces", + icon: "icon-[lucide--rocket]", + }, + ], + size: "lg", + variant: "raised", + }, + ), ], options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] }, }, Typography: { demos: [ - standard("Readable content typography", "Apply consistent typography to headings, paragraphs, lists, and inline content.", { maxWidth: "xl", size: "default" }, { default: "

Readable page content

Typography creates consistent hierarchy and comfortable reading rhythm.

  • Clear headings
  • Readable paragraphs
  • Consistent lists
" }), - compact("Compact documentation typography", "Use reduced spacing in reference pages and dense product help.", { maxWidth: "compact", size: "compact" }, { default: "

Compact reference

Focused content with reduced spacing.

" }), - advanced("Wide editorial typography", "Use wider content and multiple columns for editorial or policy content.", { maxWidth: "wide", columns: 2, gap: "xl", size: "spacious" }, { default: "

Long-form public information

Structured editorial content can use a wider two-column layout on large screens.

Responsive behavior returns content to one column on smaller screens.

" }), + standard( + "Readable content typography", + "Apply consistent typography to headings, paragraphs, lists, and inline content.", + { maxWidth: "xl", size: "default" }, + { + default: + '

Readable page content

Typography creates consistent hierarchy and comfortable reading rhythm.

  • Clear headings
  • Readable paragraphs
  • Consistent lists
', + }, + ), + compact( + "Compact documentation typography", + "Use reduced spacing in reference pages and dense product help.", + { maxWidth: "compact", size: "compact" }, + { + default: + '

Compact reference

Focused content with reduced spacing.

', + }, + ), + advanced( + "Wide editorial typography", + "Use wider content and multiple columns for editorial or policy content.", + { maxWidth: "wide", columns: 2, gap: "xl", size: "spacious" }, + { + default: + '

Long-form public information

Structured editorial content can use a wider two-column layout on large screens.

Responsive behavior returns content to one column on smaller screens.

', + }, + ), ], - options: { columns: ["1", "2", "3"], gap: ["sm", "md", "lg", "xl"], maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], size: ["compact", "default", "spacious"] }, + options: { + columns: ["1", "2", "3"], + gap: ["sm", "md", "lg", "xl"], + maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], + size: ["compact", "default", "spacious"], + }, }, Divider: { demos: [ - standard("Horizontal section divider", "Separate related content without introducing another container.", { orientation: "horizontal", label: "Related information" }), - compact("Minimal unlabeled divider", "Use a quiet rule between compact content groups.", { orientation: "horizontal", label: "", size: "sm" }), - advanced("Vertical toolbar divider", "Separate groups of inline actions in toolbars and navigation.", { orientation: "vertical", label: "Actions", size: "lg", color: "info" }), + standard( + "Horizontal section divider", + "Separate related content without introducing another container.", + { orientation: "horizontal", label: "Related information" }, + ), + compact("Minimal unlabeled divider", "Use a quiet rule between compact content groups.", { + orientation: "horizontal", + label: "", + size: "sm", + }), + advanced( + "Vertical toolbar divider", + "Separate groups of inline actions in toolbars and navigation.", + { orientation: "vertical", label: "Actions", size: "lg", color: "info" }, + ), ], options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] }, }, @@ -914,5 +2247,7 @@ export function profileFor(name) { } export function eventDescriptionFor(_componentName, eventName) { - return genericEventDescriptions[eventName] ?? `Fires when the component emits the ${eventName} event.`; + return ( + genericEventDescriptions[eventName] ?? `Fires when the component emits the ${eventName} event.` + ); } diff --git a/examples/component-showcase/showcase-manifest.json b/examples/component-showcase/showcase-manifest.json index 592fc16e..6177d9b9 100644 --- a/examples/component-showcase/showcase-manifest.json +++ b/examples/component-showcase/showcase-manifest.json @@ -13,11 +13,7 @@ "demoCount": 3, "propCount": 17, "slots": [], - "events": [ - "change", - "open", - "close" - ], + "events": ["change", "open", "close"], "profiled": false }, { @@ -28,16 +24,8 @@ "purpose": "Theme-aware, responsive advanced date picker component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "input", - "change", - "open", - "close", - "clear" - ], + "slots": ["default"], + "events": ["input", "change", "open", "close", "clear"], "profiled": false }, { @@ -48,15 +36,8 @@ "purpose": "Theme-aware, responsive advanced range slider component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "input", - "change", - "start", - "end" - ], + "slots": ["default"], + "events": ["input", "change", "start", "end"], "profiled": false }, { @@ -68,16 +49,7 @@ "demoCount": 41, "propCount": 51, "slots": [], - "events": [ - "search", - "select", - "change", - "clear", - "open", - "close", - "load", - "error" - ], + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], "profiled": false }, { @@ -89,10 +61,7 @@ "demoCount": 3, "propCount": 21, "slots": [], - "events": [ - "dismiss", - "action" - ], + "events": ["dismiss", "action"], "profiled": false }, { @@ -104,9 +73,7 @@ "demoCount": 3, "propCount": 19, "slots": [], - "events": [ - "dismiss" - ], + "events": ["dismiss"], "profiled": true }, { @@ -117,16 +84,8 @@ "purpose": "Reusable auth form component.", "demoCount": 3, "propCount": 13, - "slots": [ - "default" - ], - "events": [ - "submit", - "change", - "input", - "focus", - "blur" - ], + "slots": ["default"], + "events": ["submit", "change", "input", "focus", "blur"], "profiled": false }, { @@ -137,10 +96,7 @@ "purpose": "Reusable auth split layout component.", "demoCount": 3, "propCount": 8, - "slots": [ - "aside-extra", - "form" - ], + "slots": ["aside-extra", "form"], "events": [], "profiled": false }, @@ -153,11 +109,7 @@ "demoCount": 3, "propCount": 18, "slots": [], - "events": [ - "load", - "error", - "click" - ], + "events": ["load", "error", "click"], "profiled": false }, { @@ -169,9 +121,7 @@ "demoCount": 3, "propCount": 12, "slots": [], - "events": [ - "overflow" - ], + "events": ["overflow"], "profiled": false }, { @@ -195,9 +145,7 @@ "demoCount": 3, "propCount": 22, "slots": [], - "events": [ - "dismiss" - ], + "events": ["dismiss"], "profiled": false }, { @@ -208,9 +156,7 @@ "purpose": "Theme-aware, responsive blockquote component.", "demoCount": 3, "propCount": 13, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": false }, @@ -223,9 +169,7 @@ "demoCount": 3, "propCount": 12, "slots": [], - "events": [ - "select" - ], + "events": ["select"], "profiled": true }, { @@ -236,14 +180,8 @@ "purpose": "Theme-aware, responsive button component.", "demoCount": 8, "propCount": 25, - "slots": [ - "default" - ], - "events": [ - "click", - "focus", - "blur" - ], + "slots": ["default"], + "events": ["click", "focus", "blur"], "profiled": false }, { @@ -254,14 +192,8 @@ "purpose": "Theme-aware, responsive button group component.", "demoCount": 3, "propCount": 13, - "slots": [ - "default" - ], - "events": [ - "click", - "select", - "change" - ], + "slots": ["default"], + "events": ["click", "select", "change"], "profiled": false }, { @@ -272,17 +204,8 @@ "purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots.", "demoCount": 3, "propCount": 31, - "slots": [ - "default" - ], - "events": [ - "click", - "action", - "navigate", - "dismiss", - "load", - "error" - ], + "slots": ["default"], + "events": ["click", "action", "navigate", "dismiss", "load", "error"], "profiled": true }, { @@ -293,9 +216,7 @@ "purpose": "Theme-aware, responsive carousel component.", "demoCount": 3, "propCount": 22, - "slots": [ - "default" - ], + "slots": ["default"], "events": [ "initialize", "change", @@ -318,14 +239,8 @@ "purpose": "Theme-aware, responsive chart component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "select", - "dataPointClick", - "legendToggle" - ], + "slots": ["default"], + "events": ["select", "dataPointClick", "legendToggle"], "profiled": false }, { @@ -336,15 +251,8 @@ "purpose": "Theme-aware, responsive chat bubble component.", "demoCount": 3, "propCount": 11, - "slots": [ - "default" - ], - "events": [ - "action", - "messageClick", - "avatarClick", - "linkClick" - ], + "slots": ["default"], + "events": ["action", "messageClick", "avatarClick", "linkClick"], "profiled": false }, { @@ -355,16 +263,8 @@ "purpose": "Theme-aware, responsive checkbox component.", "demoCount": 3, "propCount": 27, - "slots": [ - "default" - ], - "events": [ - "input", - "change", - "focus", - "blur", - "invalid" - ], + "slots": ["default"], + "events": ["input", "change", "focus", "blur", "invalid"], "profiled": false }, { @@ -375,14 +275,8 @@ "purpose": "Theme-aware, responsive clipboard component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "copy", - "success", - "error" - ], + "slots": ["default"], + "events": ["copy", "success", "error"], "profiled": false }, { @@ -393,14 +287,8 @@ "purpose": "Theme-aware, responsive collapse component.", "demoCount": 3, "propCount": 8, - "slots": [ - "default" - ], - "events": [ - "toggle", - "open", - "close" - ], + "slots": ["default"], + "events": ["toggle", "open", "close"], "profiled": false }, { @@ -412,12 +300,7 @@ "demoCount": 3, "propCount": 19, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur" - ], + "events": ["input", "change", "focus", "blur"], "profiled": false }, { @@ -428,9 +311,7 @@ "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width.", "demoCount": 3, "propCount": 6, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -443,16 +324,7 @@ "demoCount": 21, "propCount": 41, "slots": [], - "events": [ - "search", - "select", - "change", - "clear", - "open", - "close", - "load", - "error" - ], + "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], "profiled": false }, { @@ -463,13 +335,8 @@ "purpose": "Theme-aware, responsive confetti component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "start", - "complete" - ], + "slots": ["default"], + "events": ["start", "complete"], "profiled": false }, { @@ -480,9 +347,7 @@ "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options.", "demoCount": 3, "propCount": 6, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -494,18 +359,8 @@ "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.", "demoCount": 3, "propCount": 18, - "slots": [ - "trigger", - "header", - "default", - "footer" - ], - "events": [ - "open", - "close", - "select", - "action" - ], + "slots": ["trigger", "header", "default", "footer"], + "events": ["open", "close", "select", "action"], "profiled": true }, { @@ -517,11 +372,7 @@ "demoCount": 3, "propCount": 13, "slots": [], - "events": [ - "copy", - "success", - "error" - ], + "events": ["copy", "success", "error"], "profiled": false }, { @@ -532,12 +383,7 @@ "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.", "demoCount": 3, "propCount": 25, - "slots": [ - "default", - "actions", - "visual", - "footer" - ], + "slots": ["default", "actions", "visual", "footer"], "events": [], "profiled": true }, @@ -549,12 +395,8 @@ "purpose": "Theme-aware, responsive custom scrollbar component.", "demoCount": 3, "propCount": 6, - "slots": [ - "default" - ], - "events": [ - "scroll" - ], + "slots": ["default"], + "events": ["scroll"], "profiled": false }, { @@ -565,13 +407,8 @@ "purpose": "Theme-aware, responsive data map component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "select", - "change" - ], + "slots": ["default"], + "events": ["select", "change"], "profiled": false }, { @@ -582,16 +419,8 @@ "purpose": "Theme-aware, responsive data table component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "sort", - "select", - "change", - "rowClick", - "pageChange" - ], + "slots": ["default"], + "events": ["sort", "select", "change", "rowClick", "pageChange"], "profiled": false }, { @@ -603,15 +432,7 @@ "demoCount": 3, "propCount": 25, "slots": [], - "events": [ - "input", - "change", - "open", - "close", - "focus", - "blur", - "invalid" - ], + "events": ["input", "change", "open", "close", "focus", "blur", "invalid"], "profiled": false }, { @@ -622,13 +443,8 @@ "purpose": "Theme-aware, responsive device frame component.", "demoCount": 3, "propCount": 14, - "slots": [ - "default" - ], - "events": [ - "change", - "rotate" - ], + "slots": ["default"], + "events": ["change", "rotate"], "profiled": false }, { @@ -651,17 +467,8 @@ "purpose": "Theme-aware, responsive drag and drop component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "dragStart", - "dragEnd", - "dragEnter", - "dragLeave", - "drop", - "change" - ], + "slots": ["default"], + "events": ["dragStart", "dragEnd", "dragEnter", "dragLeave", "drop", "change"], "profiled": false }, { @@ -672,17 +479,8 @@ "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.", "demoCount": 3, "propCount": 19, - "slots": [ - "trigger", - "header", - "default", - "footer" - ], - "events": [ - "open", - "close", - "cancel" - ], + "slots": ["trigger", "header", "default", "footer"], + "events": ["open", "close", "cancel"], "profiled": true }, { @@ -693,19 +491,8 @@ "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.", "demoCount": 3, "propCount": 17, - "slots": [ - "trigger", - "header", - "default", - "footer" - ], - "events": [ - "toggle", - "open", - "close", - "select", - "action" - ], + "slots": ["trigger", "header", "default", "footer"], + "events": ["toggle", "open", "close", "select", "action"], "profiled": true }, { @@ -716,12 +503,7 @@ "purpose": "Present one linked feature or service with media, icon, badge, description, and action.", "demoCount": 3, "propCount": 28, - "slots": [ - "media", - "icon", - "default", - "footer" - ], + "slots": ["media", "icon", "default", "footer"], "events": [], "profiled": true }, @@ -732,10 +514,8 @@ "category": "layout", "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.", "demoCount": 3, - "propCount": 12, - "slots": [ - "default" - ], + "propCount": 14, + "slots": ["default"], "events": [], "profiled": true }, @@ -747,10 +527,7 @@ "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.", "demoCount": 3, "propCount": 14, - "slots": [ - "default", - "footer" - ], + "slots": ["default", "footer"], "events": [], "profiled": true }, @@ -763,15 +540,7 @@ "demoCount": 3, "propCount": 21, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur", - "select", - "clear", - "invalid" - ], + "events": ["input", "change", "focus", "blur", "select", "clear", "invalid"], "profiled": false }, { @@ -782,18 +551,8 @@ "purpose": "Theme-aware, responsive file upload component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "select", - "upload", - "progress", - "success", - "error", - "cancel", - "remove" - ], + "slots": ["default"], + "events": ["select", "upload", "progress", "success", "error", "cancel", "remove"], "profiled": false }, { @@ -805,11 +564,7 @@ "demoCount": 3, "propCount": 13, "slots": [], - "events": [ - "cancel", - "retry", - "complete" - ], + "events": ["cancel", "retry", "complete"], "profiled": false }, { @@ -820,16 +575,8 @@ "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.", "demoCount": 3, "propCount": 8, - "slots": [ - "pre-footer", - "post-footer", - "copyright-left", - "copyright-right" - ], - "events": [ - "select", - "action" - ], + "slots": ["pre-footer", "post-footer", "copyright-left", "copyright-right"], + "events": ["select", "action"], "profiled": true }, { @@ -840,9 +587,7 @@ "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.", "demoCount": 3, "propCount": 6, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -854,14 +599,7 @@ "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.", "demoCount": 3, "propCount": 38, - "slots": [ - "eyebrow", - "actions", - "trust", - "default", - "visual", - "footer" - ], + "slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"], "events": [], "profiled": true }, @@ -873,9 +611,7 @@ "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.", "demoCount": 3, "propCount": 8, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -887,9 +623,7 @@ "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.", "demoCount": 3, "propCount": 9, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -902,15 +636,7 @@ "demoCount": 3, "propCount": 28, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur", - "invalid", - "keydown", - "keyup" - ], + "events": ["input", "change", "focus", "blur", "invalid", "keydown", "keyup"], "profiled": false }, { @@ -922,14 +648,7 @@ "demoCount": 3, "propCount": 23, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur", - "submit", - "action" - ], + "events": ["input", "change", "focus", "blur", "submit", "action"], "profiled": false }, { @@ -941,12 +660,7 @@ "demoCount": 12, "propCount": 40, "slots": [], - "events": [ - "input", - "change", - "increment", - "decrement" - ], + "events": ["input", "change", "increment", "decrement"], "profiled": false }, { @@ -957,9 +671,7 @@ "purpose": "Theme-aware, responsive kbd component.", "demoCount": 3, "propCount": 4, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": false }, @@ -971,14 +683,8 @@ "purpose": "Theme-aware, responsive layout splitter component.", "demoCount": 3, "propCount": 6, - "slots": [ - "default" - ], - "events": [ - "resizeStart", - "resize", - "resizeEnd" - ], + "slots": ["default"], + "events": ["resizeStart", "resize", "resizeEnd"], "profiled": false }, { @@ -989,13 +695,8 @@ "purpose": "Theme-aware, responsive legend indicator component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "toggle", - "select" - ], + "slots": ["default"], + "events": ["toggle", "select"], "profiled": false }, { @@ -1006,9 +707,7 @@ "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events.", "demoCount": 3, "propCount": 8, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1020,9 +719,7 @@ "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1034,13 +731,8 @@ "purpose": "Theme-aware, responsive list group component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "select", - "change" - ], + "slots": ["default"], + "events": ["select", "change"], "profiled": false }, { @@ -1051,9 +743,7 @@ "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1065,11 +755,7 @@ "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.", "demoCount": 3, "propCount": 12, - "slots": [ - "icon", - "actions", - "default" - ], + "slots": ["icon", "actions", "default"], "events": [], "profiled": true }, @@ -1081,9 +767,7 @@ "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1095,14 +779,8 @@ "purpose": "Theme-aware, responsive mega menu component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "open", - "close", - "select" - ], + "slots": ["default"], + "events": ["open", "close", "select"], "profiled": false }, { @@ -1113,14 +791,8 @@ "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.", "demoCount": 3, "propCount": 28, - "slots": [ - "default", - "footer" - ], - "events": [ - "select", - "action" - ], + "slots": ["default", "footer"], + "events": ["select", "action"], "profiled": true }, { @@ -1131,13 +803,8 @@ "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.", "demoCount": 3, "propCount": 13, - "slots": [ - "default" - ], - "events": [ - "select", - "action" - ], + "slots": ["default"], + "events": ["select", "action"], "profiled": true }, { @@ -1148,18 +815,8 @@ "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.", "demoCount": 3, "propCount": 28, - "slots": [ - "trigger", - "header", - "default", - "footer" - ], - "events": [ - "open", - "close", - "cancel", - "confirm" - ], + "slots": ["trigger", "header", "default", "footer"], + "events": ["open", "close", "cancel", "confirm"], "profiled": true }, { @@ -1170,13 +827,8 @@ "purpose": "Theme-aware, responsive nav component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "select", - "change" - ], + "slots": ["default"], + "events": ["select", "change"], "profiled": false }, { @@ -1187,17 +839,8 @@ "purpose": "Theme-aware, responsive navbar component.", "demoCount": 3, "propCount": 13, - "slots": [ - "topbar", - "actions" - ], - "events": [ - "toggle", - "open", - "close", - "select", - "action" - ], + "slots": ["topbar", "actions"], + "events": ["toggle", "open", "close", "select", "action"], "profiled": false }, { @@ -1208,11 +851,7 @@ "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.", "demoCount": 3, "propCount": 25, - "slots": [ - "meta", - "actions", - "default" - ], + "slots": ["meta", "actions", "default"], "events": [], "profiled": true }, @@ -1224,14 +863,8 @@ "purpose": "Theme-aware, responsive pagination component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "change", - "previous", - "next" - ], + "slots": ["default"], + "events": ["change", "previous", "next"], "profiled": false }, { @@ -1243,14 +876,7 @@ "demoCount": 16, "propCount": 26, "slots": [], - "events": [ - "input", - "change", - "complete", - "paste", - "clear", - "error" - ], + "events": ["input", "change", "complete", "paste", "clear", "error"], "profiled": false }, { @@ -1261,18 +887,8 @@ "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.", "demoCount": 3, "propCount": 23, - "slots": [ - "trigger", - "header", - "default", - "footer" - ], - "events": [ - "toggle", - "open", - "close", - "action" - ], + "slots": ["trigger", "header", "default", "footer"], + "events": ["toggle", "open", "close", "action"], "profiled": true }, { @@ -1283,13 +899,8 @@ "purpose": "Reusable portal dashboard component.", "demoCount": 3, "propCount": 14, - "slots": [ - "hero-action" - ], - "events": [ - "action", - "navigate" - ], + "slots": ["hero-action"], + "events": ["action", "navigate"], "profiled": false }, { @@ -1301,11 +912,7 @@ "demoCount": 3, "propCount": 9, "slots": [], - "events": [ - "theme", - "color", - "language" - ], + "events": ["theme", "color", "language"], "profiled": false }, { @@ -1328,11 +935,7 @@ "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.", "demoCount": 3, "propCount": 10, - "slots": [ - "before", - "default", - "after" - ], + "slots": ["before", "default", "after"], "events": [], "profiled": true }, @@ -1345,13 +948,7 @@ "demoCount": 3, "propCount": 25, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur", - "invalid" - ], + "events": ["input", "change", "focus", "blur", "invalid"], "profiled": false }, { @@ -1363,12 +960,7 @@ "demoCount": 3, "propCount": 26, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur" - ], + "events": ["input", "change", "focus", "blur"], "profiled": false }, { @@ -1379,13 +971,8 @@ "purpose": "Theme-aware, responsive rating component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "input", - "change" - ], + "slots": ["default"], + "events": ["input", "change"], "profiled": false }, { @@ -1396,12 +983,8 @@ "purpose": "Theme-aware, responsive scrollspy component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "change" - ], + "slots": ["default"], + "events": ["change"], "profiled": false }, { @@ -1424,9 +1007,7 @@ "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.", "demoCount": 3, "propCount": 10, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1438,11 +1019,7 @@ "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.", "demoCount": 3, "propCount": 10, - "slots": [ - "icon", - "default", - "actions" - ], + "slots": ["icon", "default", "actions"], "events": [], "profiled": true }, @@ -1455,15 +1032,7 @@ "demoCount": 3, "propCount": 22, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur", - "open", - "close", - "invalid" - ], + "events": ["input", "change", "focus", "blur", "open", "close", "invalid"], "profiled": false }, { @@ -1474,15 +1043,8 @@ "purpose": "Theme-aware, responsive sidebar component.", "demoCount": 3, "propCount": 8, - "slots": [ - "default" - ], - "events": [ - "toggle", - "open", - "close", - "select" - ], + "slots": ["default"], + "events": ["toggle", "open", "close", "select"], "profiled": false }, { @@ -1517,12 +1079,7 @@ "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.", "demoCount": 3, "propCount": 31, - "slots": [ - "default", - "actions", - "trust", - "visual" - ], + "slots": ["default", "actions", "trust", "visual"], "events": [], "profiled": true }, @@ -1546,15 +1103,8 @@ "purpose": "Theme-aware, responsive stepper component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "change", - "previous", - "next", - "complete" - ], + "slots": ["default"], + "events": ["change", "previous", "next", "complete"], "profiled": false }, { @@ -1566,11 +1116,7 @@ "demoCount": 6, "propCount": 27, "slots": [], - "events": [ - "input", - "change", - "strength" - ], + "events": ["input", "change", "strength"], "profiled": false }, { @@ -1581,9 +1127,7 @@ "purpose": "Theme-aware, responsive styled icon component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": false }, @@ -1596,12 +1140,7 @@ "demoCount": 3, "propCount": 20, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur" - ], + "events": ["input", "change", "focus", "blur"], "profiled": false }, { @@ -1612,14 +1151,8 @@ "purpose": "Theme-aware, responsive table component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "sort", - "select", - "rowClick" - ], + "slots": ["default"], + "events": ["sort", "select", "rowClick"], "profiled": false }, { @@ -1630,9 +1163,7 @@ "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1645,13 +1176,7 @@ "demoCount": 3, "propCount": 23, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur", - "invalid" - ], + "events": ["input", "change", "focus", "blur", "invalid"], "profiled": false }, { @@ -1663,11 +1188,7 @@ "demoCount": 3, "propCount": 14, "slots": [], - "events": [ - "click", - "focus", - "blur" - ], + "events": ["click", "focus", "blur"], "profiled": true }, { @@ -1678,9 +1199,7 @@ "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1693,15 +1212,7 @@ "demoCount": 3, "propCount": 26, "slots": [], - "events": [ - "input", - "change", - "focus", - "blur", - "open", - "close", - "invalid" - ], + "events": ["input", "change", "focus", "blur", "open", "close", "invalid"], "profiled": false }, { @@ -1712,13 +1223,8 @@ "purpose": "Theme-aware, responsive toast component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "dismiss", - "action" - ], + "slots": ["default"], + "events": ["dismiss", "action"], "profiled": false }, { @@ -1729,15 +1235,8 @@ "purpose": "Theme-aware, responsive toast notifications component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "add", - "dismiss", - "clear", - "action" - ], + "slots": ["default"], + "events": ["add", "dismiss", "clear", "action"], "profiled": false }, { @@ -1749,10 +1248,7 @@ "demoCount": 3, "propCount": 23, "slots": [], - "events": [ - "change", - "toggle" - ], + "events": ["change", "toggle"], "profiled": false }, { @@ -1764,11 +1260,7 @@ "demoCount": 10, "propCount": 24, "slots": [], - "events": [ - "input", - "change", - "toggle" - ], + "events": ["input", "change", "toggle"], "profiled": false }, { @@ -1779,15 +1271,8 @@ "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state.", "demoCount": 3, "propCount": 17, - "slots": [ - "trigger", - "default" - ], - "events": [ - "toggle", - "open", - "close" - ], + "slots": ["trigger", "default"], + "events": ["toggle", "open", "close"], "profiled": true }, { @@ -1798,15 +1283,8 @@ "purpose": "Theme-aware, responsive tree view component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "select", - "toggle", - "expand", - "collapse" - ], + "slots": ["default"], + "events": ["select", "toggle", "expand", "collapse"], "profiled": false }, { @@ -1817,9 +1295,7 @@ "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.", "demoCount": 3, "propCount": 6, - "slots": [ - "default" - ], + "slots": ["default"], "events": [], "profiled": true }, @@ -1831,15 +1307,8 @@ "purpose": "Theme-aware, responsive wysiwyg editor component.", "demoCount": 3, "propCount": 7, - "slots": [ - "default" - ], - "events": [ - "input", - "change", - "focus", - "blur" - ], + "slots": ["default"], + "events": ["input", "change", "focus", "blur"], "profiled": false } ] diff --git a/examples/component-showcase/test/showcase.test.ts b/examples/component-showcase/test/showcase.test.ts index 6f1b2124..8c2167a3 100644 --- a/examples/component-showcase/test/showcase.test.ts +++ b/examples/component-showcase/test/showcase.test.ts @@ -37,8 +37,7 @@ const manifest = JSON.parse(readFileSync(join(root, "showcase-manifest.json"), " }>; }; -const detailSource = (slug: string) => - readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8"); +const detailSource = (slug: string) => readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8"); const interactiveOverlayNames = [ "ContextMenu", @@ -73,7 +72,9 @@ test("showcase manifest matches the generated UI reference", () => { expect(manifest.componentCount).toBe(reference.count); expect(manifest.components).toHaveLength(reference.count); expect(manifest.totalDemoCount).toBeGreaterThanOrEqual(reference.count * 3); - expect(new Set(manifest.components.map((component) => component.slug)).size).toBe(reference.count); + expect(new Set(manifest.components.map((component) => component.slug)).size).toBe( + reference.count, + ); for (const component of reference.components) { const documented = manifest.components.find((entry) => entry.name === component.name); @@ -266,7 +267,9 @@ test("overlay previews start closed and expose usable click, hover, or context t expect(generator).toContain("interactiveOverlayComponents"); expect(generator).toContain("overlayVisibilityProps.has(name)"); - expect(generator).toContain('data-interactive-preview="${isInteractiveOverlay(component) ? "true" : "false"}"'); + expect(generator).toContain( + 'data-interactive-preview="${isInteractiveOverlay(component) ? "true" : "false"}"', + ); expect(styles).toContain('.catalog-card[data-interactive-preview="true"]'); expect(styles).toContain('[data-ui-component="Drawer"]'); expect(styles).toContain('[data-ui-component="Modal"]'); @@ -305,8 +308,18 @@ test("advanced select demos use validation schemas and a real remote API", () => test("specialized form component examples remain complete", () => { const checks: Array<[string, string[]]> = [ ["PinInput", ["Different lengths", 'length="3"', 'length="5"', 'length="7"']], - ["TogglePassword", ["Checkbox-controlled toggle", "Synchronized password fields", 'data-schema="toggle-password-validation"']], - ["StrongPassword", ["Live strength meter", "Requirements in a popover", 'specialCharactersSet="@#_-."']], + [ + "TogglePassword", + [ + "Checkbox-controlled toggle", + "Synchronized password fields", + 'data-schema="toggle-password-validation"', + ], + ], + [ + "StrongPassword", + ["Live strength meter", "Requirements in a popover", 'specialCharactersSet="@#_-."'], + ], ]; for (const [name, needles] of checks) { const component = manifest.components.find((entry) => entry.name === name); @@ -328,7 +341,7 @@ test("complex component props are complete readable multiline values", () => { test("generated playground boolean states avoid multiline-sensitive ternaries", () => { const generator = readFileSync(join(root, "scripts", "generate-showcase.mjs"), "utf8"); expect(generator).toContain('?? "${initial}") === "true"'); - expect(generator).not.toContain('=== null ? ${initial} :'); + expect(generator).not.toContain("=== null ? ${initial} :"); for (const component of manifest.components) { const source = detailSource(component.slug); diff --git a/integration/fixtures/v0.5-legacy-app/app/components/LegacyModal.wrn b/integration/fixtures/v0.5-legacy-app/app/components/LegacyModal.wrn new file mode 100644 index 00000000..7cabad55 --- /dev/null +++ b/integration/fixtures/v0.5-legacy-app/app/components/LegacyModal.wrn @@ -0,0 +1,23 @@ +component LegacyModal { + props { + title = "Confirm" + @event confirm = function + } + + state open = false + + functions { + function show() { + open = true + } + + function confirm() { + $emit("confirm", { accepted: true }) + } + } + + view { + + + } +} diff --git a/integration/fixtures/v0.5-legacy-app/app/layouts/PublicLayout.wrn b/integration/fixtures/v0.5-legacy-app/app/layouts/PublicLayout.wrn new file mode 100644 index 00000000..4db3fa3d --- /dev/null +++ b/integration/fixtures/v0.5-legacy-app/app/layouts/PublicLayout.wrn @@ -0,0 +1,5 @@ +layout PublicLayout { + view { +
+ } +} diff --git a/integration/fixtures/v0.5-legacy-app/app/pages/index.wrn b/integration/fixtures/v0.5-legacy-app/app/pages/index.wrn new file mode 100644 index 00000000..e9795223 --- /dev/null +++ b/integration/fixtures/v0.5-legacy-app/app/pages/index.wrn @@ -0,0 +1,13 @@ +page Home { + layout = "public" + + functions { + function handleConfirm(value) { + console.log(value) + } + } + + view { + + } +} diff --git a/integration/fixtures/v0.5-legacy-app/app/types/global.d.ts b/integration/fixtures/v0.5-legacy-app/app/types/global.d.ts new file mode 100644 index 00000000..ebc697d2 --- /dev/null +++ b/integration/fixtures/v0.5-legacy-app/app/types/global.d.ts @@ -0,0 +1,3 @@ +interface LegacyGlobalContext { + requestId: string; +} diff --git a/integration/fixtures/v0.5-legacy-app/package.json b/integration/fixtures/v0.5-legacy-app/package.json new file mode 100644 index 00000000..fee2e808 --- /dev/null +++ b/integration/fixtures/v0.5-legacy-app/package.json @@ -0,0 +1,9 @@ +{ + "name": "wrnexus-v05-legacy-fixture", + "private": true, + "version": "0.5.14", + "dependencies": { + "@wrnexus/core": "0.5.14", + "@wrnexus/ui": "0.5.14" + } +} diff --git a/llms.txt b/llms.txt index d218121d..f7f85322 100644 --- a/llms.txt +++ b/llms.txt @@ -303,3 +303,103 @@ wrnexus eject # copy a Wire UI component's .wrn into app/compone 3. For data, add an `app/api/*.ts` route and `getDb()`; for forms, add an `app/schemas/*.ts` and `data-schema`. 4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wire-*)`), or `style { }`. 5. Never emit React/JSX, a manual router, or client-side island JS — the framework handles hydration. + +## WRNexusJS v0.6 canonical language + + +Use normal imports, TypeScript contracts, typed state, callable outputs, runtime-specific functions, typed server calls, and framework stores: + +```wrn +import type { PublicUser, ConfirmPayload, ConfirmResult } from "@/types/user.ts" +import PublicLayout from "@/layouts/PublicLayout.wrn" +import userStore from "@/stores/global/user.wrn" +import { Button, Modal } from "@wrnexus/ui" + +page ProfilePage { + layout = PublicLayout + + props { + title: string + user?: PublicUser + } + + state { + loading: boolean = false + } + + client state { + modalOpen: boolean = false + } + + server state { + internalSessionId: string | null = null + } + + outputs { + success(payload: ConfirmResult) + cancel() + } + + functions { + client async function confirm(payload: ConfirmPayload): Promise { + loading = true + try { + const result = await server.confirm(payload) + output.success(result) + } finally { + loading = false + } + } + + server async function confirm(payload: ConfirmPayload): Promise { + return await confirmationService.save(payload) + } + + shared function normalize(value: string): string { + return value.trim() + } + } + + view { + + + + } +} +``` + +Rules: +- Canonical function modifier order is `runtime -> async -> function -> name`. +- Use `output.name(payload)` for component outputs; `$emit` is compatibility-only. +- Native DOM handlers receive `event`; component-output handlers receive `payload`. +- `server.name(...)` performs a typed same-origin RPC call from browser code. +- `app/types/global.d.ts` is ambient; other `app/types/*.ts` files require `import type`. +- `state` is shared/hydrated, `client state` is browser-only, and `server state` is never serialized. +- Global stores are request-scoped in SSR and survive CSR navigation. Page stores are disposed on route leave. +- Existing projects default to compatible import/event/layout behavior; new code should use explicit imports and typed contracts. + +Store example: + +```wrn +global store UserStore { + state { + user: PublicUser | null = null + } + + computed { + authenticated: boolean = user !== null + } + + persist { + storage = "local" + include = ["user"] + version = 1 + } + + functions { + client function clear(): void { + user = null + } + } +} +``` diff --git a/package.json b/package.json index 87e4ea03..d07e41fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wrnexus", - "version": "0.5.4", + "version": "0.6.0", "private": true, "type": "module", "description": "An SSR-first full-stack web framework with server-rendered reactive components. Bun-first, Node-friendly.", @@ -31,7 +31,8 @@ "validate:0.4": "node scripts/validate-0.4.mjs", "auth:dev": "bun run --cwd examples/auth-showcase dev", "auth:check": "bun run --cwd packages/auth check", - "validate:auth": "node scripts/validate-auth.mjs" + "validate:auth": "node scripts/validate-auth.mjs", + "validate:0.6": "node scripts/validate-0.6.mjs" }, "devDependencies": { "@eslint/js": "latest", diff --git a/packages/ai/package.json b/packages/ai/package.json index 2b671a9e..c6b535bb 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ai", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.", diff --git a/packages/auth/package.json b/packages/auth/package.json index 483d77e7..118a2c37 100644 --- a/packages/auth/package.json +++ b/packages/auth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/auth", - "version": "0.5.14", + "version": "0.6.0", "description": "Complete authentication, account security, MFA, passkeys, recovery, devices, risk, and audit system for WRNexusJS.", "type": "module", "sideEffects": false, diff --git a/packages/authz/package.json b/packages/authz/package.json index ee4101a8..8371988b 100644 --- a/packages/authz/package.json +++ b/packages/authz/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/authz", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/captcha/package.json b/packages/captcha/package.json index 114b8288..34101664 100644 --- a/packages/captcha/package.json +++ b/packages/captcha/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/captcha", - "version": "0.5.14", + "version": "0.6.0", "description": "First-class CAPTCHA challenges, providers, verification guards, page gates, and WRNexusJS UI.", "type": "module", "sideEffects": false, diff --git a/packages/cli/package.json b/packages/cli/package.json index 7f73a056..104585ee 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/cli", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/cli/src/update.ts b/packages/cli/src/update.ts index 0e74a256..0ce1b496 100644 --- a/packages/cli/src/update.ts +++ b/packages/cli/src/update.ts @@ -28,7 +28,7 @@ import { writeFileSync, } from "node:fs"; import { spawnSync } from "node:child_process"; -import { dirname, join, resolve } from "node:path"; +import { basename, dirname, join, relative, resolve } from "node:path"; import { pathToFileURL } from "node:url"; import { AI_GUIDE, CLAUDE_MD } from "./ai-guide.ts"; import { inspectProject, type DoctorCheck } from "./doctor.ts"; @@ -70,9 +70,20 @@ interface MigrationCtx { from: string; to: string; dryRun: boolean; + explicitImports: boolean; + report: MigrationReport; log: (msg: string) => void; } +export interface MigrationReport { + changedAutomatically: string[]; + needsReview: string[]; + unresolvedImports: string[]; + ambiguousFunctions: string[]; + legacyOutputPayloads: string[]; + parseFailures: string[]; +} + interface Migration { /** Framework version that introduced this change. Runs when `from < version <= to`. */ version: string; @@ -181,6 +192,373 @@ export function migrateWrnSource(source: string): string { return formatInlineProps(quoteLegacyDynamicAttributes(source)); } +function findMatching(source: string, open: number, openChar = "{", closeChar = "}"): number { + let depth = 0; + let quote = ""; + for (let index = open; index < source.length; index++) { + const char = source[index]!; + if (quote) { + if (char === "\\") index++; + else if (char === quote) quote = ""; + continue; + } + if (char === '"' || char === "'" || char === "`") quote = char; + else if (char === openChar) depth++; + else if (char === closeChar && --depth === 0) return index; + } + return -1; +} + +function convertLegacyEmit(source: string, report: MigrationReport, file: string): string { + let output = ""; + let cursor = 0; + while (true) { + const start = source.indexOf("$emit(", cursor); + if (start < 0) return output + source.slice(cursor); + output += source.slice(cursor, start); + const end = findMatching(source, start + 5, "(", ")"); + if (end < 0) { + report.needsReview.push(`${file}: unterminated $emit call`); + return output + source.slice(start); + } + const args = source.slice(start + 6, end); + const match = args.match(/^\s*(["'])([A-Za-z_$][\w$:-]*)\1\s*(?:,\s*([\s\S]*))?$/); + if (!match) { + report.needsReview.push(`${file}: dynamic $emit requires manual review`); + output += source.slice(start, end + 1); + } else { + const payload = (match[3] ?? "").trim(); + output += payload ? `output.${match[2]}(${payload})` : `output.${match[2]}()`; + } + cursor = end + 1; + } +} + +function collectLegacyEvents(source: string): { source: string; outputs: string[] } { + const outputs: string[] = []; + const next = source.replace( + /(^|[\s;])@event\s+([A-Za-z_$][\w$]*)\s*=\s*function\b[ \t]*(?:\r?\n)?/gm, + (_whole, prefix: string, name: string) => { + outputs.push(name); + return prefix; + }, + ); + return { source: next, outputs }; +} + +function ensureOutputsBlock( + source: string, + names: string[], + report: MigrationReport, + file: string, +): string { + if (!names.length) return source; + const unique = [...new Set(names)]; + const blockMatch = /\boutputs\s*\{/.exec(source); + if (blockMatch) { + const open = source.indexOf("{", blockMatch.index); + const close = findMatching(source, open); + if (close < 0) return source; + const body = source.slice(open + 1, close); + const missing = unique.filter((name) => !new RegExp(`\\b${name}\\s*\\(`).test(body)); + if (!missing.length) return source; + const indent = source.slice(source.lastIndexOf("\n", blockMatch.index) + 1, blockMatch.index); + const additions = missing.map((name) => `${indent} ${name}(payload: unknown)`).join("\n"); + for (const name of missing) + report.legacyOutputPayloads.push(`${file}: ${name}(payload: unknown)`); + return source.slice(0, close) + `\n${additions}\n${indent}` + source.slice(close); + } + const rootOpen = source.indexOf("{"); + if (rootOpen < 0) return source; + const lineStart = source.lastIndexOf("\n", rootOpen) + 1; + const nonWhitespace = source.slice(lineStart).search(/\S/); + const rootIndent = nonWhitespace < 0 ? "" : source.slice(lineStart, lineStart + nonWhitespace); + const indent = `${rootIndent} `; + const block = `\n${indent}outputs {\n${unique.map((name) => `${indent} ${name}(payload: unknown)`).join("\n")}\n${indent}}\n`; + for (const name of unique) report.legacyOutputPayloads.push(`${file}: ${name}(payload: unknown)`); + return source.slice(0, rootOpen + 1) + block + source.slice(rootOpen + 1); +} + +function classifyLegacyFunctions(source: string, report: MigrationReport, file: string): string { + const functionsMatch = /\bfunctions\s*\{/.exec(source); + if (!functionsMatch) return source; + const open = source.indexOf("{", functionsMatch.index); + const close = findMatching(source, open); + if (close < 0) return source; + const body = source.slice(open + 1, close); + let output = ""; + let cursor = 0; + const header = + /(^|\n)([ \t]*)(?!client\s|server\s|shared\s)(async\s+)?function\s+([A-Za-z_$][\w$]*)\s*\([^)]*\)(?:\s*:\s*[^{\n]+)?\s*\{/g; + for (let match; (match = header.exec(body));) { + const bodyOpen = body.indexOf("{", match.index + match[0].length - 1); + const bodyClose = findMatching(body, bodyOpen); + if (bodyClose < 0) break; + const functionBody = body.slice(bodyOpen + 1, bodyClose); + const client = + /\b(window|document|localStorage|sessionStorage|navigator|HTMLElement|MouseEvent|KeyboardEvent|output\.|refs\.)\b/.test( + functionBody, + ); + const server = + /\b(ctx|Bun|process|database|db\.|serverService|authService|request|response)\b/.test( + functionBody, + ); + let runtime = ""; + if (client && !server) runtime = "client "; + else if (server && !client) runtime = "server "; + else if (!client && !server && !/\b(fetch|Date\.now|Math\.random)\b/.test(functionBody)) + runtime = "shared "; + else report.ambiguousFunctions.push(`${file}: ${match[4]}`); + output += + body.slice(cursor, match.index) + + match[1] + + match[2] + + runtime + + (match[3] ?? "") + + `function ${match[4]}`; + const consumedHeader = + match[0].lastIndexOf(`function ${match[4]}`) + `function ${match[4]}`.length; + output += match[0].slice(consumedHeader); + cursor = match.index + match[0].length; + header.lastIndex = bodyClose + 1; + } + output += body.slice(cursor); + return source.slice(0, open + 1) + output + source.slice(close); +} + +export function migrateV060WrnSource( + source: string, + report: MigrationReport, + file = "", +): string { + const legacy = collectLegacyEvents(source); + let next = ensureOutputsBlock(legacy.source, legacy.outputs, report, file); + next = convertLegacyEmit(next, report, file); + next = next.replace(/\bevent\.detail\b/g, "payload"); + next = classifyLegacyFunctions(next, report, file); + return migrateWrnSource(next); +} + +function updateV060Config(ctx: MigrationCtx): void { + const candidates = ["wrnexus.config.ts", "wrnexus.config.js", "wrnexus.config.mjs"]; + const file = candidates.map((name) => join(ctx.appRoot, name)).find(existsSync); + if (!file) return; + const current = readFileSync(file, "utf8"); + if (/\bimports\s*:/.test(current) && /\bcompatibility\s*:/.test(current)) return; + const insertion = `\n imports: { mode: "compatible", autoImport: true, aliases: { "@": "./app" } },\n types: { strict: false, noImplicitAny: false, strictNullChecks: true, checkTemplates: true, checkComponentProps: true, generateDeclarations: true, globalTypes: "./app/types/global.d.ts" },\n functions: { legacyDefaultRuntime: "current" },\n stores: { strictMutations: true, persistence: true },\n compatibility: { legacyEmit: true, legacyEventProps: true, legacyComponentDiscovery: true, stringLayouts: true },`; + const index = current.lastIndexOf("}"); + if (index < 0) return; + const next = + current.slice(0, index).replace(/,?\s*$/, "") + "," + insertion + "\n" + current.slice(index); + ctx.log(`~ ${file.slice(ctx.appRoot.length + 1)}: v0.6 compatibility configuration`); + if (!ctx.dryRun) writeFileSync(file, next, "utf8"); +} + +interface V060SymbolIndex { + components: Map; + layouts: Map; + ui: Set; +} + +function declarationName(file: string): string { + const source = readFileSync(file, "utf8"); + return ( + /\b(?:component|layout)\s+([A-Za-z_$][\w$]*)\s*\{/.exec(source)?.[1] ?? basename(file, ".wrn") + ); +} + +function addSymbol(index: Map, name: string, file: string): void { + const current = index.get(name) ?? []; + current.push(file); + index.set(name, current); +} + +function loadUiComponentNames(appRoot: string): Set { + const candidates = [ + join(appRoot, "node_modules", "@wrnexus", "ui", "component-reference.json"), + join(appRoot, "packages", "ui", "component-reference.json"), + ]; + for (const candidate of candidates) { + if (!existsSync(candidate)) continue; + try { + const parsed = JSON.parse(readFileSync(candidate, "utf8")) as { + components?: Array<{ name?: string }>; + }; + return new Set( + (parsed.components ?? []) + .map((entry) => entry.name) + .filter((name): name is string => Boolean(name)), + ); + } catch { + // Continue to an empty package index. The migration reports unresolved tags. + } + } + return new Set(); +} + +function buildV060SymbolIndex(appRoot: string): V060SymbolIndex { + const components = new Map(); + const layouts = new Map(); + for (const file of walkProjectFiles(join(appRoot, "app", "components"), ".wrn")) { + addSymbol(components, declarationName(file), file); + } + for (const file of walkProjectFiles(join(appRoot, "app", "layouts"), ".wrn")) { + const name = declarationName(file); + addSymbol(layouts, name, file); + addSymbol(layouts, basename(file, ".wrn"), file); + } + return { components, layouts, ui: loadUiComponentNames(appRoot) }; +} + +function importedLocalNames(source: string): Set { + const names = new Set(); + for (const statement of source.matchAll( + /^import\s+(?:type\s+)?([\s\S]*?)\s+from\s+["'][^"']+["']\s*;?/gm, + )) { + const clause = statement[1]!.trim(); + if (!clause.startsWith("{") && !clause.startsWith("*")) names.add(clause.split(",")[0]!.trim()); + for (const named of clause.matchAll( + /(?:\{|,)\s*(?:type\s+)?([A-Za-z_$][\w$]*)(?:\s+as\s+([A-Za-z_$][\w$]*))?/g, + )) { + names.add(named[2] ?? named[1]!); + } + } + return names; +} + +function importPathFor(appRoot: string, file: string): string { + return `@/${relative(join(appRoot, "app"), file).replace(/\\/g, "/")}`; +} + +function insertImports(source: string, statements: string[]): string { + if (!statements.length) return source; + const unique = [...new Set(statements)].filter((statement) => !source.includes(statement)); + if (!unique.length) return source; + const imports = Array.from( + source.matchAll( + /^import\s+[\s\S]*?(?:;\s*|\n(?=import|\s*(?:page|component|layout|global\s+store|page\s+store)\b))/gm, + ), + ); + const insertion = imports.length ? imports.at(-1)!.index! + imports.at(-1)![0].length : 0; + const prefix = insertion ? "\n" : ""; + return ( + source.slice(0, insertion) + + prefix + + unique.join("\n") + + "\n\n" + + source.slice(insertion).replace(/^\s*/, "") + ); +} + +function addExplicitImportsToSource( + source: string, + file: string, + appRoot: string, + index: V060SymbolIndex, + report: MigrationReport, +): string { + const imported = importedLocalNames(source); + const rootName = + /\b(?:page|component|layout|global\s+store|page\s+store)\s+([A-Za-z_$][\w$]*)/.exec( + source, + )?.[1]; + const applicationImports: string[] = []; + const uiImports = new Set(); + const tags = new Set( + Array.from(source.matchAll(/<([A-Z][A-Za-z0-9_$]*)\b/g), (match) => match[1]!), + ); + for (const name of tags) { + if (name === rootName || imported.has(name)) continue; + const candidates = index.components.get(name) ?? []; + if (candidates.length === 1) { + applicationImports.push( + `import ${name} from ${JSON.stringify(importPathFor(appRoot, candidates[0]!))}`, + ); + imported.add(name); + } else if (candidates.length > 1) { + report.unresolvedImports.push( + `${file}: component '${name}' has ${candidates.length} application matches`, + ); + } else if (index.ui.has(name)) { + uiImports.add(name); + imported.add(name); + } else { + report.unresolvedImports.push(`${file}: component '${name}' could not be resolved`); + } + } + if (uiImports.size) { + const existingUi = /import\s*\{([\s\S]*?)\}\s*from\s*["']@wrnexus\/ui["']\s*;?/.exec(source); + if (existingUi) { + const names = new Set([ + ...Array.from( + existingUi[1]!.matchAll(/(?:^|,)\s*([A-Za-z_$][\w$]*)/g), + (match) => match[1]!, + ), + ...uiImports, + ]); + source = source.replace( + existingUi[0], + `import {\n${[...names] + .sort() + .map((name) => ` ${name},`) + .join("\n")}\n} from "@wrnexus/ui"`, + ); + } else { + applicationImports.push( + `import {\n${[...uiImports] + .sort() + .map((name) => ` ${name},`) + .join("\n")}\n} from "@wrnexus/ui"`, + ); + } + } + return insertImports(source, applicationImports); +} + +function migrateImportedLayout( + source: string, + file: string, + appRoot: string, + index: V060SymbolIndex, + report: MigrationReport, +): string { + const match = /\blayout\s*=\s*["']([^"']+)["']/.exec(source); + if (!match || match[1] === "none") return source; + const candidates = index.layouts.get(match[1]) ?? []; + const unique = [...new Set(candidates)]; + if (unique.length !== 1) { + report.unresolvedImports.push( + `${file}: layout '${match[1]}' ${unique.length ? "is ambiguous" : "was not found"}`, + ); + return source; + } + const symbol = declarationName(unique[0]!); + const statement = `import ${symbol} from ${JSON.stringify(importPathFor(appRoot, unique[0]!))}`; + return insertImports(source.replace(match[0], `layout = ${symbol}`), [statement]); +} + +function writeMigrationReport(ctx: MigrationCtx): void { + const file = join(ctx.appRoot, ".wrnexus", "migrations", "0.6.0-report.json"); + ctx.log(`+ .wrnexus/migrations/0.6.0-report.json`); + if (ctx.dryRun) return; + mkdirSync(dirname(file), { recursive: true }); + writeFileSync( + file, + JSON.stringify( + { + version: "0.6.0", + from: ctx.from, + to: ctx.to, + appliedAt: new Date().toISOString(), + ...ctx.report, + }, + null, + 2, + ) + "\n", + "utf8", + ); +} + /** * Versioned, idempotent upgrade steps. Each MUST be safe to re-run. Source * migrations must preserve semantics and are protected by update backups. @@ -1186,6 +1564,179 @@ const MIGRATIONS: Migration[] = [ // Compiler, SSR, dev-server, and CSR runtime changes apply automatically. }, }, + { + version: "0.6.0", + id: "0.6.0-01-parser-and-language", + description: + "Enables the v0.6 parser, AST, typed state, imports, stores, outputs, and runtime function grammar.", + apply() {}, + }, + { + version: "0.6.0", + id: "0.6.0-02-function-runtime", + description: + "Classifies unambiguous legacy functions as client, server, or shared while preserving ambiguous behavior.", + apply(ctx) { + for (const file of walkProjectFiles(join(ctx.appRoot, "app"), ".wrn")) { + const before = readFileSync(file, "utf8"); + const relative = file.slice(ctx.appRoot.length + 1).replace(/\\/g, "/"); + const after = classifyLegacyFunctions(before, ctx.report, relative); + if (after === before) continue; + ctx.log(`~ ${relative}: runtime function modifiers`); + ctx.report.changedAutomatically.push(relative); + if (!ctx.dryRun) writeFileSync(file, after, "utf8"); + } + }, + }, + { + version: "0.6.0", + id: "0.6.0-03-typed-outputs", + description: + "Converts legacy @event declarations to typed outputs with safe unknown payload fallbacks.", + apply(ctx) { + for (const file of walkProjectFiles(join(ctx.appRoot, "app"), ".wrn")) { + const before = readFileSync(file, "utf8"); + const relative = file.slice(ctx.appRoot.length + 1).replace(/\\/g, "/"); + const legacy = collectLegacyEvents(before); + const after = ensureOutputsBlock(legacy.source, legacy.outputs, ctx.report, relative); + if (after === before) continue; + ctx.log(`~ ${relative}: typed outputs`); + ctx.report.changedAutomatically.push(relative); + if (!ctx.dryRun) writeFileSync(file, after, "utf8"); + } + }, + }, + { + version: "0.6.0", + id: "0.6.0-04-remove-emit", + description: + "Migrates static $emit calls and event.detail consumers to output.name(payload) and payload.", + apply(ctx) { + for (const file of walkProjectFiles(join(ctx.appRoot, "app"), ".wrn")) { + const before = readFileSync(file, "utf8"); + const relative = file.slice(ctx.appRoot.length + 1).replace(/\\/g, "/"); + const after = convertLegacyEmit(before, ctx.report, relative).replace( + /\bevent\.detail\b/g, + "payload", + ); + if (after === before) continue; + ctx.log(`~ ${relative}: callable outputs`); + ctx.report.changedAutomatically.push(relative); + if (!ctx.dryRun) writeFileSync(file, after, "utf8"); + } + }, + }, + { + version: "0.6.0", + id: "0.6.0-05-explicit-imports", + description: + "Enables compatible explicit imports and records unresolved symbols without guessing.", + apply(ctx) { + if (!ctx.explicitImports) return; + const index = buildV060SymbolIndex(ctx.appRoot); + for (const path of walkProjectFiles(join(ctx.appRoot, "app"), ".wrn")) { + const relativeFile = path.slice(ctx.appRoot.length + 1).replace(/\\/g, "/"); + const before = readFileSync(path, "utf8"); + const after = addExplicitImportsToSource( + before, + relativeFile, + ctx.appRoot, + index, + ctx.report, + ); + if (after === before) continue; + ctx.log(`~ ${relativeFile}: explicit imports`); + if (!ctx.report.changedAutomatically.includes(relativeFile)) + ctx.report.changedAutomatically.push(relativeFile); + if (!ctx.dryRun) writeFileSync(path, after, "utf8"); + } + }, + }, + { + version: "0.6.0", + id: "0.6.0-06-layout-imports", + description: + "Converts safely resolvable string layouts to imported symbols while retaining compatibility.", + apply(ctx) { + if (!ctx.explicitImports) return; + const index = buildV060SymbolIndex(ctx.appRoot); + for (const path of walkProjectFiles(join(ctx.appRoot, "app"), ".wrn")) { + const relativeFile = path.slice(ctx.appRoot.length + 1).replace(/\\/g, "/"); + const before = readFileSync(path, "utf8"); + const after = migrateImportedLayout(before, relativeFile, ctx.appRoot, index, ctx.report); + if (after === before) continue; + ctx.log(`~ ${relativeFile}: imported layout`); + if (!ctx.report.changedAutomatically.includes(relativeFile)) + ctx.report.changedAutomatically.push(relativeFile); + if (!ctx.dryRun) writeFileSync(path, after, "utf8"); + } + }, + }, + { + version: "0.6.0", + id: "0.6.0-07-component-contracts", + description: "Enables generated component, output, function, and declaration contracts.", + apply() {}, + }, + { + version: "0.6.0", + id: "0.6.0-08-store-support", + description: "Adds @wrnexus/store and @wrnexus/typecheck to runnable applications.", + apply(ctx) { + if (!existsSync(join(ctx.appRoot, "app", "pages"))) return; + const file = join(ctx.appRoot, "package.json"); + const pkg = JSON.parse(readFileSync(file, "utf8")) as Record; + const dependencies = (pkg.dependencies ??= {}); + const added: string[] = []; + for (const name of ["@wrnexus/store", "@wrnexus/typecheck"]) { + if (dependencies[name] === `^${ctx.to}`) continue; + dependencies[name] = `^${ctx.to}`; + added.push(name); + } + if (added.length) ctx.log(`+ dependencies: ${added.join(", ")}`); + if (!ctx.dryRun && added.length) + writeFileSync(file, JSON.stringify(pkg, null, 2) + "\n", "utf8"); + }, + }, + { + version: "0.6.0", + id: "0.6.0-09-type-config", + description: + "Adds compatible imports, type checking, stores, and legacy behavior configuration.", + apply(ctx) { + updateV060Config(ctx); + const types = join(ctx.appRoot, "app", "types"); + if (!existsSync(types)) { + ctx.log("+ app/types/global.d.ts"); + if (!ctx.dryRun) { + mkdirSync(types, { recursive: true }); + writeFileSync( + join(types, "global.d.ts"), + "// Application-wide ambient WRNexusJS types.\nexport {};\n", + "utf8", + ); + } + } + }, + }, + { + version: "0.6.0", + id: "0.6.0-10-showcase-and-ui", + description: "Finalizes v0.6 source normalization and writes the detailed migration report.", + apply(ctx) { + for (const file of walkProjectFiles(join(ctx.appRoot, "app"), ".wrn")) { + const before = readFileSync(file, "utf8"); + const relative = file.slice(ctx.appRoot.length + 1).replace(/\\/g, "/"); + const after = migrateWrnSource(before); + if (after === before) continue; + ctx.log(`~ ${relative}: final v0.6 normalization`); + if (!ctx.report.changedAutomatically.includes(relative)) + ctx.report.changedAutomatically.push(relative); + if (!ctx.dryRun) writeFileSync(file, after, "utf8"); + } + writeMigrationReport(ctx); + }, + }, ]; /** Release tooling uses this to require an explicit migration entry per version. */ @@ -1291,7 +1842,12 @@ function backupProjectFiles(appRoot: string, from: string, target: string): stri } /** Update one app without marking success until install and verification pass. */ -export function updateApp(appRoot: string, target: string, dryRun: boolean): UpdatedApp | null { +export function updateApp( + appRoot: string, + target: string, + dryRun: boolean, + options: { explicitImports?: boolean; report?: MigrationReport } = {}, +): UpdatedApp | null { const pkgPath = join(appRoot, "package.json"); if (!existsSync(pkgPath)) { console.log(` ⚠ ${appRoot}: no package.json — skipped`); @@ -1300,6 +1856,16 @@ export function updateApp(appRoot: string, target: string, dryRun: boolean): Upd const pkg = JSON.parse(readFileSync(pkgPath, "utf8")) as Record; const from = appVersion(appRoot, pkg); const log = (m: string) => console.log(` ${m}`); + const report = + options.report ?? + ({ + changedAutomatically: [], + needsReview: [], + unresolvedImports: [], + ambiguousFunctions: [], + legacyOutputPayloads: [], + parseFailures: [], + } satisfies MigrationReport); console.log(` ▸ ${pkg.name ?? appRoot} (${from} → ${target})`); if (!dryRun) log(`backup: ${backupProjectFiles(appRoot, from, target)}`); @@ -1312,7 +1878,15 @@ export function updateApp(appRoot: string, target: string, dryRun: boolean): Upd for (const m of MIGRATIONS) { if (cmp(m.version, from) > 0 && cmp(m.version, target) <= 0) { - m.apply({ appRoot, from, to: target, dryRun, log }); + m.apply({ + appRoot, + from, + to: target, + dryRun, + explicitImports: options.explicitImports ?? false, + report, + log, + }); } } @@ -1383,6 +1957,8 @@ export async function runUpdate(dir: string, args: string[]): Promise { const root = resolve(dir); const dryRun = args.includes("--dry-run"); const verify = !args.includes("--no-verify"); + const explicitImports = args.includes("--explicit-imports"); + const reportRequested = args.includes("--report"); const versionArg = args.find((a) => a.startsWith("--version="))?.split("=")[1]; const target = versionArg ?? (args.includes("--latest") ? latestPublished() : null) ?? cliVersion(); @@ -1417,7 +1993,36 @@ export async function runUpdate(dir: string, args: string[]): Promise { // Workspace → update the root manifest + every app; else just this app. const apps = await workspaceApps(root); const targets = apps ? [root, ...apps] : [root]; - const updated = targets.map((t) => updateApp(t, target, dryRun)).filter(Boolean) as UpdatedApp[]; + const reports = new Map(); + const updated = targets + .map((targetRoot) => { + const report: MigrationReport = { + changedAutomatically: [], + needsReview: [], + unresolvedImports: [], + ambiguousFunctions: [], + legacyOutputPayloads: [], + parseFailures: [], + }; + reports.set(targetRoot, report); + return updateApp(targetRoot, target, dryRun, { explicitImports, report }); + }) + .filter(Boolean) as UpdatedApp[]; + + if (reportRequested || dryRun) { + for (const [targetRoot, report] of reports) { + console.log(` + Migration report: ${targetRoot}`); + console.log(` Changed automatically: ${new Set(report.changedAutomatically).size}`); + console.log(` Needs review: ${report.needsReview.length}`); + console.log(` Unresolved imports: ${report.unresolvedImports.length}`); + console.log(` Ambiguous function runtime: ${report.ambiguousFunctions.length}`); + console.log( + ` Legacy output payloads using unknown: ${report.legacyOutputPayloads.length}`, + ); + console.log(` Parse failures: ${report.parseFailures.length}`); + } + } if (dryRun) { console.log(`\n Dry run — no files written. Re-run without --dry-run to apply.\n`); diff --git a/packages/cli/test/update-v060.test.ts b/packages/cli/test/update-v060.test.ts new file mode 100644 index 00000000..499b3d38 --- /dev/null +++ b/packages/cli/test/update-v060.test.ts @@ -0,0 +1,33 @@ +import { describe, expect, test } from "bun:test"; +import { migrateV060WrnSource } from "../src/update.ts"; + +const report = () => ({ + changedAutomatically: [], + needsReview: [], + unresolvedImports: [], + ambiguousFunctions: [], + legacyOutputPayloads: [], + parseFailures: [], +}); + +describe("v0.6 source migration", () => { + test("converts legacy outputs and remains idempotent", () => { + const input = `component Demo { + props { + @event confirm = function + } + functions { + function confirm() { + $emit("confirm", { ok: true }) + } + } + view { } +}`; + const first = migrateV060WrnSource(input, report(), "Demo.wrn"); + const second = migrateV060WrnSource(first, report(), "Demo.wrn"); + expect(first).toContain("outputs {"); + expect(first).toContain("confirm(payload: unknown)"); + expect(first).toContain("output.confirm({ ok: true })"); + expect(second).toBe(first); + }); +}); diff --git a/packages/compiler/package.json b/packages/compiler/package.json index a62200cc..631b17ff 100644 --- a/packages/compiler/package.json +++ b/packages/compiler/package.json @@ -1,12 +1,13 @@ { "name": "@wrnexus/compiler", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { ".": "./src/index.ts" }, "dependencies": { - "@wrnexus/syntax": "workspace:*" + "@wrnexus/syntax": "workspace:*", + "@wrnexus/store": "workspace:*" } } diff --git a/packages/compiler/src/client-codegen.ts b/packages/compiler/src/client-codegen.ts new file mode 100644 index 00000000..d023770b --- /dev/null +++ b/packages/compiler/src/client-codegen.ts @@ -0,0 +1,200 @@ +import { eraseFunctionTypes, type PageAst, type RuntimeFunctionDecl } from "@wrnexus/syntax"; + +const RESERVED_BINDINGS = new Set([ + "await", + "break", + "case", + "catch", + "class", + "const", + "continue", + "debugger", + "default", + "delete", + "do", + "else", + "enum", + "export", + "extends", + "false", + "finally", + "for", + "function", + "if", + "implements", + "import", + "in", + "instanceof", + "interface", + "let", + "new", + "null", + "package", + "private", + "protected", + "public", + "return", + "static", + "super", + "switch", + "this", + "throw", + "true", + "try", + "typeof", + "var", + "void", + "while", + "with", + "yield", +]); +const RUNTIME_BINDINGS = new Set([ + "context", + "state", + "output", + "server", + "props", + "refs", + "event", + "payload", +]); + +function safeIdentifier(name: string): boolean { + return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name) && !RESERVED_BINDINGS.has(name); +} + +function functionEntry( + ast: PageAst, + fn: RuntimeFunctionDecl, + availableFunctions: string[], +): string { + const parameterNames = new Set(fn.parameters.map((parameter) => parameter.name)); + const stateNames = ast.states + .filter( + (state) => + state.runtime !== "server" && + safeIdentifier(state.name) && + !RUNTIME_BINDINGS.has(state.name) && + !parameterNames.has(state.name), + ) + .map((state) => state.name); + const stateSet = new Set(stateNames); + const propNames = ast.props + .filter( + (prop) => + safeIdentifier(prop.name) && + !RUNTIME_BINDINGS.has(prop.name) && + !parameterNames.has(prop.name) && + !stateSet.has(prop.name), + ) + .map((prop) => prop.name); + const functionAliases = availableFunctions.filter( + (name) => + safeIdentifier(name) && + !RUNTIME_BINDINGS.has(name) && + !parameterNames.has(name) && + !stateSet.has(name) && + !propNames.includes(name), + ); + const parameters = fn.parameters.map((parameter) => parameter.name).join(", "); + const initialStateSnapshot = stateNames.length + ? `const __wrnexusInitialState = { ${stateNames.map((name) => `${JSON.stringify(name)}: context.state.${name}`).join(", ")} };` + : ""; + const stateAliases = stateNames.length ? `let { ${stateNames.join(", ")} } = context.state;` : ""; + const propAliases = propNames.length ? `const { ${propNames.join(", ")} } = context.props;` : ""; + const syncStateToContext = stateNames.map((name) => `context.state.${name} = ${name};`).join(" "); + const syncStateFromContext = stateNames + .map((name) => `${name} = context.state.${name};`) + .join(" "); + const peerAliases = functionAliases + .map((name) => { + const call = `context.functions[${JSON.stringify(name)}](...__wrnexusPeerArgs)`; + if (!stateNames.length) { + return `const ${name} = (...__wrnexusPeerArgs) => ${call};`; + } + return `const ${name} = (...__wrnexusPeerArgs) => { + ${syncStateToContext} + let __wrnexusPeerResult; + try { + __wrnexusPeerResult = ${call}; + } catch (__wrnexusPeerError) { + ${syncStateFromContext} + throw __wrnexusPeerError; + } + if (__wrnexusPeerResult && typeof __wrnexusPeerResult.then === "function") { + return Promise.resolve(__wrnexusPeerResult).finally(() => { ${syncStateFromContext} }); + } + ${syncStateFromContext} + return __wrnexusPeerResult; + };`; + }) + .join("\n"); + const copyBack = stateNames + .map( + (name) => + `if (!Object.is(${name}, __wrnexusInitialState[${JSON.stringify(name)}])) context.state.${name} = ${name};`, + ) + .join("\n"); + const body = eraseFunctionTypes(fn.body); + const runtimeBindings = [ + !parameterNames.has("output") ? "const output = context.output;" : "", + !parameterNames.has("server") ? "const server = context.server;" : "", + !parameterNames.has("props") ? "const props = context.props;" : "", + !parameterNames.has("refs") ? "const refs = context.refs;" : "", + ] + .filter(Boolean) + .join("\n "); + return `${JSON.stringify(fn.name)}: ${fn.async ? "async " : ""}function(context${parameters ? `, ${parameters}` : ""}) { + ${initialStateSnapshot} + ${stateAliases} + ${propAliases} + ${peerAliases} + ${runtimeBindings} + try { + ${body} + } finally { + ${copyBack} + } + }`; +} + +export function generateBrowserModule(ast: PageAst): string { + const functions = ast.runtimeFunctions.filter((fn) => + ["legacy", "client", "shared"].includes(fn.runtime), + ); + const functionNames = functions.map((fn) => fn.name); + const state = ast.states.filter((entry) => entry.runtime !== "server").map((entry) => entry.name); + const storeImports = ast.structuredImports.filter( + (entry) => + !entry.typeOnly && entry.source.endsWith(".wrn") && /(?:^|\/)stores?\//.test(entry.source), + ); + const imports = ast.structuredImports + .filter((entry) => !entry.typeOnly) + .filter((entry) => !entry.source.endsWith(".wrn") || /(?:^|\/)stores?\//.test(entry.source)) + .map((entry) => entry.raw) + .join("\n"); + const importedBindings = storeImports + .flatMap((entry) => [ + ...(entry.defaultImport ? [entry.defaultImport] : []), + ...(entry.namespaceImport ? [entry.namespaceImport] : []), + ...entry.namedImports.map((item) => item.local), + ]) + .filter(safeIdentifier); + return `// generated WRNexusJS browser module for ${ast.name} +${imports} +export const __wrnexusClientFunctions = { +${functions.map((fn) => ` ${functionEntry(ast, fn, functionNames)}`).join(",\n")} +}; +export const __wrnexusClientState = ${JSON.stringify(state)}; +export const __wrnexusOutputs = ${JSON.stringify(ast.outputs)}; +export const __wrnexusImportedBindings = { ${importedBindings.join(", ")} }; +export function bindClientScope(context) { + const functions = {}; + const scopedContext = { ...context, functions }; + for (const [name, handler] of Object.entries(__wrnexusClientFunctions)) { + functions[name] = (...args) => handler(scopedContext, ...args); + } + return functions; +} +`; +} diff --git a/packages/compiler/src/codegen.ts b/packages/compiler/src/codegen.ts index 166c7c01..72461ab5 100644 --- a/packages/compiler/src/codegen.ts +++ b/packages/compiler/src/codegen.ts @@ -19,6 +19,8 @@ import { Buffer } from "node:buffer"; import { VOID_ELEMENTS, type Attr, type DataMode, type PageAst, type ViewNode } from "./parser.ts"; import { eraseFunctionTypes, runtimeTypeOf } from "./types.ts"; +import { stripRuntimeFunctionModifiers } from "@wrnexus/syntax"; +import { generateStoreModule } from "./store-codegen.ts"; interface RenderBinding { method: string; @@ -765,6 +767,38 @@ function localStyleExport(ast: PageAst, styles: string[]): string | null { )};`; } +function isStoreImportSource(source: string): boolean { + return /(?:^|\/)stores?\//.test(source) || source.startsWith("@wrnexus/store"); +} + +function importedStoreBindings(ast: PageAst): Array<{ local: string; internal: string }> { + return ast.structuredImports + .filter( + (entry) => + entry.defaultImport && entry.source.endsWith(".wrn") && isStoreImportSource(entry.source), + ) + .map((entry) => ({ + local: entry.defaultImport!, + internal: `__wrnexusStoreDefinition_${entry.defaultImport}`, + })); +} + +function generatedImports(ast: PageAst): string[] { + const stores = new Map(importedStoreBindings(ast).map((entry) => [entry.local, entry.internal])); + return ast.structuredImports.map((entry) => { + if (!entry.defaultImport) return entry.raw; + const internal = stores.get(entry.defaultImport); + return internal + ? entry.raw.replace( + new RegExp( + `^(\\s*import\\s+(?:type\\s+)?)(?:${entry.defaultImport.replace(/[.*+?^${}()|[\\]\\]/g, "\\$&")})(\\s+from\\s+)`, + ), + `$1${internal}$2`, + ) + : entry.raw; + }); +} + function isSafeGeneratedIdentifier(name: string): boolean { return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name); } @@ -781,22 +815,47 @@ function generateSsrStateAliases(stateNames: string[]): string { function hydrationAttribute(ast: PageAst): string { const strategy = ast.hydrate ?? "load"; - return ` data-wrn-hydration="${attrEscape(hydrationId(ast))}" data-wrn-hydrate="${attrEscape(strategy)}" data-wrn-runtime="${attrEscape(ast.runtime ?? "universal")}"`; + const hasBrowserModule = ast.runtimeFunctions.some((fn) => + ["legacy", "client", "shared"].includes(fn.runtime), + ); + const moduleAttribute = hasBrowserModule + ? ' data-wrn-client-module="__WRNEXUS_CLIENT_MODULE__"' + : ""; + return ` data-wrn-hydration="${attrEscape(hydrationId(ast))}" data-wrn-hydrate="${attrEscape(strategy)}" data-wrn-runtime="${attrEscape(ast.runtime ?? "universal")}"${moduleAttribute}`; +} + +function targetFunctions(ast: PageAst, target: "browser" | "server"): string { + const runtimes = + target === "browser" + ? (["legacy", "client", "shared"] as const) + : (["legacy", "server", "shared"] as const); + return ast.functions + .map((body) => stripRuntimeFunctionModifiers(body, [...runtimes])) + .map((body) => body.trim()) + .filter(Boolean) + .join("\n\n"); +} + +function publicOutputNames(ast: PageAst): string[] { + return [ + ...new Set([ + ...ast.outputs.map((output) => output.name), + ...ast.events.map((event) => event.name), + ]), + ]; } export function generate(ast: PageAst): string { + if (ast.kind === "global-store" || ast.kind === "page-store") return generateStoreModule(ast); if (ast.kind === "component" || ast.kind === "layout") { return generateComponent(ast); } const out: string[] = []; - if (ast.imports.length > 0) out.push(ast.imports.join("\n")); + if (ast.imports.length > 0) out.push(generatedImports(ast).join("\n")); const ssrBindings: SsrBinding[] = []; const csrBindings: CsrBinding[] = []; - const helpers = ast.functions - .map((body) => body.trim()) - .filter(Boolean) - .join("\n\n"); + const helpers = targetFunctions(ast, "server"); const apiBindings = apiBindingMap(ast, helpers); const typeSource = ast.types @@ -811,7 +870,10 @@ export function generate(ast: PageAst): string { // --- Page metadata / SEO --- out.push(`export const meta = ${JSON.stringify({ title: ast.name, ...ast.seo }, null, 2)};`); - if (ast.layout) out.push(`export const layout = ${JSON.stringify(ast.layout)};`); + if (ast.layout) + out.push( + `export const layout = ${ast.layoutIsSymbol ? ast.layout : JSON.stringify(ast.layout)};`, + ); out.push(`export const __wrnexusRuntime = ${JSON.stringify(ast.runtime ?? "universal")};`); out.push(`export const __wrnexusHydrate = ${JSON.stringify(ast.hydrate ?? "load")};`); out.push(`export const __wrnexusHydrationId = ${JSON.stringify(hydrationId(ast))};`); @@ -820,6 +882,7 @@ export function generate(ast: PageAst): string { } // --- View -> default page component --- + const browserStates = ast.states.filter((state) => state.runtime !== "server"); const seedScope = evalStateSeeds(ast.states); for (const entry of ast.computed) { try { @@ -831,7 +894,7 @@ export function generate(ast: PageAst): string { } } const reactiveNames = [ - ...ast.states.map((entry) => entry.name), + ...browserStates.map((entry) => entry.name), ...ast.computed.map((entry) => entry.name), ]; const runtimeStateNames = new Set( @@ -849,7 +912,7 @@ export function generate(ast: PageAst): string { const pageBehavior = ast.runtime === "server" ? null : componentBehavior(ast); const needsClientRuntime = ast.runtime !== "server" && - (ast.states.length > 0 || + (browserStates.length > 0 || ast.computed.length > 0 || hasClientBehavior(ast.view) || pageBehavior !== null); @@ -887,9 +950,17 @@ export function generate(ast: PageAst): string { .map((state) => `${JSON.stringify(state.name)}: ${state.valueType ?? "unknown"}`) .join("; ")} }` : "Record"; + const hydrationStateNames = JSON.stringify(browserStates.map((state) => state.name)); const ssrStateAliases = generateSsrStateAliases(ast.states.map((state) => state.name)); + const storeBindings = importedStoreBindings(ast); + const storeDeclarations = storeBindings + .map( + (entry) => ` const ${entry.local} = await ctx.__wrnexusUseStore(${entry.internal});`, + ) + .join("\n"); + loops.forEach((code, idx) => { body = body.replace(`\x00WRNEACH${idx}\x00`, () => code); }); @@ -918,10 +989,12 @@ export function generate(ast: PageAst): string { const decls = loopConsts.length > 0 ? loopConsts.join("\n") + "\n" : ""; out.push( `export default async function ${ast.name}(ctx: any) { + ${storeDeclarations} ${decls} const __state: ${stateType} = { ${dynamicStateScope} }; ${ssrStateAliases} - const __scopeValue = Object.entries(__state) + const __hydrationState = Object.fromEntries(${hydrationStateNames}.map((key) => [key, (__state as any)[key]])); + const __scopeValue = Object.entries(__hydrationState) .map(([key, value]) => { const encoded = typeof value === "number" || typeof value === "boolean" @@ -946,10 +1019,12 @@ export function generate(ast: PageAst): string { ); } else { out.push( - `export default function ${ast.name}(ctx: any) { + `export default ${storeBindings.length > 0 ? "async " : ""}function ${ast.name}(ctx: any) { + ${storeDeclarations} const __state: ${stateType} = { ${dynamicStateScope} }; ${ssrStateAliases} - const __scopeValue = Object.entries(__state) + const __hydrationState = Object.fromEntries(${hydrationStateNames}.map((key) => [key, (__state as any)[key]])); + const __scopeValue = Object.entries(__hydrationState) .map(([key, value]) => { const encoded = typeof value === "number" || typeof value === "boolean" @@ -1062,6 +1137,10 @@ interface CompCtx { interface ComponentBehavior { functions: string; + outputs: Array<{ + name: string; + payload?: { name: string; valueType: string; optional: boolean }; + }>; computed: Array<{ name: string; expr: string }>; effects: string[]; lifecycle: { @@ -1150,12 +1229,7 @@ function escLit(s: string): string { } function componentBehavior(ast: PageAst): ComponentBehavior | null { - const functions = eraseFunctionTypes( - ast.functions - .map((body) => body.trim()) - .filter(Boolean) - .join("\n\n"), - ); + const functions = eraseFunctionTypes(targetFunctions(ast, "browser")); const computed = ast.computed.map((entry) => ({ name: entry.name, expr: entry.expr.trim() })); const effects = ast.effects.map((entry) => entry.body.trim()).filter(Boolean); @@ -1175,6 +1249,7 @@ function componentBehavior(ast: PageAst): ComponentBehavior | null { if ( !functions && + ast.outputs.length === 0 && computed.length === 0 && effects.length === 0 && Object.keys(lifecycle).length === 0 && @@ -1185,6 +1260,7 @@ function componentBehavior(ast: PageAst): ComponentBehavior | null { return { functions, + outputs: ast.outputs, computed, effects, lifecycle, @@ -1613,7 +1689,7 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string { function generateComponent(ast: PageAst): string { const out: string[] = []; - if (ast.imports.length > 0) out.push(ast.imports.join("\n")); + if (ast.imports.length > 0) out.push(generatedImports(ast).join("\n")); const hasServerEach = viewHasServerEach(ast.view); const effectiveProps = @@ -1629,8 +1705,9 @@ function generateComponent(ast: PageAst): string { ] : ast.props; + const browserStates = ast.states.filter((state) => state.runtime !== "server"); const stateNames = new Set([ - ...ast.states.map((entry) => entry.name), + ...browserStates.map((entry) => entry.name), ...ast.computed.map((entry) => entry.name), ]); const nameRefs = new Map(); @@ -1652,21 +1729,13 @@ function generateComponent(ast: PageAst): string { const ctx: CompCtx = { stateNames, functionNames: new Set( - ast.functions.flatMap((body) => { - return Array.from( - body.matchAll(/(?:async\s+)?function\s+([A-Za-z_$][\w$]*)\s*\(/g), - (match) => match[1]!, - ); - }), + ast.runtimeFunctions.filter((fn) => fn.runtime !== "server").map((fn) => fn.name), ), resolveExpr, - eventNames: ast.events.map((event) => event.name), + eventNames: publicOutputNames(ast), }; - const serverFunctions = ast.functions - .map((body) => body.trim()) - .filter(Boolean) - .join("\n\n"); + const serverFunctions = targetFunctions(ast, "server"); const hasExplicitRestSpread = viewHasRestAttributeSpread(ast.view); const rootElementIndex = ast.view.findIndex((node) => node.type === "element"); @@ -1694,7 +1763,7 @@ function generateComponent(ast: PageAst): string { const needsScope = ast.runtime !== "server" && - (ast.states.length > 0 || + (browserStates.length > 0 || ast.computed.length > 0 || viewHasEvents(ast.view) || behavior !== null); @@ -1705,7 +1774,7 @@ function generateComponent(ast: PageAst): string { const scopeKeys = [ ...effectiveProps.map((prop) => prop.name), - ...ast.states.map((state) => state.name), + ...browserStates.map((state) => state.name), ]; const behaviorAttr = behaviorAttribute(behavior); @@ -1791,6 +1860,17 @@ function generateComponent(ast: PageAst): string { ); } + if (ast.outputs.length > 0) { + out.push( + `export interface ${ast.name}Outputs {\n${ast.outputs + .map( + (output) => + ` ${JSON.stringify(output.name)}(${output.payload ? `${output.payload.name}${output.payload.optional ? "?" : ""}: ${output.payload.valueType}` : ""}): void;`, + ) + .join("\n")}\n}`, + ); + } + out.push(`function __coerce(v: any, def: any, declared: string = "unknown"): any { if (v === undefined || v === null) { return def; @@ -2023,6 +2103,9 @@ function __wireRaw(v: any): string { `}`, ); + out.push( + `export default { name: ${JSON.stringify(ast.name)}, kind: ${JSON.stringify(ast.kind)}, render };`, + ); return out.join("\n\n") + "\n"; } diff --git a/packages/compiler/src/component-contract.ts b/packages/compiler/src/component-contract.ts new file mode 100644 index 00000000..0269fa83 --- /dev/null +++ b/packages/compiler/src/component-contract.ts @@ -0,0 +1,87 @@ +import type { PageAst } from "@wrnexus/syntax"; + +export interface ComponentContractMetadata { + name: string; + kind: PageAst["kind"]; + props: Array<{ + name: string; + type: string; + required: boolean; + default?: string; + options?: string[]; + }>; + outputs: Array<{ name: string; payloadName?: string; payloadType?: string }>; + functions: Array<{ + name: string; + runtime: string; + async: boolean; + parameters: Array<{ name: string; type: string; optional: boolean }>; + returnType: string; + }>; + states: Array<{ name: string; runtime: string; type: string; initializer: string }>; + computed: Array<{ name: string; type: string; expression: string }>; + imports: Array<{ + source: string; + typeOnly: boolean; + defaultImport?: string; + namedImports: string[]; + }>; +} + +function unionOptions(type: string | undefined): string[] | undefined { + if (!type || !type.includes("|")) return undefined; + const values = type + .split("|") + .map((part) => part.trim()) + .filter((part) => /^(?:"[^"]*"|'[^']*')$/.test(part)) + .map((part) => part.slice(1, -1)); + return values.length ? values : undefined; +} + +export function createComponentContract(ast: PageAst): ComponentContractMetadata { + return { + name: ast.name, + kind: ast.kind, + props: ast.props.map((prop) => ({ + name: prop.name, + type: prop.valueType ?? "unknown", + required: prop.required, + ...(prop.default !== "undefined" ? { default: prop.default } : {}), + ...(unionOptions(prop.valueType) ? { options: unionOptions(prop.valueType) } : {}), + })), + outputs: ast.outputs.map((output) => ({ + name: output.name, + ...(output.payload + ? { payloadName: output.payload.name, payloadType: output.payload.valueType } + : {}), + })), + functions: ast.runtimeFunctions.map((fn) => ({ + name: fn.name, + runtime: fn.runtime, + async: fn.async, + parameters: fn.parameters.map((param) => ({ + name: param.name, + type: param.valueType ?? "unknown", + optional: param.optional, + })), + returnType: fn.returnType ?? (fn.async ? "Promise" : "unknown"), + })), + states: ast.states.map((state) => ({ + name: state.name, + runtime: state.runtime, + type: state.valueType ?? "unknown", + initializer: state.expr, + })), + computed: ast.computed.map((entry) => ({ + name: entry.name, + type: entry.valueType ?? "unknown", + expression: entry.expr, + })), + imports: ast.structuredImports.map((entry) => ({ + source: entry.source, + typeOnly: entry.typeOnly, + ...(entry.defaultImport ? { defaultImport: entry.defaultImport } : {}), + namedImports: entry.namedImports.map((named) => named.local), + })), + }; +} diff --git a/packages/compiler/src/import-resolver.ts b/packages/compiler/src/import-resolver.ts new file mode 100644 index 00000000..310e1674 --- /dev/null +++ b/packages/compiler/src/import-resolver.ts @@ -0,0 +1,60 @@ +import { existsSync, realpathSync } from "node:fs"; +import { dirname, extname, join, resolve } from "node:path"; +import type { StructuredImportDecl } from "@wrnexus/syntax"; + +export type ImportMode = "legacy" | "compatible" | "explicit"; +export interface ImportResolverOptions { + appRoot: string; + mode?: ImportMode; + aliases?: Record; +} +export interface ResolvedImport { + declaration: StructuredImportDecl; + resolved?: string; + diagnostic?: { code: string; message: string; severity: "error" | "warning" }; +} + +function candidates(path: string): string[] { + return extname(path) + ? [path] + : [ + path, + `${path}.wrn`, + `${path}.ts`, + `${path}.d.ts`, + join(path, "index.wrn"), + join(path, "index.ts"), + ]; +} + +export function resolveWrnImport( + declaration: StructuredImportDecl, + importer: string, + options: ImportResolverOptions, +): ResolvedImport { + const source = declaration.source; + if (!source.startsWith(".") && !source.startsWith("@/")) return { declaration, resolved: source }; + const aliasRoot = options.aliases?.["@"] ?? "./app"; + const base = source.startsWith("@/") + ? resolve(options.appRoot, aliasRoot, source.slice(2)) + : resolve(dirname(importer), source); + const found = candidates(base).find(existsSync); + if (found) return { declaration, resolved: realpathSync(found) }; + const severity = (options.mode ?? "compatible") === "explicit" ? "error" : "warning"; + return { + declaration, + diagnostic: { + code: "WRN-IMPORT-NOT-FOUND", + message: `Cannot resolve import '${source}' from ${importer}`, + severity, + }, + }; +} + +export function resolveWrnImports( + declarations: StructuredImportDecl[], + importer: string, + options: ImportResolverOptions, +): ResolvedImport[] { + return declarations.map((declaration) => resolveWrnImport(declaration, importer, options)); +} diff --git a/packages/compiler/src/index.ts b/packages/compiler/src/index.ts index 6bf1800b..5b3bd823 100644 --- a/packages/compiler/src/index.ts +++ b/packages/compiler/src/index.ts @@ -27,6 +27,14 @@ export { ParseError, } from "@wrnexus/syntax"; export { generate } from "./codegen.ts"; +export { generateTargets } from "./targets.ts"; +export { generateBrowserModule } from "./client-codegen.ts"; +export { generateServerFunctionsModule, rpcManifest } from "./server-codegen.ts"; +export { generateDeclarations } from "./type-codegen.ts"; +export { generateStoreBrowserModule, generateStoreModule } from "./store-codegen.ts"; +export { createComponentContract } from "./component-contract.ts"; +export { resolveWrnImport, resolveWrnImports } from "./import-resolver.ts"; +export { createWrnSourceMap } from "./source-map.ts"; export { generateNative, NativeCompileError } from "./native-codegen.ts"; export { Lexer, LexError } from "@wrnexus/syntax"; export { eraseFunctionTypes, inferredRuntimeType, runtimeTypeOf } from "@wrnexus/syntax"; @@ -39,6 +47,11 @@ export type { DataMode, EffectBlock, EventDecl, + OutputDecl, + RuntimeFunctionDecl, + StateRuntime, + StoreKind, + StructuredImportDecl, LoadBlock, ModeFunctionsBlock, PageAst, diff --git a/packages/compiler/src/server-codegen.ts b/packages/compiler/src/server-codegen.ts new file mode 100644 index 00000000..9e94a915 --- /dev/null +++ b/packages/compiler/src/server-codegen.ts @@ -0,0 +1,68 @@ +import { stripRuntimeFunctionModifiers, type PageAst } from "@wrnexus/syntax"; + +export interface RpcManifestEntry { + id: string; + component: string; + function: string; + parameters: Array<{ name: string; type: string; optional: boolean }>; + returnType: string; +} + +function stableId(value: string): string { + let hash = 0x811c9dc5; + for (let index = 0; index < value.length; index++) { + hash ^= value.charCodeAt(index); + hash = Math.imul(hash, 0x01000193); + } + return `wrn_${(hash >>> 0).toString(36)}`; +} + +/** + * Remote exposure is reference based in v0.6. A server function is included in + * the RPC manifest only when browser-capable code calls `server.(...)`. + * Server functions remain available to SSR/server modules without becoming + * remotely callable by default. + */ +export function remotelyReferencedServerFunctions(ast: PageAst): Set { + const browserSources = ast.runtimeFunctions + .filter((fn) => ["legacy", "client", "shared"].includes(fn.runtime)) + .map((fn) => fn.body); + for (const [hook, body] of Object.entries(ast.storeLifecycle)) { + if (hook !== "serverInit" && body) browserSources.push(body); + } + const names = new Set(); + const call = /\bserver\.([A-Za-z_$][\w$]*)\s*\(/g; + for (const source of browserSources) { + for (const match of source.matchAll(call)) names.add(match[1]!); + } + return names; +} + +export function rpcManifest(ast: PageAst): RpcManifestEntry[] { + const exposed = remotelyReferencedServerFunctions(ast); + return ast.runtimeFunctions + .filter((fn) => fn.runtime === "server" && exposed.has(fn.name)) + .map((fn) => ({ + id: stableId(`${ast.name}:${fn.name}`), + component: ast.name, + function: fn.name, + parameters: fn.parameters.map((param) => ({ + name: param.name, + type: param.valueType ?? "unknown", + optional: param.optional, + })), + returnType: fn.returnType ?? (fn.async ? "Promise" : "unknown"), + })); +} + +export function generateServerFunctionsModule(ast: PageAst): string { + const source = ast.functions + .map((body) => stripRuntimeFunctionModifiers(body, ["legacy", "server", "shared"])) + .filter(Boolean) + .join("\n\n"); + const names = ast.runtimeFunctions + .filter((fn) => ["legacy", "server", "shared"].includes(fn.runtime)) + .map((fn) => fn.name); + const manifest = rpcManifest(ast); + return `// generated WRNexusJS server module for ${ast.name}\n${source}\n\nexport const __wrnexusServerFunctions = { ${[...new Set(names)].join(", ")} };\nexport const __wrnexusRpcManifest = ${JSON.stringify(manifest, null, 2)};\n`; +} diff --git a/packages/compiler/src/source-map.ts b/packages/compiler/src/source-map.ts new file mode 100644 index 00000000..7a69cfc3 --- /dev/null +++ b/packages/compiler/src/source-map.ts @@ -0,0 +1,23 @@ +export interface WrnSourceMapEntry { + generatedLine: number; + sourceLine: number; + sourceColumn: number; + kind: string; +} +export interface WrnSourceMap { + version: 1; + source: string; + generated: string; + mappings: WrnSourceMapEntry[]; +} +export function createWrnSourceMap(source: string, generated: string): WrnSourceMap { + const sourceLines = source.split(/\r?\n/).length; + const generatedLines = generated.split(/\r?\n/).length; + const mappings = Array.from({ length: Math.min(sourceLines, generatedLines) }, (_, index) => ({ + generatedLine: index + 1, + sourceLine: index + 1, + sourceColumn: 1, + kind: "line", + })); + return { version: 1, source, generated, mappings }; +} diff --git a/packages/compiler/src/store-codegen.ts b/packages/compiler/src/store-codegen.ts new file mode 100644 index 00000000..dc0eebed --- /dev/null +++ b/packages/compiler/src/store-codegen.ts @@ -0,0 +1,406 @@ +import { eraseFunctionTypes, type PageAst, type RuntimeFunctionDecl } from "@wrnexus/syntax"; +import { generateDeclarations } from "./type-codegen.ts"; +import { rpcManifest } from "./server-codegen.ts"; + +const RESERVED_BINDINGS = new Set([ + "await", + "break", + "case", + "catch", + "class", + "const", + "continue", + "debugger", + "default", + "delete", + "do", + "else", + "enum", + "export", + "extends", + "false", + "finally", + "for", + "function", + "if", + "implements", + "import", + "in", + "instanceof", + "interface", + "let", + "new", + "null", + "package", + "private", + "protected", + "public", + "return", + "static", + "super", + "switch", + "this", + "throw", + "true", + "try", + "typeof", + "var", + "void", + "while", + "with", + "yield", +]); + +function safeBinding(name: string): boolean { + return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name) && !RESERVED_BINDINGS.has(name); +} + +function stateObject(ast: PageAst, runtime: "shared" | "client" | "server"): string { + const entries = ast.states + .filter((state) => state.runtime === runtime) + .map((state) => `${JSON.stringify(state.name)}: (${state.expr})`); + return `{ ${entries.join(", ")} }`; +} + +function actionSource(fn: RuntimeFunctionDecl, stateNames: string[], eraseTypes = false): string { + const parameterNames = new Set(fn.parameters.map((param) => param.name)); + const params = fn.parameters.map((param) => param.name).join(", "); + const aliases = stateNames.filter((name) => safeBinding(name) && !parameterNames.has(name)); + const aliasSource = aliases.length ? `let { ${aliases.join(", ")} } = context.state;` : ""; + const runtimeAliases = ["server"] + .filter((name) => !parameterNames.has(name)) + .map((name) => `const ${name} = context.${name};`) + .join("\n"); + const copyBack = aliases.map((name) => `context.state.${name} = ${name};`).join("\n"); + const body = eraseTypes ? eraseFunctionTypes(fn.body) : fn.body; + return `{ runtime: ${JSON.stringify(fn.runtime)}, handler: ${fn.async ? "async " : ""}function(context${params ? `, ${params}` : ""}) { ${runtimeAliases}\n${aliasSource}\ntry { ${body} } finally { ${copyBack} } } }`; +} + +function persistedCallback( + source: string | undefined, + functionName: "migrate" | "validate", +): string | undefined { + if (!source?.trim()) return undefined; + const body = eraseFunctionTypes(source); + if (functionName === "migrate") { + return `(value, fromVersion, toVersion) => {\n${body}\nif (typeof migrate === "function") return migrate(value, fromVersion, toVersion);\nreturn value;\n}`; + } + return `(value) => {\n${body}\nif (typeof validate === "function") return validate(value);\nreturn value && typeof value === "object" && !Array.isArray(value) ? value : null;\n}`; +} + +function persistenceSource(ast: PageAst): string { + if (!ast.persist) return "undefined"; + const migrate = persistedCallback(ast.persist.migrations, "migrate"); + const validate = persistedCallback(ast.persist.validation, "validate"); + return `{ storage: ${JSON.stringify(ast.persist.storage)}, include: ${JSON.stringify(ast.persist.include)}, version: ${ast.persist.version}${migrate ? `, migrate: ${migrate}` : ""}${validate ? `, validate: ${validate}` : ""} }`; +} + +function lifecycleSource(ast: PageAst, stateNames: string[], browser: boolean): string { + return Object.entries(ast.storeLifecycle) + .filter(([name]) => !browser || name !== "serverInit") + .map(([name, body]) => { + const aliases = stateNames.filter(safeBinding); + const aliasSource = aliases.length ? `let { ${aliases.join(", ")} } = context.state;` : ""; + const runtimeAliases = browser ? "const server = context.server;" : ""; + const copyBack = aliases.map((state) => `context.state.${state} = ${state};`).join("\n"); + const emittedBody = browser ? eraseFunctionTypes(body) : body; + return `${name}: async (context) => { ${runtimeAliases} ${aliasSource} try { ${emittedBody} } finally { ${copyBack} } }`; + }) + .join(",\n"); +} + +export function generateStoreModule(ast: PageAst): string { + if (ast.kind !== "global-store" && ast.kind !== "page-store") { + throw new Error("generateStoreModule requires a store AST"); + } + const stateNames = ast.states.map((state) => state.name); + const safeStateNames = stateNames.filter(safeBinding); + const computed = ast.computed + .map( + (entry) => + `${JSON.stringify(entry.name)}: (state) => { ${safeStateNames.length ? `const { ${safeStateNames.join(", ")} } = state;` : ""} return (${entry.expr}); }`, + ) + .join(",\n"); + const actionGroups = new Map(); + for (const fn of ast.runtimeFunctions) { + const group = actionGroups.get(fn.name) ?? []; + group.push(fn); + actionGroups.set(fn.name, group); + } + const actions = Array.from( + actionGroups, + ([name, functions]) => + `${JSON.stringify(name)}: [${functions.map((fn) => actionSource(fn, stateNames)).join(", ")}]`, + ).join(",\n"); + const persistence = persistenceSource(ast); + const lifecycle = lifecycleSource(ast, stateNames, false); + const manifest = rpcManifest(ast); + const remoteFunctions = manifest.map((entry) => entry.function); + const rpcWrappers = remoteFunctions + .map( + (name) => `${JSON.stringify(name)}: async (...received) => { + const rpcContext = received.pop(); + if (!rpcContext || !rpcContext.request) throw new Error("WRN-RPC-CONTEXT: request context is required"); + let container = __wrnexusRpcContainers.get(rpcContext.request); + if (!container) { + const url = new URL(rpcContext.request.url); + container = createRequestStoreContainer(rpcContext.request, url.pathname + url.search); + __wrnexusRpcContainers.set(rpcContext.request, container); + } + const store = await container.use(${ast.name}); + const action = store.actions[${JSON.stringify(name)}]; + if (typeof action !== "function") throw new Error(${JSON.stringify(`WRN-RPC-FUNCTION: store action '${name}' is unavailable on the server`)}); + return action(...received); + }`, + ) + .join(",\n"); + + return `${ast.imports.join("\n")}\nimport { defineStore } from "@wrnexus/store";\nimport { createRequestStoreContainer } from "@wrnexus/store/server";\n\n${ast.types.join("\n\n")}\n\nexport const ${ast.name} = defineStore({\n name: ${JSON.stringify(ast.name)},\n kind: ${JSON.stringify(ast.storeKind)},\n createSharedState: () => (${stateObject(ast, "shared")}),\n createClientState: () => (${stateObject(ast, "client")}),\n createServerState: () => (${stateObject(ast, "server")}),\n computed: { ${computed} },\n actions: { ${actions} },\n persist: ${persistence},\n lifecycle: { ${lifecycle} },\n});\n\nexport default ${ast.name};\n\nconst __wrnexusRpcContainers = new WeakMap();\nexport const __wrnexusServerFunctions = {\n${rpcWrappers}\n};\nexport const __wrnexusRpcManifest = ${JSON.stringify(manifest, null, 2)};\n\n${generateDeclarations(ast)}\n`; +} + +/** Standalone browser artifact for an imported `.wrn` store. */ +export function generateStoreBrowserModule(ast: PageAst): string { + if (ast.kind !== "global-store" && ast.kind !== "page-store") { + throw new Error("generateStoreBrowserModule requires a store AST"); + } + const browserStates = ast.states.filter((state) => state.runtime !== "server"); + const stateNames = browserStates.map((state) => state.name); + const safeStateNames = stateNames.filter(safeBinding); + const initialState = `{ ${browserStates.map((state) => `${JSON.stringify(state.name)}: (${state.expr})`).join(", ")} }`; + const computed = ast.computed + .map( + (entry) => + `${JSON.stringify(entry.name)}: (state) => { ${safeStateNames.length ? `const { ${safeStateNames.join(", ")} } = state;` : ""} return (${entry.expr}); }`, + ) + .join(",\n"); + const groups = new Map(); + for (const fn of ast.runtimeFunctions.filter((entry) => + ["client", "shared", "legacy"].includes(entry.runtime), + )) { + const group = groups.get(fn.name) ?? []; + group.push(fn); + groups.set(fn.name, group); + } + const actions = Array.from( + groups, + ([name, functions]) => + `${JSON.stringify(name)}: [${functions.map((fn) => actionSource(fn, stateNames, true)).join(", ")}]`, + ).join(",\n"); + const persistence = persistenceSource(ast); + const lifecycleEntries = lifecycleSource(ast, stateNames, true); + + return `// generated WRNexusJS browser store module for ${ast.name} +const __root = globalThis; +const __registry = __root.__wrnexusStoreRegistry || (__root.__wrnexusStoreRegistry = new Map()); +const __hydrationNode = typeof document !== "undefined" ? document.querySelector("script[data-wrnexus-store-hydration]") : null; +let __hydration = {}; +try { __hydration = __hydrationNode ? JSON.parse(__hydrationNode.textContent || "{}") : {}; } catch (_) {} +function __clone(value) { try { return structuredClone(value); } catch (_) { return JSON.parse(JSON.stringify(value)); } } +function __storage(kind) { if (typeof window === "undefined") return null; return kind === "local" ? window.localStorage : kind === "session" ? window.sessionStorage : null; } +function __diagnostic(code, message, details) { + const detail = { code, message, store: ${JSON.stringify(ast.name)}, details }; + try { __root.dispatchEvent && __root.dispatchEvent(new CustomEvent("wrnexus:store-diagnostic", { detail })); } catch (_) {} + if (typeof console !== "undefined" && console.warn) console.warn("[wrnexus:store] " + code + ": " + message, details || ""); +} +function __csrfToken() { + if (typeof document === "undefined") return undefined; + const match = /(?:^|;\\s*)wrnexus_csrf=([^;]+)/.exec(document.cookie || ""); + return match ? decodeURIComponent(match[1]) : undefined; +} +async function __callServerFunction(storeName, functionName, args, options) { + options = options || {}; + const csrf = options.csrfToken || __csrfToken(); + const traceId = options.traceId || (globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : String(Date.now())); + const response = await fetch(options.endpoint || "/__wrnexus/rpc", { + method: "POST", + credentials: "same-origin", + signal: options.signal, + headers: Object.assign({ "content-type": "application/json", "x-request-id": traceId }, csrf ? { "x-wrnexus-csrf": csrf } : {}, options.headers || {}), + body: JSON.stringify({ component: storeName, function: functionName, args: args }), + }); + const payload = await response.json().catch(function () { return null; }); + if (!response.ok || !payload || !payload.ok) { + const error = new Error(payload && payload.error && payload.error.message || "Server call failed (" + response.status + ")"); + error.code = payload && payload.error && payload.error.code || "WRN-RPC-FAILED"; + error.status = response.status; + error.details = payload && payload.error && payload.error.details; + error.traceId = payload && payload.error && payload.error.traceId || traceId; + throw error; + } + return payload.value; +} +function __compatible(expected, value) { + if (expected === null || value === null) return expected === value || expected === null; + if (Array.isArray(expected)) return Array.isArray(value); + return typeof expected === typeof value; +} +function __create(definition) { + const routeId = typeof location !== "undefined" ? location.pathname + location.search : "default"; + const key = definition.kind === "page" ? definition.name + "@" + routeId : definition.name; + if (__registry.has(key)) return __registry.get(key); + let currentDefinition = definition; + const listeners = new Set(); + const initial = currentDefinition.createState(); + let restored = null; + if (currentDefinition.persist) { + try { + const storage = __storage(currentDefinition.persist.storage); + const rawValue = storage && storage.getItem("wrnexus:store:" + currentDefinition.name); + const parsed = rawValue ? JSON.parse(rawValue) : null; + if (parsed) { + let candidate = parsed.state; + const fromVersion = Number(parsed.version || 0); + if (fromVersion !== currentDefinition.persist.version) { + if (typeof currentDefinition.persist.migrate === "function") candidate = currentDefinition.persist.migrate(candidate, fromVersion, currentDefinition.persist.version); + else { __diagnostic("WRN-PERSIST-VERSION", "Persisted state version cannot be restored without a migration.", { fromVersion, toVersion: currentDefinition.persist.version }); candidate = null; } + } + if (candidate && typeof currentDefinition.persist.validate === "function") candidate = currentDefinition.persist.validate(candidate); + if (candidate && typeof candidate === "object" && !Array.isArray(candidate)) { + restored = {}; + currentDefinition.persist.include.forEach(function (name) { if (Object.prototype.hasOwnProperty.call(candidate, name)) restored[name] = candidate[name]; }); + } else if (candidate != null) { + __diagnostic("WRN-PERSIST-INVALID", "Persisted state failed validation and was reset.", candidate); + } + } + } catch (error) { __diagnostic("WRN-PERSIST-RESTORE", "Persisted state could not be restored and was reset.", error); } + } + const raw = Object.assign({}, initial, restored || {}, __hydration[currentDefinition.name] || {}); + let mutable = false; + let actionName = "direct"; + function persistState() { + if (!currentDefinition.persist) return; + try { + const picked = {}; + currentDefinition.persist.include.forEach(function (name) { picked[name] = raw[name]; }); + const storage = __storage(currentDefinition.persist.storage); + if (storage) storage.setItem("wrnexus:store:" + currentDefinition.name, JSON.stringify({ version: currentDefinition.persist.version, state: picked })); + } catch (error) { __diagnostic("WRN-PERSIST-WRITE", "Persisted state could not be written.", error); } + } + const state = new Proxy(raw, { + set(target, property, value) { + if (!mutable) throw new TypeError("WRN-STORE-READONLY: " + currentDefinition.name + "." + String(property) + " must be changed by a store action."); + if (Object.is(target[property], value)) return true; + target[property] = value; + persistState(); + listeners.forEach(function (listener) { listener(instance.snapshot(), { store: currentDefinition.name, action: actionName, changed: [String(property)] }); }); + return true; + }, + deleteProperty(target, property) { + if (!mutable) throw new TypeError("WRN-STORE-READONLY: store state is readonly outside actions"); + return Reflect.deleteProperty(target, property); + }, + }); + const actions = {}; + const server = new Proxy({}, { get: function (_target, property) { return function () { return __callServerFunction(currentDefinition.name, String(property), Array.prototype.slice.call(arguments)); }; } }); + function installActions() { + Object.keys(actions).forEach(function (name) { delete actions[name]; }); + Object.entries(currentDefinition.actions || {}).forEach(function (pair) { + const name = pair[0], candidates = pair[1]; + const selected = candidates.find(function (entry) { return entry.runtime === "client"; }) || candidates.find(function (entry) { return entry.runtime === "shared"; }) || candidates.find(function (entry) { return entry.runtime === "legacy"; }); + if (!selected) return; + actions[name] = async function () { + const args = Array.prototype.slice.call(arguments); + const previousMutable = mutable, previousAction = actionName; + mutable = true; actionName = name; + try { return await selected.handler({ state, snapshot: function () { return __clone(state); }, reset: function () { return instance.reset(); }, runtime: "client", routeId, server }, ...args); } + finally { mutable = previousMutable; actionName = previousAction; } + }; + }); + } + installActions(); + const core = { + name: currentDefinition.name, + kind: currentDefinition.kind, + state, + actions, + whenReady: Promise.resolve(), + reset() { + mutable = true; actionName = "$reset"; + try { + const next = currentDefinition.createState(); + Object.keys(raw).forEach(function (name) { if (!(name in next)) delete raw[name]; }); + Object.assign(raw, next); persistState(); + listeners.forEach(function (listener) { listener(instance.snapshot(), { store: currentDefinition.name, action: "$reset", changed: Object.keys(next) }); }); + } finally { mutable = false; actionName = "direct"; } + }, + snapshot() { return Object.freeze(__clone(raw)); }, + subscribe(listener) { listeners.add(listener); return function () { listeners.delete(listener); }; }, + async dispose() { + mutable = true; actionName = "$dispose"; + try { await currentDefinition.lifecycle && currentDefinition.lifecycle.dispose && currentDefinition.lifecycle.dispose({ state, runtime: "client", routeId, server }); } + finally { mutable = false; actionName = "direct"; listeners.clear(); __registry.delete(key); } + }, + async __hotUpdate(nextDefinition) { + const previous = __clone(raw); + const nextShape = nextDefinition.createState(); + const preserved = [], reset = [], added = [], removed = []; + Object.keys(previous).forEach(function (name) { + if (!(name in nextShape)) { removed.push(name); return; } + if (__compatible(nextShape[name], previous[name])) { nextShape[name] = previous[name]; preserved.push(name); } + else reset.push(name); + }); + Object.keys(nextShape).forEach(function (name) { if (!(name in previous)) added.push(name); }); + currentDefinition = nextDefinition; + mutable = true; actionName = "$hmr"; + try { + Object.keys(raw).forEach(function (name) { delete raw[name]; }); + Object.assign(raw, nextShape); + installActions(); persistState(); + } finally { mutable = false; actionName = "direct"; } + const result = { store: currentDefinition.name, preserved, reset, added, removed }; + listeners.forEach(function (listener) { listener(instance.snapshot(), { store: currentDefinition.name, action: "$hmr", changed: added.concat(reset, removed) }); }); + try { __root.dispatchEvent && __root.dispatchEvent(new CustomEvent("wrnexus:store-hmr", { detail: result })); } catch (_) {} + return result; + }, + }; + const instance = new Proxy(core, { + get(target, property, receiver) { + if (Reflect.has(target, property)) return Reflect.get(target, property, receiver); + if (property in actions) return actions[property]; + if (property in (currentDefinition.computed || {})) return currentDefinition.computed[property](state); + return state[property]; + }, + set() { throw new TypeError("WRN-STORE-READONLY: store state is readonly outside actions"); }, + }); + __registry.set(key, instance); + const hydrationSource = __hydration[currentDefinition.name]; + const init = async function () { + const run = async function (name, hook) { + if (!hook) return; + mutable = true; actionName = name; + try { await hook({ state, runtime: "client", routeId, server }); } + finally { mutable = false; actionName = "direct"; } + }; + await run("$clientInit", currentDefinition.lifecycle && currentDefinition.lifecycle.clientInit); + if (hydrationSource) await run("$hydrate", currentDefinition.lifecycle && currentDefinition.lifecycle.hydrate); + }; + core.whenReady = init(); + return instance; +} +if (!__root.__wrnexusApplyStoreHotUpdate) { + __root.__wrnexusApplyStoreHotUpdate = async function (name, definition) { + const results = []; + for (const item of Array.from(__registry.values())) if (item.name === name && typeof item.__hotUpdate === "function") results.push(await item.__hotUpdate(definition)); + return results; + }; +} +if (!__root.__wrnexusStoreContainer) { + __root.__wrnexusStoreContainer = { + async disposePageStores() { for (const item of Array.from(__registry.values())) if (item.kind === "page") await item.dispose(); }, + async hotUpdate(name, definition) { return __root.__wrnexusApplyStoreHotUpdate(name, definition); }, + inspect() { return Array.from(__registry.values()).map(function (item) { return { name: item.name, kind: item.kind, state: item.snapshot() }; }); }, + }; +} +export const ${ast.name}Definition = { + name: ${JSON.stringify(ast.name)}, + kind: ${JSON.stringify(ast.storeKind)}, + createState: () => (${initialState}), + computed: { ${computed} }, + actions: { ${actions} }, + persist: ${persistence}, + lifecycle: { ${lifecycleEntries} }, +}; +export const ${ast.name} = __create(${ast.name}Definition); +export default ${ast.name}; +`; +} diff --git a/packages/compiler/src/targets.ts b/packages/compiler/src/targets.ts new file mode 100644 index 00000000..f92feeaa --- /dev/null +++ b/packages/compiler/src/targets.ts @@ -0,0 +1,30 @@ +import type { PageAst } from "@wrnexus/syntax"; +import { createComponentContract } from "./component-contract.ts"; +import { generateBrowserModule } from "./client-codegen.ts"; +import { generateServerFunctionsModule, rpcManifest } from "./server-codegen.ts"; +import { generateDeclarations } from "./type-codegen.ts"; +import { generateStoreBrowserModule, generateStoreModule } from "./store-codegen.ts"; + +export interface CompileTargets { + server: string; + browser: string; + declarations: string; + contract: ReturnType; + rpc: ReturnType; +} + +export function generateTargets(ast: PageAst): CompileTargets { + return { + server: + ast.kind === "global-store" || ast.kind === "page-store" + ? generateStoreModule(ast) + : generateServerFunctionsModule(ast), + browser: + ast.kind === "global-store" || ast.kind === "page-store" + ? generateStoreBrowserModule(ast) + : generateBrowserModule(ast), + declarations: generateDeclarations(ast), + contract: createComponentContract(ast), + rpc: rpcManifest(ast), + }; +} diff --git a/packages/compiler/src/type-codegen.ts b/packages/compiler/src/type-codegen.ts new file mode 100644 index 00000000..c49d5d0f --- /dev/null +++ b/packages/compiler/src/type-codegen.ts @@ -0,0 +1,64 @@ +import type { PageAst } from "@wrnexus/syntax"; + +function member(name: string): string { + return /^[A-Za-z_$][\w$]*$/.test(name) ? name : JSON.stringify(name); +} +function params(astParams: PageAst["runtimeFunctions"][number]["parameters"]): string { + return astParams + .map( + (param) => + `${member(param.name)}${param.optional ? "?" : ""}: ${param.valueType ?? "unknown"}`, + ) + .join(", "); +} + +export function generateDeclarations(ast: PageAst): string { + const inline = ast.types + .map((body) => body.trim()) + .filter(Boolean) + .join("\n\n"); + if (ast.kind === "global-store" || ast.kind === "page-store") { + const state = ast.states + .filter((entry) => entry.runtime !== "server") + .map((entry) => ` readonly ${member(entry.name)}: ${entry.valueType ?? "unknown"};`) + .join("\n"); + const computed = ast.computed + .map((entry) => ` readonly ${member(entry.name)}: ${entry.valueType ?? "unknown"};`) + .join("\n"); + const actions = ast.runtimeFunctions + .filter((fn) => fn.runtime !== "server") + .map( + (fn) => + ` ${member(fn.name)}(${params(fn.parameters)}): ${fn.returnType ?? (fn.async ? "Promise" : "unknown")};`, + ) + .join("\n"); + return `${inline ? `${inline}\n\n` : ""}export interface ${ast.name}State {\n${state}\n}\n\nexport interface ${ast.name}Computed {\n${computed}\n}\n\nexport interface ${ast.name}Actions {\n${actions}\n}\n\nexport interface ${ast.name}Instance extends ${ast.name}State, ${ast.name}Computed, ${ast.name}Actions {\n reset(): void;\n snapshot(): Readonly<${ast.name}State>;\n}\n\ndeclare const store: ${ast.name}Instance;\nexport default store;\n`; + } + const props = ast.props + .map( + (prop) => + ` readonly ${member(prop.name)}${prop.required ? "" : "?"}: ${prop.valueType ?? "unknown"};`, + ) + .join("\n"); + const outputs = ast.outputs + .map( + (output) => + ` ${member(output.name)}(${output.payload ? `${member(output.payload.name)}${output.payload.optional ? "?" : ""}: ${output.payload.valueType}` : ""}): void;`, + ) + .join("\n"); + const clientFunctions = ast.runtimeFunctions + .filter((fn) => fn.runtime === "client" || fn.runtime === "shared" || fn.runtime === "legacy") + .map( + (fn) => + ` ${member(fn.name)}(${params(fn.parameters)}): ${fn.returnType ?? (fn.async ? "Promise" : "unknown")};`, + ) + .join("\n"); + const serverFunctions = ast.runtimeFunctions + .filter((fn) => fn.runtime === "server") + .map( + (fn) => + ` ${member(fn.name)}(${params(fn.parameters)}): Promise>;`, + ) + .join("\n"); + return `${inline ? `${inline}\n\n` : ""}export interface ${ast.name}Props {\n${props}\n}\n\nexport interface ${ast.name}Outputs {\n${outputs}\n}\n\nexport interface ${ast.name}ClientFunctions {\n${clientFunctions}\n}\n\nexport interface ${ast.name}ServerCalls {\n${serverFunctions}\n}\n`; +} diff --git a/packages/compiler/test/v060-targets.test.ts b/packages/compiler/test/v060-targets.test.ts new file mode 100644 index 00000000..7dc32b27 --- /dev/null +++ b/packages/compiler/test/v060-targets.test.ts @@ -0,0 +1,147 @@ +import { expect, test } from "bun:test"; +import { generateTargets, parse } from "../src/index.ts"; + +const ast = parse(`component ConfirmDialog { + props { title: string open: boolean = false } + state { loading: boolean = false } + server state { internalId: string = "secret" } + outputs { confirm(payload: string) close() } + functions { + client async function confirm(value: string): Promise { + const saved = await server.confirm(value) + output.confirm(saved) + } + server async function confirm(value: string): Promise { return value } + shared function normalize(value: string): string { return value.trim() } + } + view { } +}`); + +test("emits separate browser and server function targets", () => { + const targets = generateTargets(ast); + expect(targets.browser).toContain('"confirm": async function'); + expect(targets.browser).toContain('"normalize": function'); + expect(targets.server).toContain("async function confirm"); + expect(targets.rpc).toEqual([ + expect.objectContaining({ component: "ConfirmDialog", function: "confirm" }), + ]); + expect(targets.declarations).toContain("interface ConfirmDialogOutputs"); + expect(targets.declarations).toContain("interface ConfirmDialogServerCalls"); +}); + +test("component contracts retain declared union options", () => { + const targets = generateTargets( + parse(`component SizeBox { + props { size: "small" | "medium" | "large" = "medium" } + view {
} + }`), + ); + expect(targets.contract.props[0]?.options).toEqual(["small", "medium", "large"]); +}); + +test("generates a standalone browser module for imported stores", () => { + const targets = generateTargets( + parse(`page store SearchStore { + state { query: string = "" } + client state { focused: boolean = false } + server state { secret: string = "hidden" } + computed { empty: boolean = query.length === 0 } + functions { client function setQuery(value: string): void { query = value } } + persist { storage = "session" include = ["query"] version = 1 } + }`), + ); + expect(targets.browser).toContain("__wrnexusStoreRegistry"); + expect(targets.browser).toContain('name: "SearchStore"'); + expect(targets.browser).toContain('"query"'); + expect(targets.browser).not.toContain('"secret": ("hidden")'); + expect(targets.declarations).toContain("interface SearchStoreInstance"); +}); + +test("browser codegen avoids reserved prop bindings and parameter collisions", () => { + const targets = generateTargets( + parse(`component ReservedBindings { + props { class: string = "" output: string = "" } + state { value: string = "" } + outputs { change(payload: { value: string }) } + functions { + client function update(output: string): void { + value = output + } + client function notify(): void { + output.change({ value: value }) + } + } + view { } + }`), + ); + expect(targets.browser).not.toContain("const { class }"); + expect(targets.browser).not.toContain("const output = context.output;\n const output"); + expect(() => new Function(targets.browser.replace(/^export\s+/gm, ""))).not.toThrow(); +}); + +test("RPC manifests expose only server functions referenced through server.name", () => { + const targets = generateTargets( + parse(`component SecureActions { + functions { + client async function saveClient(): Promise { await server.save("ok") } + server async function save(value: string): Promise { return value } + server function internalSecret(): string { return "secret" } + } + view { } + }`), + ); + expect(targets.rpc.map((entry) => entry.function)).toEqual(["save"]); + expect(targets.server).toContain("internalSecret"); +}); + +test("generated browser stores bind typed RPC, persistence validation, and HMR", () => { + const targets = generateTargets( + parse(`global store UserStore { + state { user: string | null = null count: number = 0 } + functions { + client async function refresh(): Promise { user = await server.loadCurrentUser() } + server async function loadCurrentUser(): Promise { return "Ajay" } + server function internalOnly(): string { return "secret" } + } + persist { + storage = "local" + include = ["count"] + version = 2 + migrations { function migrate(value, fromVersion, toVersion) { return value } } + validate { function validate(value) { return value && typeof value === "object" ? value : null } } + } + }`), + ); + expect(targets.browser).toContain("const server = context.server"); + expect(targets.browser).toContain("currentDefinition.persist.migrate"); + expect(targets.browser).toContain("currentDefinition.persist.validate"); + expect(targets.browser).toContain("__wrnexusApplyStoreHotUpdate"); + expect(targets.rpc.map((entry) => entry.function)).toEqual(["loadCurrentUser"]); +}); + +test("browser codegen binds peer client functions through the scoped function table", () => { + const targets = generateTargets( + parse(`component PeerCalls { + state { value: number = 0 } + functions { + client function increment(): void { value += 1 } + client function run(): void { increment() } + } + view { } + }`), + ); + expect(targets.browser).toContain("context.functions"); + const executable = new Function( + `${targets.browser.replace(/^export\s+/gm, "")}\nreturn { bindClientScope };`, + )() as { bindClientScope: (context: Record) => Record void> }; + const state = { value: 0 }; + const functions = executable.bindClientScope({ + state, + props: {}, + output: {}, + server: {}, + refs: {}, + }); + functions.run?.(); + expect(state.value).toBe(1); +}); diff --git a/packages/core/package.json b/packages/core/package.json index a45ec7fe..c954d0d0 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/core", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/csr/package.json b/packages/csr/package.json index 423b777c..53c1901b 100644 --- a/packages/csr/package.json +++ b/packages/csr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/csr", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/csr/src/client-functions.ts b/packages/csr/src/client-functions.ts new file mode 100644 index 00000000..4cefc931 --- /dev/null +++ b/packages/csr/src/client-functions.ts @@ -0,0 +1,23 @@ +export interface ClientModuleScope { + output: Record void>; + server: Record Promise>; + props: Readonly>; + refs: Record; +} +const moduleCache = new Map>(); +export async function loadClientFunctions( + url: string, + scope: ClientModuleScope, +): Promise unknown>> { + const module = await (moduleCache.get(url) ?? + (() => { + const promise = import(/* @vite-ignore */ url); + moduleCache.set(url, promise); + return promise; + })()); + if (typeof module.bindClientScope === "function") return module.bindClientScope(scope); + return module.__wrnexusClientFunctions ?? {}; +} +export function invalidateClientModule(url: string): void { + moduleCache.delete(url); +} diff --git a/packages/csr/src/index.ts b/packages/csr/src/index.ts index 988dcafb..a9e76a65 100644 --- a/packages/csr/src/index.ts +++ b/packages/csr/src/index.ts @@ -29,3 +29,9 @@ export function getNavRuntime(): string { export function getRealtimeRuntime(): string { return REALTIME_RUNTIME; } + +export * from "./outputs.ts"; +export * from "./server-client.ts"; +export * from "./refs.ts"; +export * from "./client-functions.ts"; +export type * from "./types.ts"; diff --git a/packages/csr/src/nav-runtime.ts b/packages/csr/src/nav-runtime.ts index 32cced5a..a7c6bf49 100644 --- a/packages/csr/src/nav-runtime.ts +++ b/packages/csr/src/nav-runtime.ts @@ -243,6 +243,16 @@ export const NAV_RUNTIME = String.raw` */ function dispose(root) { unmountPackageRuntimes(root); + try { + var stores = window.__wrnexusStoreContainer; + if (stores && typeof stores.disposePageStores === "function") { + Promise.resolve(stores.disposePageStores()).catch(function (error) { + console.error("[wrnexus] failed to dispose page stores", error); + }); + } + } catch (error) { + console.error("[wrnexus] failed to access page stores", error); + } try { if ( typeof window.__wrnexusDisposeBehaviors === diff --git a/packages/csr/src/outputs.ts b/packages/csr/src/outputs.ts new file mode 100644 index 00000000..aec6cc3d --- /dev/null +++ b/packages/csr/src/outputs.ts @@ -0,0 +1,39 @@ +export type OutputHandler = (payload: T) => void | Promise; +export interface OutputHost extends HTMLElement { + __wrnexusOutputHandlers?: Map>; +} + +export function registerOutputHandler( + host: OutputHost, + name: string, + handler: OutputHandler, +): () => void { + const registry = (host.__wrnexusOutputHandlers ??= new Map()); + const handlers = registry.get(name) ?? new Set(); + handlers.add(handler as OutputHandler); + registry.set(name, handlers); + return () => { + handlers.delete(handler as OutputHandler); + if (!handlers.size) registry.delete(name); + }; +} + +export async function invokeOutput(host: OutputHost, name: string, payload?: T): Promise { + const handlers = host.__wrnexusOutputHandlers?.get(name); + if (handlers?.size) { + for (const handler of handlers) await handler(payload); + return; + } + // Compatibility path for legacy listeners outside a hydrated WRN parent. + host.dispatchEvent(new CustomEvent(name, { detail: payload })); + host.dispatchEvent(new CustomEvent(`wrnexus:${name}`, { detail: payload })); +} + +export function createOutputProxy void>>( + host: OutputHost, +): T { + return new Proxy({} as T, { + get: (_target, property) => (payload?: unknown) => + invokeOutput(host, String(property), payload), + }); +} diff --git a/packages/csr/src/reactive-runtime.ts b/packages/csr/src/reactive-runtime.ts index 3a98eb9a..d46ad61d 100644 --- a/packages/csr/src/reactive-runtime.ts +++ b/packages/csr/src/reactive-runtime.ts @@ -24,6 +24,7 @@ export const REACTIVE_RUNTIME = String.raw` var pendingUpdateHooks = new Map(); var updateHooksScheduled = false; var behaviorObserver; + var clientModuleCache = new Map(); function reportDiagnostic(code, message, element, detail) { var payload = { @@ -478,6 +479,21 @@ export const REACTIVE_RUNTIME = String.raw` } } + function loadClientModule(element) { + var url = element.getAttribute("data-wrn-client-module"); + if (!url) return Promise.resolve(null); + var promise = clientModuleCache.get(url); + if (!promise) { + promise = import(url).catch(function (error) { + clientModuleCache.delete(url); + reportDiagnostic("WRN-CLIENT-MODULE", "Failed to load browser function module '" + url + "'.", element, error); + return null; + }); + clientModuleCache.set(url, promise); + } + return promise; + } + function setupScope(el) { if (el.__wrnexusScope) return; @@ -677,13 +693,39 @@ export const REACTIVE_RUNTIME = String.raw` } var behaviorFunctions = {}; - var componentEventTarget = el.querySelector("[data-wrn-events]") || el; + var moduleBindings = {}; + var componentEventTarget = el.hasAttribute("data-wrn-events") + ? el + : el.querySelector("[data-wrn-events]") || el; var declaredEvents = new Set( String(componentEventTarget.getAttribute("data-wrn-events") || "") .split(",") .map(function (name) { return name.trim(); }) .filter(Boolean), ); + var outputHandlers = componentEventTarget.__wrnexusOutputHandlers || (componentEventTarget.__wrnexusOutputHandlers = {}); + var outputProxy = new Proxy({}, { + get: function (_target, property) { + return function (payload) { + return invokeComponentOutput(componentEventTarget, String(property), payload); + }; + }, + }); + var componentRpcName = componentEventTarget.getAttribute("data-wrn-component") || componentEventTarget.getAttribute("data-wrn-hydration") || "component"; + var serverProxy = new Proxy({}, { + get: function (_target, property) { + return function () { + return callServerFunction(componentRpcName, String(property), Array.prototype.slice.call(arguments)); + }; + }, + }); + var propsProxy = new Proxy({}, { + get: function (_target, property) { return peekScope(String(property)); }, + set: function () { throw new TypeError("WRN-PROP-READONLY: props are readonly"); }, + }); + var refsProxy = new Proxy({}, { + get: function (_target, property) { return el.querySelector('[data-ref="' + String(property).replace(/"/g, '\"') + '"]'); }, + }); var stateWatchers = {}; var anyStateListeners = new Set(); var cleanupCallbacks = []; @@ -695,6 +737,11 @@ export const REACTIVE_RUNTIME = String.raw` return dispatchComponentEvent(componentEventTarget, name, detail); }; } + if (name === "output") return outputProxy; + if (name === "server") return serverProxy; + if (name === "props") return propsProxy; + if (name === "refs") return refsProxy; + if (Object.prototype.hasOwnProperty.call(moduleBindings, name)) return moduleBindings[name]; if (name === "$emit") { return function (eventName, detail) { return dispatchComponentEvent(componentEventTarget, eventName, detail); @@ -919,6 +966,42 @@ export const REACTIVE_RUNTIME = String.raw` }); } + function installClientModule(module) { + if (!module) return; + var stateProxy = new Proxy({}, { + get: function (_target, property) { return readScope(String(property)); }, + set: function (_target, property, value) { writeScope(String(property), value); return true; }, + ownKeys: function () { return Object.keys(signals); }, + getOwnPropertyDescriptor: function () { return { enumerable: true, configurable: true }; }, + }); + var context = { + state: stateProxy, + output: outputProxy, + server: serverProxy, + props: propsProxy, + refs: refsProxy, + }; + var importedBindings = module.__wrnexusImportedBindings; + if (importedBindings && typeof importedBindings === "object") { + Object.keys(importedBindings).forEach(function (name) { + var binding = importedBindings[name]; + moduleBindings[name] = binding; + if (binding && typeof binding.subscribe === "function") { + cleanupCallbacks.push(binding.subscribe(function () { renderAll(); })); + } + }); + } + var functions = typeof module.bindClientScope === "function" + ? module.bindClientScope(context) + : module.__wrnexusClientFunctions; + if (!functions || typeof functions !== "object") return; + Object.keys(functions).forEach(function (name) { + if (typeof functions[name] === "function") behaviorFunctions[name] = functions[name]; + }); + } + + installClientModule(el.__wrnexusClientModule); + // A binding belongs to THIS scope only when el is the node's nearest // [data-scope] ancestor. Otherwise a nested scope owns it and we skip it, // so an outer scope never clobbers an inner one's values. @@ -1233,6 +1316,7 @@ export const REACTIVE_RUNTIME = String.raw` eventLocals.event = event; eventLocals.$event = event; + eventLocals.payload = event && Object.prototype.hasOwnProperty.call(event, "detail") ? event.detail : undefined; try { runStmt( @@ -1773,6 +1857,7 @@ export const REACTIVE_RUNTIME = String.raw` locals.event = event; locals.$event = event; + locals.payload = event && Object.prototype.hasOwnProperty.call(event, "detail") ? event.detail : undefined; try { runStmt( @@ -1794,6 +1879,19 @@ export const REACTIVE_RUNTIME = String.raw` ? { passive: true } : undefined; + if (target === componentEventTarget && declaredEvents.has(evt)) { + var directHandler = function (payload) { + var locals = decodeLoopLocals(node); + locals.payload = payload; + locals.event = undefined; + locals.$event = undefined; + return runStmt(stmt, locals); + }; + (outputHandlers[evt] || (outputHandlers[evt] = new Set())).add(directHandler); + cleanupCallbacks.push(function () { + if (outputHandlers[evt]) outputHandlers[evt].delete(directHandler); + }); + } target.addEventListener(evt, listener, options); cleanupCallbacks.push(function () { target.removeEventListener(evt, listener, options); @@ -1932,7 +2030,16 @@ export const REACTIVE_RUNTIME = String.raw` function hydrate() { if (element.__wrnexusScope || !element.isConnected) return; - setupScope(element); + var moduleUrl = element.getAttribute("data-wrn-client-module"); + if (!moduleUrl || moduleUrl === "__WRNEXUS_CLIENT_MODULE__") { + setupScope(element); + return; + } + loadClientModule(element).then(function (module) { + if (element.__wrnexusScope || !element.isConnected) return; + element.__wrnexusClientModule = module; + setupScope(element); + }); } if (strategy === "load") { @@ -2616,6 +2723,43 @@ export const REACTIVE_RUNTIME = String.raw` } } + function invokeComponentOutput(root, name, payload) { + if (!root || !name) return undefined; + var registry = root.__wrnexusOutputHandlers; + var handlers = registry && registry[name]; + if (handlers && handlers.size) { + var values = []; + handlers.forEach(function (handler) { values.push(handler(payload)); }); + return values.some(function (value) { return value && typeof value.then === "function"; }) + ? Promise.all(values) + : values[values.length - 1]; + } + return dispatchComponentEvent(root, name, payload); + } + + function callServerFunction(component, functionName, args) { + var csrf = document.querySelector('meta[name="wrnexus-csrf"]'); + return fetch("/__wrnexus/rpc", { + method: "POST", + credentials: "same-origin", + headers: { + "content-type": "application/json", + "x-wrnexus-csrf": csrf ? csrf.getAttribute("content") || "" : "", + }, + body: JSON.stringify({ component: component, function: functionName, args: args || [] }), + }).then(function (response) { + return response.json().catch(function () { return null; }).then(function (payload) { + if (!response.ok || !payload || !payload.ok) { + var error = new Error(payload && payload.error && payload.error.message || "Server function call failed"); + error.code = payload && payload.error && payload.error.code || "WRN-RPC-FAILED"; + error.status = response.status; + throw error; + } + return payload.value; + }); + }); + } + function dispatchComponentEvent(root, name, detail) { if (!root || !name) return null; var EventConstructor = @@ -3789,6 +3933,7 @@ export const REACTIVE_RUNTIME = String.raw` } window.__wrnexusHydrateScopes = hydrateScopes; + window.__wrnexusInvalidateClientModule = function (url) { clientModuleCache.delete(url); }; window.__wrnexusHydrateCsrFetches = hydrateCsrFetches; window.__wrnexusDisposeBehaviors = disposeBehaviors; if (document.readyState === "loading") { diff --git a/packages/csr/src/refs.ts b/packages/csr/src/refs.ts new file mode 100644 index 00000000..b9b7d6f8 --- /dev/null +++ b/packages/csr/src/refs.ts @@ -0,0 +1,10 @@ +export function collectRefs(root: ParentNode): Record { + const refs: Record = {}; + if (root instanceof Element && root.hasAttribute("data-ref")) + refs[root.getAttribute("data-ref")!] = root; + root.querySelectorAll("[data-ref]").forEach((element) => { + const name = element.getAttribute("data-ref"); + if (name) refs[name] = element; + }); + return refs; +} diff --git a/packages/csr/src/server-client.ts b/packages/csr/src/server-client.ts new file mode 100644 index 00000000..62d33c8f --- /dev/null +++ b/packages/csr/src/server-client.ts @@ -0,0 +1,63 @@ +export interface ServerCallOptions { + endpoint?: string; + signal?: AbortSignal; + headers?: HeadersInit; + csrfToken?: string; +} +export class WrnServerCallError extends Error { + constructor( + message: string, + readonly code: string, + readonly status: number, + readonly details?: unknown, + ) { + super(message); + } +} + +function csrfFromCookie(): string | undefined { + if (typeof document === "undefined") return undefined; + const raw = /(?:^|;\s*)wrnexus_csrf=([^;]+)/.exec(document.cookie)?.[1]; + return raw ? decodeURIComponent(raw) : undefined; +} + +export async function callServerFunction( + component: string, + functionName: string, + args: TInput, + options: ServerCallOptions = {}, +): Promise { + const csrfToken = options.csrfToken ?? csrfFromCookie(); + const response = await fetch(options.endpoint ?? "/__wrnexus/rpc", { + method: "POST", + credentials: "same-origin", + signal: options.signal, + headers: { + "content-type": "application/json", + ...(csrfToken ? { "x-wrnexus-csrf": csrfToken } : {}), + ...options.headers, + }, + body: JSON.stringify({ component, function: functionName, args }), + }); + const payload = (await response.json().catch(() => null)) as any; + if (!response.ok || !payload?.ok) + throw new WrnServerCallError( + payload?.error?.message ?? `Server call failed (${response.status})`, + payload?.error?.code ?? "WRN-RPC-FAILED", + response.status, + payload?.error?.details, + ); + return payload.value as TOutput; +} + +export function createServerProxy Promise>>( + component: string, + options: ServerCallOptions = {}, +): T { + return new Proxy({} as T, { + get: + (_target, property) => + (...args: unknown[]) => + callServerFunction(component, String(property), args, options), + }); +} diff --git a/packages/csr/src/types.ts b/packages/csr/src/types.ts new file mode 100644 index 00000000..082ee835 --- /dev/null +++ b/packages/csr/src/types.ts @@ -0,0 +1,11 @@ +export interface HydrationScopeApi { + get(name: string): unknown; + set(name: string, value: unknown): void; + call(name: string, ...args: unknown[]): unknown; + snapshot(): Readonly>; + dispose(): void; +} +export interface WrnexusBrowserGlobals { + __wrnexusHydrateScopes?(root?: ParentNode): void; + __wrnexusDisposeBehaviors?(root?: ParentNode): void; +} diff --git a/packages/csr/test/reactive.test.ts b/packages/csr/test/reactive.test.ts index df3ffa34..256a858f 100644 --- a/packages/csr/test/reactive.test.ts +++ b/packages/csr/test/reactive.test.ts @@ -334,7 +334,6 @@ test("data-for preserves arrays of objects from encoded component scope", () => ]); }); - test("$emit inside component functions does not depend on a global browser event", () => { const behavior = Buffer.from( JSON.stringify({ diff --git a/packages/db/package.json b/packages/db/package.json index 9ede928a..27a0f717 100644 --- a/packages/db/package.json +++ b/packages/db/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/db", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json index 26d475ec..358c4e43 100644 --- a/packages/dev-server/package.json +++ b/packages/dev-server/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-server", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { @@ -21,6 +21,7 @@ "@wrnexus/db": "workspace:*", "@wrnexus/pubsub": "workspace:*", "@wrnexus/uploader": "workspace:*", - "@wrnexus/plugin": "workspace:*" + "@wrnexus/plugin": "workspace:*", + "@wrnexus/store": "workspace:*" } } diff --git a/packages/dev-server/src/assets.ts b/packages/dev-server/src/assets.ts index c5bc9821..e3501eea 100644 --- a/packages/dev-server/src/assets.ts +++ b/packages/dev-server/src/assets.ts @@ -25,6 +25,7 @@ import type { Mode } from "@wrnexus/core"; import type { AssetServer } from "./runtime.ts"; import { servePublicAsset } from "./public.ts"; import { servePluginAsset, type ServedPluginAsset } from "./plugin-assets.ts"; +import { serveWrnBrowserArtifact } from "./pipeline.ts"; /** Style inputs the dev asset server needs to build `/__wrnexus/styles.css`. */ export interface DevStyles { @@ -84,6 +85,9 @@ export function createDevAssetServer( }, async serve(pathname: string): Promise { + if (pathname.startsWith("/__wrnexus/client/")) { + return serveWrnBrowserArtifact(pathname) ?? new Response("Not Found", { status: 404 }); + } if (pathname === "/__wrnexus/reactive.js") return jsResponse(getReactiveRuntime()); if (pathname === "/__wrnexus/nav.js") return jsResponse(getNavRuntime()); if (pathname === "/__wrnexus/realtime.js") return jsResponse(getRealtimeRuntime()); diff --git a/packages/dev-server/src/index.ts b/packages/dev-server/src/index.ts index 2c75aed8..cf043d87 100644 --- a/packages/dev-server/src/index.ts +++ b/packages/dev-server/src/index.ts @@ -32,7 +32,15 @@ import { import { connectFromConfig } from "@wrnexus/db/connect"; import { configureStorage, type StorageConfig } from "@wrnexus/uploader"; import { realtimeBusFromConfig } from "./realtime-bus.ts"; -import { invalidateModule, loadModule, setCompileCacheDir } from "./pipeline.ts"; +import { + invalidateModule, + loadModule, + loadWrnServerModule, + setCompileCacheDir, + setCompileImportOptions, + wrnBrowserArtifactUrl, +} from "./pipeline.ts"; +import { createRpcHandler } from "@wrnexus/ssr/rpc"; import { createHandlers, type WsData } from "./runtime.ts"; import { createDevAssetServer } from "./assets.ts"; import { pluginAssetsFromContributions } from "./plugin-assets.ts"; @@ -173,6 +181,12 @@ export async function startServer(opts: ServeOptions): Promise { const appDir = resolve(opts.appDir); const appRoot = dirname(appDir); const mode: Mode = opts.mode ?? "development"; + const importConfig = (opts.appConfig?.imports ?? {}) as { + mode?: "legacy" | "compatible" | "explicit"; + autoImport?: boolean; + aliases?: Record; + }; + setCompileImportOptions(appRoot, importConfig); const configuredPlugins = opts.plugins ?? (opts.appConfig?.plugins as PluginInput | undefined); const discoveredPlugins = await discoverPlugins(appRoot, configuredPlugins, { @@ -384,8 +398,33 @@ export async function startServer(opts: ServeOptions): Promise { config: devToolbarConfig, collector: devToolbarCollector, root: appRoot, - panels: pluginToolbarPanels, + panels: [ + { + id: "runtime", + title: "Runtime", + icon: "cpu", + description: + "Client, server, and shared functions, hydration modules, and runtime-boundary diagnostics.", + order: 10, + }, + { + id: "stores", + title: "Stores", + icon: "database", + description: + "Global/page stores, safe client state, computed values, actions, persistence, and hydration.", + order: 20, + }, + ...pluginToolbarPanels, + ], platform: { + wrnexus060: { + clientFunctions: true, + serverFunctions: true, + sharedFunctions: true, + typedOutputs: true, + requestScopedStores: true, + }, plugins: pluginRunner.plugins.map((plugin) => ({ name: plugin.name, version: plugin.version, @@ -413,13 +452,59 @@ export async function startServer(opts: ServeOptions): Promise { : undefined, }; const handlers = createHandlers(runtimeDeps); + const rpcHandler = createRpcHandler({ + async resolve(rawComponent) { + const componentName = rawComponent.split(":", 1)[0] ?? rawComponent; + const preferred = router.components.find( + (entry) => entry.name.toLowerCase() === componentName.toLowerCase(), + ); + const candidates = [ + ...(preferred ? [preferred.file] : []), + ...router.pages.filter((route) => route.file.endsWith(".wrn")).map((route) => route.file), + ...router.layouts.map((entry) => entry.file), + ...router.stores.map((entry) => entry.file), + ...router.components.filter((entry) => entry !== preferred).map((entry) => entry.file), + ]; + for (const file of new Set(candidates)) { + const module = await loadWrnServerModule(file); + const functions = module.__wrnexusServerFunctions; + const manifest = module.__wrnexusRpcManifest; + if (!functions || typeof functions !== "object" || !Array.isArray(manifest)) continue; + const ownsComponent = manifest.some( + (entry: any) => + String(entry?.component ?? "").toLowerCase() === componentName.toLowerCase(), + ); + if (!ownsComponent) continue; + return { + functions: functions as Record any>, + manifest: manifest as any, + }; + } + return null; + }, + validateCsrf(request) { + const url = new URL(request.url); + const origin = request.headers.get("origin"); + if (origin && origin !== url.origin) return false; + const cookieToken = /(?:^|;\s*)wrnexus_csrf=([^;]+)/.exec( + request.headers.get("cookie") ?? "", + )?.[1]; + return ( + !cookieToken || + decodeURIComponent(cookieToken) === (request.headers.get("x-wrnexus-csrf") ?? "") + ); + }, + }); const server = Bun.serve({ port, hostname, development: mode === "development", maxRequestBodySize: 10 * 1024 * 1024, - fetch: handlers.fetch, + fetch(request, server) { + if (new URL(request.url).pathname === "/__wrnexus/rpc") return rpcHandler(request); + return handlers.fetch(request, server); + }, websocket: handlers.websocket, }); @@ -473,7 +558,40 @@ export async function startServer(opts: ServeOptions): Promise { } console.log(`[wrnexus] hot update — ${files.join(", ")}`); - hub.reload(); + const storeUpdates: Array<{ name: string; url: string; kind: string }> = []; + for (const changed of files) { + const absolute = isAbsolute(changed) ? changed : resolve(appDir, changed); + if (!absolute.endsWith(".wrn")) continue; + try { + const source = readFileSync(absolute, "utf8"); + const declaration = /\b(global|page)\s+store\s+([A-Za-z_$][\w$]*)\s*\{/.exec(source); + if (!declaration) continue; + storeUpdates.push({ + name: declaration[2]!, + kind: declaration[1]!, + url: wrnBrowserArtifactUrl(absolute), + }); + } catch (error) { + console.warn(`[wrnexus] failed to prepare store HMR for ${absolute}`, error); + } + } + if (storeUpdates.length) { + hub.broadcastJson({ type: "store-update", version: Date.now(), stores: storeUpdates }); + } + const onlyStores = + storeUpdates.length > 0 && + files.every((changed) => { + const absolute = isAbsolute(changed) ? changed : resolve(appDir, changed); + if (!absolute.endsWith(".wrn")) return false; + try { + return /\b(?:global|page)\s+store\s+[A-Za-z_$][\w$]*\s*\{/.test( + readFileSync(absolute, "utf8"), + ); + } catch { + return false; + } + }); + if (!onlyStores) hub.reload(); hub.broadcastJson({ channel: "toolbar", type: "toolbar:scan", diff --git a/packages/dev-server/src/pipeline.ts b/packages/dev-server/src/pipeline.ts index 14c96a5b..b7c2af30 100644 --- a/packages/dev-server/src/pipeline.ts +++ b/packages/dev-server/src/pipeline.ts @@ -12,9 +12,10 @@ import { mkdirSync, statSync, unlinkSync, + existsSync, } from "node:fs"; -import { dirname, join, basename, extname } from "node:path"; -import { compileWireFile } from "@wrnexus/compiler"; +import { dirname, join, basename, extname, resolve } from "node:path"; +import { compile, generateTargets, resolveWrnImports, type PageAst } from "@wrnexus/compiler"; import type { Context, Middleware } from "@wrnexus/core"; /** @@ -48,13 +49,105 @@ export function runMiddleware( */ const moduleCache = new Map>>(); const moduleVersions = new Map(); +const browserArtifactPaths = new Map(); + +type ImportMode = "legacy" | "compatible" | "explicit"; +interface CompileImportOptions { + mode: ImportMode; + aliases: Record; + autoImport: boolean; +} +const compileImportOptions = new Map(); +const warnedImportDiagnostics = new Set(); + +export function setCompileImportOptions( + appRoot: string, + options: { mode?: ImportMode; aliases?: Record; autoImport?: boolean } = {}, +): void { + compileImportOptions.set(resolve(appRoot), { + mode: options.mode ?? "compatible", + aliases: { "@": "./app", ...(options.aliases ?? {}) }, + autoImport: options.autoImport ?? true, + }); +} + +const compileInProgress = new Map(); + +function projectRootForFile(file: string): string { + let current = dirname(resolve(file)); + while (true) { + if (existsSync(join(current, "app"))) return current; + const parent = dirname(current); + if (parent === current) return dirname(resolve(file)); + current = parent; + } +} + +function rewriteArtifactImports( + code: string, + ast: PageAst, + importer: string, + target: "main" | "server" | "browser", +): string { + if (!ast.structuredImports.length) return code; + const root = projectRootForFile(importer); + const importOptions = compileImportOptions.get(resolve(root)) ?? { + mode: "compatible" as const, + aliases: { "@": "./app" }, + autoImport: true, + }; + const resolved = resolveWrnImports(ast.structuredImports, importer, { + appRoot: root, + mode: importOptions.mode, + aliases: importOptions.aliases, + }); + let output = code; + for (const entry of resolved) { + if (entry.diagnostic) { + const key = `${importer}:${entry.diagnostic.code}:${entry.declaration.source}`; + if (entry.diagnostic.severity === "error") { + throw new Error(`${entry.diagnostic.code}: ${entry.diagnostic.message}`); + } + if (!warnedImportDiagnostics.has(key)) { + warnedImportDiagnostics.add(key); + console.warn(`[wrnexus] ${entry.diagnostic.code}: ${entry.diagnostic.message}`); + } + } + if (!entry.resolved || !entry.declaration.source) continue; + if (!entry.declaration.source.startsWith(".") && !entry.declaration.source.startsWith("@/")) + continue; + let replacement = entry.resolved; + if (entry.resolved.endsWith(".wrn")) { + const dependencySource = readFileSync(entry.resolved, "utf8"); + const isStore = /\b(?:global|page)\s+store\s+[A-Za-z_$][\w$]*\s*\{/.test(dependencySource); + const dependency = compileWireArtifacts( + entry.resolved, + moduleVersions.get(entry.resolved) ?? 0, + ); + if (target === "browser") { + if (!isStore) { + // Components and layouts are compile-time dependencies in browser modules. + output = output.replace(entry.declaration.raw, ""); + continue; + } + replacement = `/__wrnexus/client/${basename(dependency.browser).replace(/\.client\.mjs$/, ".mjs")}`; + } else { + replacement = target === "server" ? dependency.server : dependency.main; + } + } + const escaped = entry.declaration.source.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + const specifier = replacement.startsWith("/") ? replacement : pathToFileURL(replacement).href; + output = output.replace(new RegExp(`(["'])${escaped}\\1`, "g"), JSON.stringify(specifier)); + } + return output; +} export function loadModule(file: string): Promise> { let mod = moduleCache.get(file); if (!mod) { const version = moduleVersions.get(file) ?? 0; // `.wrn` files are compiled to TypeScript first, then imported. - let target = file.endsWith(".wrn") ? compileWireToTs(file, version) : file; + let target = file.endsWith(".wrn") ? compileWireArtifacts(file, version).main : file; let temporary = false; // Bun intentionally caches local TS/JS modules by filesystem path and ignores // URL query strings. A short-lived versioned sibling keeps relative imports @@ -116,31 +209,131 @@ function hashPath(s: string): string { * components) share one cache dir without colliding. Generated modules are * self-contained (no relative imports), so the cache location doesn't affect them. */ -function compileWireToTs(file: string, version = 0): string { +function importedValueBindings(ast: PageAst): Set { + const names = new Set(); + for (const entry of ast.structuredImports) { + if (entry.typeOnly) continue; + if (entry.defaultImport) names.add(entry.defaultImport); + if (entry.namespaceImport) names.add(entry.namespaceImport); + for (const item of entry.namedImports) if (!item.typeOnly) names.add(item.local); + } + return names; +} + +function validateConfiguredImports(source: string, ast: PageAst, file: string): void { + const root = projectRootForFile(file); + const options = compileImportOptions.get(resolve(root)); + if (!options || options.mode === "legacy") return; + const imported = importedValueBindings(ast); + const usedComponents = new Set( + Array.from(source.matchAll(/<([A-Z][A-Za-z0-9_$]*)\b/g), (match) => match[1]!), + ); + const missing = [...usedComponents].filter((name) => !imported.has(name)); + if (ast.layoutIsSymbol && ast.layout && !imported.has(ast.layout)) missing.push(ast.layout); + if (!missing.length) return; + const unique = [...new Set(missing)]; + const message = `WRN-IMPORT-IMPLICIT: ${file} uses ${unique.join(", ")} without explicit imports.`; + if (options.mode === "explicit") throw new Error(message); + const key = `${file}:WRN-IMPORT-IMPLICIT:${unique.join(",")}`; + if (!warnedImportDiagnostics.has(key)) { + warnedImportDiagnostics.add(key); + console.warn(`[wrnexus] ${message}`); + } +} + +export interface WrnCompileArtifacts { + main: string; + browser: string; + server: string; + declarations: string; + contract: string; + rpc: string; +} + +export function compileWireArtifacts(file: string, version = 0): WrnCompileArtifacts { + const active = compileInProgress.get(file); + if (active) return active; const cacheDir = compileCacheDir ?? join(dirname(file), ".wrnexus"); const name = basename(file).replace(/\.wrn$/, ""); const suffix = version ? `-hmr-${version}` : ""; const source = readFileSync(file, "utf8"); - // Include the source contents in the cache identity. Package managers, git - // checkouts, archive extraction, and linked dependencies can all replace a - // file while preserving (or moving backwards) its mtime. An mtime-only cache - // then serves an older compiled component even across a clean build. - const out = join( - cacheDir, - `${name}-${WRN_COMPILE_CACHE_VERSION}-${hashPath(file)}-${hashPath(source)}${suffix}.wrn.ts`, - ); - - // The content hash makes this safe even when source timestamps are preserved. + const stem = `${name}-${WRN_COMPILE_CACHE_VERSION}-${hashPath(file)}-${hashPath(source)}${suffix}`; + const artifacts: WrnCompileArtifacts = { + main: join(cacheDir, `${stem}.wrn.ts`), + browser: join(cacheDir, `${stem}.client.mjs`), + server: join(cacheDir, `${stem}.server.ts`), + declarations: join(cacheDir, `${stem}.d.ts`), + contract: join(cacheDir, `${stem}.contract.json`), + rpc: join(cacheDir, `${stem}.rpc.json`), + }; + compileInProgress.set(file, artifacts); try { - if (statSync(out).isFile()) return out; - } catch { - /* cache missing → compile below */ + try { + if (Object.values(artifacts).every((path) => statSync(path).isFile())) { + browserArtifactPaths.set(`/__wrnexus/client/${stem}.mjs`, artifacts.browser); + return artifacts; + } + } catch { + // Compile missing artifact set below. + } + const result = compile(source, file); + validateConfiguredImports(source, result.ast, file); + const targets = generateTargets(result.ast); + mkdirSync(cacheDir, { recursive: true }); + const browserPath = `/__wrnexus/client/${stem}.mjs`; + const mainCode = rewriteArtifactImports( + result.code.replaceAll("__WRNEXUS_CLIENT_MODULE__", browserPath), + result.ast, + file, + "main", + ); + writeFileSync(artifacts.main, mainCode, "utf8"); + writeFileSync( + artifacts.browser, + rewriteArtifactImports(targets.browser, result.ast, file, "browser"), + "utf8", + ); + browserArtifactPaths.set(browserPath, artifacts.browser); + writeFileSync( + artifacts.server, + rewriteArtifactImports(targets.server, result.ast, file, "server"), + "utf8", + ); + writeFileSync(artifacts.declarations, targets.declarations, "utf8"); + writeFileSync(artifacts.contract, JSON.stringify(targets.contract, null, 2) + "\n", "utf8"); + writeFileSync(artifacts.rpc, JSON.stringify(targets.rpc, null, 2) + "\n", "utf8"); + return artifacts; + } finally { + compileInProgress.delete(file); } +} - const code = compileWireFile(source, file); - mkdirSync(cacheDir, { recursive: true }); - writeFileSync(out, code, "utf8"); - return out; +export async function loadWrnServerModule(file: string): Promise> { + const version = moduleVersions.get(file) ?? 0; + const artifact = compileWireArtifacts(file, version).server; + return import(pathToFileURL(artifact).href) as Promise>; +} + +export function wrnBrowserArtifact(file: string): string { + return compileWireArtifacts(file, moduleVersions.get(file) ?? 0).browser; +} + +export function wrnBrowserArtifactUrl(file: string): string { + const artifact = compileWireArtifacts(file, moduleVersions.get(file) ?? 0).browser; + return `/__wrnexus/client/${basename(artifact).replace(/\.client\.mjs$/, ".mjs")}`; +} + +export function serveWrnBrowserArtifact(pathname: string): Response | null { + const artifact = browserArtifactPaths.get(pathname); + if (!artifact || !existsSync(artifact)) return null; + return new Response(readFileSync(artifact, "utf8"), { + headers: { + "content-type": "text/javascript; charset=utf-8", + "cache-control": "no-store, max-age=0", + pragma: "no-cache", + expires: "0", + }, + }); } /** Forget one module and force its next dynamic import to bypass Bun's import cache. */ diff --git a/packages/dev-server/src/prod.ts b/packages/dev-server/src/prod.ts index f125f2ed..0f982fb1 100644 --- a/packages/dev-server/src/prod.ts +++ b/packages/dev-server/src/prod.ts @@ -203,6 +203,7 @@ function buildProdRouter(manifest: ProdManifest): { middlewareFiles: [], components: manifest.components.map((c) => ({ name: c.name, file: c.name })), layouts: manifest.layouts.map((l) => ({ name: l.name, file: `layout:${l.name}` })), + stores: [], schemas: [], // descriptors are pre-baked into schemasJs; not needed at runtime matchPage: (p) => matchRoute(pages, p), matchApi: (p) => matchRoute(api, p), diff --git a/packages/dev-server/src/runtime.ts b/packages/dev-server/src/runtime.ts index 00a41472..1fbcbd58 100644 --- a/packages/dev-server/src/runtime.ts +++ b/packages/dev-server/src/runtime.ts @@ -37,6 +37,12 @@ import { } from "@wrnexus/core"; import type { Router } from "@wrnexus/router"; import { renderDocument, type RenderScript, type ScriptAsset } from "@wrnexus/ssr"; +import { + disposeRequestStores, + renderStoreHydration, + requestStoreContainer, +} from "@wrnexus/ssr/store-context"; +import type { StoreDefinition } from "@wrnexus/store"; import type { ClientRuntimeDefinition } from "@wrnexus/plugin"; import { runtimeScriptsForMarkup } from "./plugin-assets.ts"; import { @@ -549,6 +555,8 @@ export const HMR_CLIENT_JS = ` } else if (msg.type === "css") { swapCss(msg.version); window.dispatchEvent(new CustomEvent("wrnexus:hmr", { detail: msg })); + } else if (msg.type === "store-update") { + applyStoreUpdates(msg); } else if (msg.type === "reload") requestSync(); else if (msg.type === "html") applyHtml(msg.html); else if (msg.type === "error") console.error("[wrnexus] HMR update failed:", msg.message); @@ -563,6 +571,28 @@ export const HMR_CLIENT_JS = ` return true; } + + async function applyStoreUpdates(message) { + var updates = Array.isArray(message.stores) ? message.stores : []; + for (var i = 0; i < updates.length; i++) { + var update = updates[i]; + try { + var separator = String(update.url).indexOf("?") >= 0 ? "&" : "?"; + var module = await import(String(update.url) + separator + "hmr=" + encodeURIComponent(String(message.version || Date.now()))); + var definition = module[String(update.name) + "Definition"]; + if (!definition) throw new Error("Generated store module did not export its definition"); + if (typeof window.__wrnexusApplyStoreHotUpdate === "function") { + var result = await window.__wrnexusApplyStoreHotUpdate(String(update.name), definition); + window.dispatchEvent(new CustomEvent("wrnexus:hmr-store-updated", { detail: { update: update, result: result } })); + } + } catch (error) { + console.error("[wrnexus] store HMR update failed", update, error); + requestSync(); + return; + } + } + } + function requestSync() { if (pendingSync) return; pendingSync = true; @@ -1311,6 +1341,7 @@ export function createHandlers(deps: RuntimeDeps): Handlers { // Issue the CSRF token cookie so forms on this page can echo it back. csrfToken(ctx); + const storeContainer = requestStoreContainer(ctx.req, matched.route.raw); const mod = await loadModule(matched.route.file); const component = mod.default; @@ -1322,8 +1353,10 @@ export function createHandlers(deps: RuntimeDeps): Handlers { const meta = (mod.meta ?? {}) as PageMeta; const pageCtx = ctx as Context & { __wrnexusCallApi?: (path: string, method?: string) => Promise; + __wrnexusUseStore?: (definition: StoreDefinition) => Promise; }; pageCtx.__wrnexusCallApi = (path, method = "GET") => callApiFromContext(ctx, path, method); + pageCtx.__wrnexusUseStore = (definition) => storeContainer.use(definition); let body = await renderComponents(String(await component(pageCtx)), ctx.t); const resolvedTheme = deps.theme ? resolveThemeName(ctx.cookies.get(THEME_COOKIE), deps.theme) @@ -1334,15 +1367,24 @@ export function createHandlers(deps: RuntimeDeps): Handlers { // Page layout: a page selects one by exporting `layout = ""` // (app/layouts/.wrn), else falls back to a `default` layout if one // exists. `layout = "none"` opts out. The layout wraps the body via . + const importedLayout = + mod.layout && typeof mod.layout === "object" + ? (mod.layout as { name?: string; render?: (props: Record) => string }) + : undefined; const layoutName = (isMobileRequest && deps.mobile?.layout ? deps.mobile.layout : typeof mod.layout === "string" ? mod.layout - : undefined) ?? "default"; - const layout = - layoutName === "none" ? undefined : router.layouts.find((l) => l.name === layoutName); - if (layout) { + : importedLayout?.name) ?? "default"; + const layout = importedLayout + ? undefined + : layoutName === "none" + ? undefined + : router.layouts.find((l) => l.name === layoutName); + if (importedLayout?.render) { + body = await renderComponents(fillSlots(String(importedLayout.render({})), body), ctx.t); + } else if (layout) { try { const layoutMod = await loadModule(layout.file); const layoutRender = (layoutMod as { render?: (p: Record) => string }) @@ -1451,6 +1493,7 @@ export function createHandlers(deps: RuntimeDeps): Handlers { .join("\n "), extraBody: [ + renderStoreHydration(storeContainer, (ctx.locals.cspNonce as string) ?? undefined), hmr ? hmrClientTag((ctx.locals.cspNonce as string) ?? "") : "", shouldEnableDevToolbar(mode, deps) ? DEV_TOOLBAR_SCRIPT : "", ] @@ -1464,6 +1507,7 @@ export function createHandlers(deps: RuntimeDeps): Handlers { // the shell carries a per-request CSP nonce in dev, which would otherwise make // the ETag change every request. Same content → same ETag → 304 on revalidate. const tag = etag(`${htmlAttrs ?? ""}\n${JSON.stringify(scripts)}\n${body}`); + await disposeRequestStores(ctx.req); const method = ctx.req.method.toUpperCase(); if ((method === "GET" || method === "HEAD") && notModified(ctx.req, tag)) { return new Response(null, { diff --git a/packages/dev-server/test/import-modes-v060.test.ts b/packages/dev-server/test/import-modes-v060.test.ts new file mode 100644 index 00000000..63b935aa --- /dev/null +++ b/packages/dev-server/test/import-modes-v060.test.ts @@ -0,0 +1,55 @@ +import { afterEach, expect, test } from "bun:test"; +import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from "node:fs"; +import { join } from "node:path"; +import { tmpdir } from "node:os"; +import { + compileWireArtifacts, + setCompileCacheDir, + setCompileImportOptions, +} from "../src/pipeline.ts"; + +const roots: string[] = []; +afterEach(() => { + for (const root of roots.splice(0)) rmSync(root, { recursive: true, force: true }); +}); + +function fixture(): { root: string; page: string } { + const root = mkdtempSync(join(tmpdir(), "wrn-import-mode-")); + roots.push(root); + mkdirSync(join(root, "app/pages"), { recursive: true }); + mkdirSync(join(root, "app/components"), { recursive: true }); + writeFileSync( + join(root, "app/components/Card.wrn"), + "component Card { view {
Card
} }", + ); + const page = join(root, "app/pages/index.wrn"); + writeFileSync(page, "page Home { view { } }"); + setCompileCacheDir(join(root, ".wrnexus")); + return { root, page }; +} + +test("legacy, compatible, and explicit import modes are enforced from app config", () => { + const { root, page } = fixture(); + setCompileImportOptions(root, { mode: "legacy" }); + expect(() => compileWireArtifacts(page, 1)).not.toThrow(); + + const warnings: string[] = []; + const originalWarn = console.warn; + console.warn = (...args) => warnings.push(args.join(" ")); + try { + setCompileImportOptions(root, { mode: "compatible" }); + expect(() => compileWireArtifacts(page, 2)).not.toThrow(); + expect(warnings.some((message) => message.includes("WRN-IMPORT-IMPLICIT"))).toBe(true); + + setCompileImportOptions(root, { mode: "explicit" }); + expect(() => compileWireArtifacts(page, 3)).toThrow("WRN-IMPORT-IMPLICIT"); + + writeFileSync( + page, + 'import Card from "@/components/Card.wrn"\npage Home { view { } }', + ); + expect(() => compileWireArtifacts(page, 4)).not.toThrow(); + } finally { + console.warn = originalWarn; + } +}); diff --git a/packages/dev-toolbar/package.json b/packages/dev-toolbar/package.json index a1ad66e2..040e3114 100644 --- a/packages/dev-toolbar/package.json +++ b/packages/dev-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-toolbar", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "sideEffects": false, diff --git a/packages/dev-toolbar/src/client/runtime.ts b/packages/dev-toolbar/src/client/runtime.ts index 1488f181..e6d6389f 100644 --- a/packages/dev-toolbar/src/client/runtime.ts +++ b/packages/dev-toolbar/src/client/runtime.ts @@ -1,7 +1,7 @@ export const DEV_TOOLBAR_RUNTIME = String.raw`(() => { if (window.__wrnexusDevToolbar) return; const KEY = "__wrnexus_dev_toolbar_settings__"; - const state = { open:false, issues:[], report:null, search:"", severity:"all", config:{ position:"bottom-center", scanOnNavigation:true, scanOnHmr:true } }; + const state = { open:false, issues:[], report:null, search:"", severity:"all", category:"all", platform:null, panels:[], config:{ position:"bottom-center", scanOnNavigation:true, scanOnHmr:true } }; try { state.config = Object.assign(state.config, JSON.parse(localStorage.getItem(KEY) || "{}")); } catch {} const host = document.createElement("wrnexus-dev-toolbar"); host.setAttribute("data-wrnexus-dev-toolbar", ""); @@ -11,7 +11,7 @@ export const DEV_TOOLBAR_RUNTIME = String.raw`(() => { fetch("/__wrnexus/dev-toolbar.css").then(r => r.ok ? r.text() : "").then(css => style.textContent = css).catch(() => {}); root.appendChild(style); const shell = document.createElement("div"); shell.className="wrn-shell"; shell.dataset.position=state.config.position; - shell.innerHTML='
WRNexus DevToolbar
'; + shell.innerHTML='
WRNexus DevToolbar
'; root.appendChild(shell); const panel=root.querySelector(".wrn-panel"), list=root.querySelector(".wrn-list"), meta=root.querySelector(".wrn-panel-meta"), search=root.querySelector(".wrn-search"); const esc = value => String(value ?? "").replace(/[&<>\"']/g, char => ({"&":"&","<":"<",">":">",'"':""","'":"'"})[char]); @@ -39,18 +39,25 @@ export const DEV_TOOLBAR_RUNTIME = String.raw`(() => { if(document.documentElement.scrollWidth>innerWidth+2)found.push(issue("responsive/document-overflow","responsive","error","Page has horizontal overflow","Document width exceeds the viewport.",null,"Inspect fixed widths, long text and overflowing media.")); q("body *").filter(visible).slice(0,2500).forEach(el=>{const r=el.getBoundingClientRect();if((r.right>innerWidth+8||r.left<-8)&&found.filter(x=>x.ruleId==="responsive/element-overflow").length<20)found.push(issue("responsive/element-overflow","responsive","warning","Element extends outside the viewport","Element bounds exceed the current viewport.",el,"Use fluid sizing, wrapping, max-width or an intentional scroll container."));}); const resources=performance.getEntriesByType("resource");const total=resources.reduce((s,e)=>s+(e.transferSize||0),0);if(resources.length>150)found.push(issue("performance/resource-count","performance","warning","Page loads many resources","Found "+resources.length+" resource requests.",null,"Remove duplicates and defer non-critical resources."));if(total>5000000)found.push(issue("performance/transfer-size","performance",total>10000000?"error":"warning","Page transfer size is large","Observed transfer size is about "+(total/1000000).toFixed(2)+" MB.",null,"Compress and optimize page resources.")); - const unique=new Map();[...state.issues.filter(x=>["runtime","network","server","compiler","routing"].includes(x.category)),...found].forEach(x=>unique.set(x.fingerprint,x));state.issues=[...unique.values()]; + q("[data-wrn-client-module]").forEach(el=>found.push(issue("runtime/client-module","runtime","info","Client function module",el.getAttribute("data-wrn-client-module")||"Unknown module",el,"Loaded according to the component hydration strategy.","high",{hydration:el.getAttribute("data-wrn-hydrate"),runtime:el.getAttribute("data-wrn-runtime")}))); + const storeContainer=window.__wrnexusStoreContainer; + if(storeContainer&&typeof storeContainer.inspect==="function"){ + for(const store of storeContainer.inspect())found.push(issue("stores/instance","stores","info",store.kind+" store: "+store.name,JSON.stringify({state:store.state,computed:store.computed}),null,"Use store actions for mutations. Sensitive server state is never hydrated.","high",store)); + } + const unique=new Map();[...state.issues.filter(x=>["runtime","stores","network","server","compiler","routing"].includes(x.category)),...found].forEach(x=>unique.set(x.fingerprint,x));state.issues=[...unique.values()]; state.report={url:location.href,pathname:location.pathname,title:document.title,status:200,generatedAt:Date.now(),issues:state.issues,metrics:{domNodes:count,cssResources:q('link[rel="stylesheet"]').length,scriptResources:q("script[src]").length,imageResources:q("img").length,totalTransferBytes:total,pageLoadMs:performance.getEntriesByType("navigation")[0]?.duration}}; render(); return state.report; }; let highlightEl=null; const clearHighlight=()=>{highlightEl?.remove();highlightEl=null}; const highlight=sel=>{clearHighlight();let target;try{target=document.querySelector(sel)}catch{}if(!target)return;const r=target.getBoundingClientRect();highlightEl=document.createElement("div");highlightEl.className="wrn-highlight";Object.assign(highlightEl.style,{left:r.left+"px",top:r.top+"px",width:r.width+"px",height:r.height+"px"});root.appendChild(highlightEl);target.scrollIntoView({block:"center",behavior:"smooth"});setTimeout(clearHighlight,3000)}; - const render=()=>{const filtered=state.issues.filter(x=>{const severityMatches=state.severity==="all"||x.severity===state.severity;const textMatches=!state.search||[x.title,x.message,x.ruleId,x.category,x.severity,x.source?.file].join(" ").toLowerCase().includes(state.search);return severityMatches&&textMatches;});root.querySelector("[data-errors]").textContent=state.issues.filter(x=>x.severity==="error").length;root.querySelector("[data-warnings]").textContent=state.issues.filter(x=>x.severity==="warning").length;root.querySelector("[data-suggestions]").textContent=state.issues.filter(x=>x.severity==="suggestion").length;root.querySelectorAll("[data-filter]").forEach(button=>{const active=button.dataset.filter===state.severity;button.classList.toggle("active",active);button.setAttribute("aria-pressed",String(active));});meta.textContent=location.pathname+" · "+state.issues.length+" issues"+(state.severity!=="all"?" · "+state.severity:"");if(!filtered.length){list.innerHTML='
No issues match the current filters.
';return;}list.innerHTML=filtered.map(x=>'
'+esc(x.title)+'
'+esc(x.message)+'
'+esc(x.severity)+' · '+esc(x.category)+' · '+esc(x.ruleId)+(x.source?.file?' · '+esc(x.source.file):'')+'
'+(x.target?.selector?'':'')+'
').join("");}; + const render=()=>{const filtered=state.issues.filter(x=>{const severityMatches=state.severity==="all"||x.severity===state.severity;const categoryMatches=state.category==="all"||x.category===state.category;const textMatches=!state.search||[x.title,x.message,x.ruleId,x.category,x.severity,x.source?.file].join(" ").toLowerCase().includes(state.search);return severityMatches&&categoryMatches&&textMatches;});root.querySelector("[data-errors]").textContent=state.issues.filter(x=>x.severity==="error").length;root.querySelector("[data-warnings]").textContent=state.issues.filter(x=>x.severity==="warning").length;root.querySelector("[data-suggestions]").textContent=state.issues.filter(x=>x.severity==="suggestion").length;root.querySelectorAll("[data-filter]").forEach(button=>{const active=button.dataset.filter===state.severity;button.classList.toggle("active",active);button.setAttribute("aria-pressed",String(active));});root.querySelectorAll("[data-category]").forEach(button=>{const active=button.dataset.category===state.category;button.classList.toggle("active",active);button.setAttribute("aria-pressed",String(active));});meta.textContent=location.pathname+" · "+state.issues.length+" findings"+(state.category!=="all"?" · "+state.category:"")+(state.severity!=="all"?" · "+state.severity:"");if(!filtered.length){list.innerHTML='
No issues match the current filters.
';return;}list.innerHTML=filtered.map(x=>'
'+esc(x.title)+'
'+esc(x.message)+'
'+esc(x.severity)+' · '+esc(x.category)+' · '+esc(x.ruleId)+(x.source?.file?' · '+esc(x.source.file):'')+'
'+(x.target?.selector?'':'')+'
').join("");}; const addRuntime=(severity,title,message,metadata={})=>{const x=issue("runtime/browser","runtime",severity,title,message,null,"Inspect the browser console and source stack.","high",metadata);state.issues=[x,...state.issues.filter(i=>i.fingerprint!==x.fingerprint)];render()}; addEventListener("error",event=>{const target=event.target;if(target&&target!==window&&target.tagName){addRuntime("error","Resource failed to load",target.src||target.href||target.currentSrc||target.tagName,{tag:target.tagName});}else addRuntime("error",event.message||"Uncaught browser error",event.filename?event.filename+":"+event.lineno+":"+event.colno:"",{stack:event.error?.stack});},true); addEventListener("unhandledrejection",event=>addRuntime("error","Unhandled promise rejection",event.reason?.message||String(event.reason),{stack:event.reason?.stack})); - root.addEventListener("click",event=>{const button=event.target.closest("button");if(!button)return;if(button.matches("[data-toggle]")){state.open=!state.open;state.severity="all";panel.classList.toggle("open",state.open);render()}if(button.matches("[data-close]")){state.open=false;panel.classList.remove("open")}if(button.matches("[data-scan]"))scan();if(button.matches("[data-clear]")){state.issues=[];state.severity="all";state.search="";search.value="";render()}if(button.dataset.filter){state.severity=state.severity===button.dataset.filter?"all":button.dataset.filter;state.open=true;panel.classList.add("open");render()}if(button.dataset.highlight)highlight(button.dataset.highlight)}); + root.addEventListener("click",event=>{const button=event.target.closest("button");if(!button)return;if(button.matches("[data-toggle]")){state.open=!state.open;state.severity="all";panel.classList.toggle("open",state.open);render()}if(button.matches("[data-close]")){state.open=false;panel.classList.remove("open")}if(button.matches("[data-scan]"))scan();if(button.matches("[data-clear]")){state.issues=[];state.severity="all";state.category="all";state.search="";search.value="";render()}if(button.dataset.category){state.category=button.dataset.category;state.open=true;panel.classList.add("open");render()}if(button.dataset.filter){state.severity=state.severity===button.dataset.filter?"all":button.dataset.filter;state.open=true;panel.classList.add("open");render()}if(button.dataset.highlight)highlight(button.dataset.highlight)}); search.addEventListener("input",()=>{state.search=search.value.toLowerCase();render()}); addEventListener("wrnexus:navigated",()=>{if(state.config.scanOnNavigation)setTimeout(scan,50)});addEventListener("wrnexus:hmr",()=>{if(state.config.scanOnHmr)setTimeout(scan,100)});addEventListener("wrnexus:runtime-error",event=>addRuntime("error","WRNexus runtime error",event.detail?.message||"Runtime failure",event.detail||{})); addEventListener("wrnexus:diagnostic",event=>{const detail=event.detail||{};const code=detail.code||"WRN-RUNTIME";const category=String(code).includes("HYDRATE")?"runtime":String(code).includes("ROUTE")?"routing":"compiler";const title=String(code).includes("HYDRATE")?"Hydration diagnostic":"WRNexus diagnostic";const x=issue(String(code),category,"error",title,detail.message||"Framework diagnostic",null,"Open the source location and resolve the reported framework contract.","high",detail);state.issues=[x,...state.issues.filter(i=>i.fingerprint!==x.fingerprint)];render();}); + addEventListener("wrnexus:store-mutation",event=>{const mutation=event.detail||{};const x=issue("stores/mutation","stores","info","Store action: "+(mutation.store||"unknown")+"."+(mutation.action||"direct"),"Changed fields: "+((mutation.changed||[]).join(", ")||"none"),null,"Use the Stores panel to inspect safe client state.","high",mutation);state.issues=[x,...state.issues.filter(i=>i.fingerprint!==x.fingerprint)];render();}); + fetch("/__wrnexus/dev-toolbar/platform").then(r=>r.ok?r.json():null).then(data=>{if(!data)return;state.platform=data.platform;state.panels=data.panels||[];render();}).catch(()=>{}); window.__wrnexusDevToolbar={open(){state.open=true;panel.classList.add("open")},close(){state.open=false;panel.classList.remove("open")},toggle(){state.open=!state.open;panel.classList.toggle("open",state.open)},scan,clear(){state.issues=[];render()},report(){return state.report},highlight,configure(config){state.config=Object.assign(state.config,config||{});shell.dataset.position=state.config.position;try{localStorage.setItem(KEY,JSON.stringify(state.config))}catch{}}}; const observer=new MutationObserver(()=>{clearTimeout(observer.timer);observer.timer=setTimeout(()=>{if(!state.open)return;scan()},400)});observer.observe(document.documentElement,{childList:true,subtree:true,attributes:true,attributeFilter:["class","style","src","href","alt","aria-label"]}); setTimeout(scan,100); diff --git a/packages/dev-toolbar/src/client/styles.ts b/packages/dev-toolbar/src/client/styles.ts index ebab57f8..770b2a2f 100644 --- a/packages/dev-toolbar/src/client/styles.ts +++ b/packages/dev-toolbar/src/client/styles.ts @@ -1,4 +1,4 @@ export const DEV_TOOLBAR_CSS = String.raw` :host{all:initial;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#111318;--panel:#181b22;--line:#2b303b;--text:#f4f6fb;--muted:#9ca6b8;--error:#ff6b6b;--warning:#ffc857;--info:#72a7ff;--suggestion:#a78bfa} -*{box-sizing:border-box}.wrn-shell{position:fixed;z-index:2147483646;bottom:16px;left:50%;transform:translateX(-50%);color:var(--text);font-size:13px;line-height:1.4}.wrn-shell[data-position="bottom-left"]{left:16px;transform:none}.wrn-shell[data-position="bottom-right"]{left:auto;right:16px;transform:none}.wrn-bar{display:flex;align-items:center;gap:6px;padding:7px;border:1px solid var(--line);border-radius:14px;background:rgba(17,19,24,.96);box-shadow:0 18px 60px rgba(0,0,0,.42);backdrop-filter:blur(18px)}button{appearance:none;border:0;font:inherit}.wrn-button,.wrn-count{display:inline-flex;align-items:center;justify-content:center;min-height:32px;border-radius:9px;padding:0 10px;background:#222631;color:var(--text);cursor:pointer}.wrn-button:hover,.wrn-count:hover{background:#2b303c}.wrn-count.active{background:#394150;box-shadow:inset 0 0 0 1px #596579}.wrn-button:focus-visible,.wrn-count:focus-visible{outline:2px solid #72a7ff;outline-offset:2px}.wrn-brand{font-weight:800;letter-spacing:-.02em;padding:0 8px}.wrn-count{gap:5px;font-variant-numeric:tabular-nums}.wrn-dot{width:7px;height:7px;border-radius:999px}.wrn-dot.error{background:var(--error)}.wrn-dot.warning{background:var(--warning)}.wrn-dot.suggestion{background:var(--suggestion)}.wrn-panel{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);width:min(780px,calc(100vw - 24px));height:min(620px,calc(100vh - 100px));display:none;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 24px 80px rgba(0,0,0,.5)}.wrn-panel.open{display:grid;grid-template-rows:auto auto 1fr}.wrn-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.wrn-panel-title{font-size:15px;font-weight:800}.wrn-panel-meta{color:var(--muted);font-size:12px}.wrn-toolbar-row{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.wrn-search{width:100%;height:34px;border:1px solid var(--line);border-radius:9px;background:#20242d;color:var(--text);padding:0 10px;outline:none}.wrn-search:focus{border-color:#72a7ff}.wrn-list{overflow:auto;padding:10px}.wrn-empty{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:40px}.wrn-issue{display:grid;grid-template-columns:8px 1fr auto;gap:10px;padding:12px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.wrn-severity{border-radius:999px;background:var(--info)}.wrn-severity.error{background:var(--error)}.wrn-severity.warning{background:var(--warning)}.wrn-severity.suggestion{background:var(--suggestion)}.wrn-issue-title{font-weight:750}.wrn-issue-message{margin-top:4px;color:#c8cfdb}.wrn-issue-meta{margin-top:7px;color:var(--muted);font-size:11px}.wrn-actions{display:flex;gap:5px}.wrn-small{height:28px;padding:0 8px;border-radius:7px;background:#252a35;color:var(--text);cursor:pointer}.wrn-small:hover{background:#303644}.wrn-highlight{position:fixed;z-index:2147483647;pointer-events:none;border:2px solid #72a7ff;background:rgba(114,167,255,.12);box-shadow:0 0 0 99999px rgba(0,0,0,.08)}@media(max-width:640px){.wrn-shell{bottom:8px}.wrn-brand{display:none}.wrn-bar{gap:3px;padding:5px}.wrn-count{padding:0 7px}.wrn-panel{bottom:44px;height:calc(100vh - 62px)}.wrn-issue{grid-template-columns:6px 1fr}.wrn-actions{grid-column:2}.wrn-panel-meta{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}} +*{box-sizing:border-box}.wrn-shell{position:fixed;z-index:2147483646;bottom:16px;left:50%;transform:translateX(-50%);color:var(--text);font-size:13px;line-height:1.4}.wrn-shell[data-position="bottom-left"]{left:16px;transform:none}.wrn-shell[data-position="bottom-right"]{left:auto;right:16px;transform:none}.wrn-bar{display:flex;align-items:center;gap:6px;padding:7px;border:1px solid var(--line);border-radius:14px;background:rgba(17,19,24,.96);box-shadow:0 18px 60px rgba(0,0,0,.42);backdrop-filter:blur(18px)}button{appearance:none;border:0;font:inherit}.wrn-button,.wrn-count{display:inline-flex;align-items:center;justify-content:center;min-height:32px;border-radius:9px;padding:0 10px;background:#222631;color:var(--text);cursor:pointer}.wrn-button:hover,.wrn-count:hover{background:#2b303c}.wrn-count.active{background:#394150;box-shadow:inset 0 0 0 1px #596579}.wrn-button:focus-visible,.wrn-count:focus-visible{outline:2px solid #72a7ff;outline-offset:2px}.wrn-brand{font-weight:800;letter-spacing:-.02em;padding:0 8px}.wrn-count{gap:5px;font-variant-numeric:tabular-nums}.wrn-dot{width:7px;height:7px;border-radius:999px}.wrn-dot.error{background:var(--error)}.wrn-dot.warning{background:var(--warning)}.wrn-dot.suggestion{background:var(--suggestion)}.wrn-panel{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);width:min(780px,calc(100vw - 24px));height:min(620px,calc(100vh - 100px));display:none;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 24px 80px rgba(0,0,0,.5)}.wrn-panel.open{display:grid;grid-template-rows:auto auto 1fr}.wrn-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.wrn-panel-title{font-size:15px;font-weight:800}.wrn-panel-meta{color:var(--muted);font-size:12px}.wrn-toolbar-row{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.wrn-search{width:100%;height:34px;border:1px solid var(--line);border-radius:9px;background:#20242d;color:var(--text);padding:0 10px;outline:none}.wrn-search:focus{border-color:#72a7ff}.wrn-list{overflow:auto;padding:10px}.wrn-empty{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:40px}.wrn-issue{display:grid;grid-template-columns:8px 1fr auto;gap:10px;padding:12px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.wrn-severity{border-radius:999px;background:var(--info)}.wrn-severity.error{background:var(--error)}.wrn-severity.warning{background:var(--warning)}.wrn-severity.suggestion{background:var(--suggestion)}.wrn-issue-title{font-weight:750}.wrn-issue-message{margin-top:4px;color:#c8cfdb}.wrn-issue-meta{margin-top:7px;color:var(--muted);font-size:11px}.wrn-actions{display:flex;gap:5px}.wrn-small{height:28px;padding:0 8px;border-radius:7px;background:#252a35;color:var(--text);cursor:pointer}.wrn-small:hover{background:#303644}.wrn-small.active{background:#394150;box-shadow:inset 0 0 0 1px #596579}.wrn-highlight{position:fixed;z-index:2147483647;pointer-events:none;border:2px solid #72a7ff;background:rgba(114,167,255,.12);box-shadow:0 0 0 99999px rgba(0,0,0,.08)}@media(max-width:640px){.wrn-shell{bottom:8px}.wrn-brand{display:none}.wrn-bar{gap:3px;padding:5px}.wrn-count{padding:0 7px}.wrn-panel{bottom:44px;height:calc(100vh - 62px)}.wrn-issue{grid-template-columns:6px 1fr}.wrn-actions{grid-column:2}.wrn-panel-meta{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}} `; diff --git a/packages/dev-toolbar/src/types.ts b/packages/dev-toolbar/src/types.ts index 581a5254..b50bedfb 100644 --- a/packages/dev-toolbar/src/types.ts +++ b/packages/dev-toolbar/src/types.ts @@ -2,6 +2,7 @@ export type DevToolbarSeverity = "error" | "warning" | "info" | "suggestion"; export type DevToolbarCategory = | "runtime" + | "stores" | "compiler" | "server" | "routing" diff --git a/packages/encryption/package.json b/packages/encryption/package.json index cd7d194f..e8aa5f14 100644 --- a/packages/encryption/package.json +++ b/packages/encryption/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/encryption", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/helpers/package.json b/packages/helpers/package.json index 146660f8..a829d012 100644 --- a/packages/helpers/package.json +++ b/packages/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/helpers", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "description": "Safe convenience helpers for WrNexus request contexts and common application flows.", diff --git a/packages/i18n/package.json b/packages/i18n/package.json index aa1e5ff1..555ecf51 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/i18n", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/jwt/package.json b/packages/jwt/package.json index df50bb90..1e9aff5a 100644 --- a/packages/jwt/package.json +++ b/packages/jwt/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/jwt", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/mobile/package.json b/packages/mobile/package.json index c6e21404..ad18ce28 100644 --- a/packages/mobile/package.json +++ b/packages/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/mobile", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/native/package.json b/packages/native/package.json index 3896b44e..3b489518 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/native", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/oauth/package.json b/packages/oauth/package.json index 3fcfc956..8455c1ba 100644 --- a/packages/oauth/package.json +++ b/packages/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/oauth", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/plugin/package.json b/packages/plugin/package.json index b69b53c6..660daf59 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/plugin", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/pubsub/package.json b/packages/pubsub/package.json index 20c6f959..33947df2 100644 --- a/packages/pubsub/package.json +++ b/packages/pubsub/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/pubsub", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/queue/package.json b/packages/queue/package.json index 7ec41572..67ffddd0 100644 --- a/packages/queue/package.json +++ b/packages/queue/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/queue", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/reactive/package.json b/packages/reactive/package.json index 77439523..076810ab 100644 --- a/packages/reactive/package.json +++ b/packages/reactive/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/reactive", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/router/package.json b/packages/router/package.json index bf31d403..bb82d823 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/router", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts index fcb36fae..9e4ea4b6 100644 --- a/packages/router/src/index.ts +++ b/packages/router/src/index.ts @@ -55,6 +55,8 @@ export interface Router { components: ComponentRef[]; /** Named page layouts (`app/layouts/.wrn`); a page picks one via `layout`. */ layouts: ComponentRef[]; + /** Typed global/page stores discovered under `app/stores/`. */ + stores: ComponentRef[]; /** Validation schemas (`app/schemas/.ts`) shared by API + forms. */ schemas: ComponentRef[]; matchPage(pathname: string): RouteMatch | null; @@ -255,6 +257,19 @@ export function buildRouter(appDir: string, opts: RouterOptions = {}): Router { layouts.push({ name, file: f.file }); } + const stores: ComponentRef[] = []; + for (const f of scanDir(join(appDir, "stores"))) { + if (!f.file.endsWith(".wrn")) continue; + try { + const source = readFileSync(f.file, "utf8"); + const declaration = /\b(?:global|page)\s+store\s+([A-Za-z_$][\w$]*)\s*\{/.exec(source); + if (!declaration) continue; + stores.push({ name: declaration[1]!, file: f.file }); + } catch (error) { + console.warn(`[wrnexus] unable to inspect store declaration in ${f.file}`, error); + } + } + // Validation schemas: app/schemas/.{ts,js}. Imported by API routes and // referenced by forms via `data-schema=""`. const schemas: ComponentRef[] = []; @@ -275,6 +290,7 @@ export function buildRouter(appDir: string, opts: RouterOptions = {}): Router { middlewareFiles, components, layouts, + stores, schemas, matchPage: (p) => matchRoute(pages, p), matchApi: (p) => matchRoute(api, p), diff --git a/packages/ssr/package.json b/packages/ssr/package.json index f1b5ef0d..47d4b44c 100644 --- a/packages/ssr/package.json +++ b/packages/ssr/package.json @@ -1,12 +1,15 @@ { "name": "@wrnexus/ssr", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { - ".": "./src/index.ts" + ".": "./src/index.ts", + "./rpc": "./src/rpc.ts", + "./store-context": "./src/store-context.ts" }, "dependencies": { - "@wrnexus/core": "workspace:*" + "@wrnexus/core": "workspace:*", + "@wrnexus/store": "workspace:*" } } diff --git a/packages/ssr/src/index.ts b/packages/ssr/src/index.ts index 5ee7c282..7018750a 100644 --- a/packages/ssr/src/index.ts +++ b/packages/ssr/src/index.ts @@ -422,3 +422,6 @@ export function streamDocumentResponse( if (!headers.has("content-type")) headers.set("content-type", "text/html; charset=utf-8"); return new Response(renderDocumentStream(opts), { ...init, headers }); } + +export * from "./rpc.ts"; +export * from "./store-context.ts"; diff --git a/packages/ssr/src/rpc.ts b/packages/ssr/src/rpc.ts new file mode 100644 index 00000000..6ba00a1e --- /dev/null +++ b/packages/ssr/src/rpc.ts @@ -0,0 +1,227 @@ +export interface RpcParameterContract { + name: string; + type: string; + optional: boolean; +} +export interface RpcManifestContract { + function: string; + parameters?: RpcParameterContract[]; + returnType?: string; +} +export interface RpcRequestPayload { + component: string; + function: string; + args: unknown[]; +} +export interface RpcContext { + request: Request; + user?: unknown; + traceId: string; +} +export interface RpcHandlerOptions { + resolve(component: string): Promise<{ + functions: Record any>; + manifest?: RpcManifestContract[]; + } | null>; + authenticate?: (request: Request) => Promise | unknown; + authorize?: (context: RpcContext, payload: RpcRequestPayload) => Promise | boolean; + validateCsrf?: (request: Request) => Promise | boolean; + validateInput?: ( + payload: RpcRequestPayload, + manifestEntry: RpcManifestContract, + ) => Promise | unknown[]; + validateOutput?: ( + value: unknown, + manifestEntry: RpcManifestContract, + ) => Promise | unknown; +} + +function json(body: unknown, status = 200): Response { + return new Response(JSON.stringify(body), { + status, + headers: { + "content-type": "application/json; charset=utf-8", + "cache-control": "no-store", + }, + }); +} +function error( + code: string, + message: string, + status: number, + traceId: string, + details?: unknown, +): Response { + return json( + { ok: false, error: { code, message, traceId, ...(details === undefined ? {} : { details }) } }, + status, + ); +} +function validName(value: unknown): value is string { + return typeof value === "string" && /^[A-Za-z_$][\w$]*$/.test(value); +} + +function removePromise(type: string): string { + const match = /^Promise\s*<([\s\S]+)>$/.exec(type.trim()); + return match?.[1]?.trim() ?? type.trim(); +} + +function splitUnion(type: string): string[] { + const parts: string[] = []; + let depth = 0; + let quote = ""; + let start = 0; + for (let index = 0; index < type.length; index++) { + const char = type[index]!; + if (quote) { + if (char === "\\") index++; + else if (char === quote) quote = ""; + continue; + } + if (char === '"' || char === "'") quote = char; + else if ("<([{".includes(char)) depth++; + else if (">)]}".includes(char)) depth = Math.max(0, depth - 1); + else if (char === "|" && depth === 0) { + parts.push(type.slice(start, index).trim()); + start = index + 1; + } + } + parts.push(type.slice(start).trim()); + return parts.filter(Boolean); +} + +function matchesRuntimeType(value: unknown, rawType: string): boolean { + const type = removePromise(rawType).trim(); + if (!type || ["unknown", "any", "never"].includes(type)) return true; + const union = splitUnion(type); + if (union.length > 1) return union.some((part) => matchesRuntimeType(value, part)); + if (type === "undefined" || type === "void") return value === undefined; + if (type === "null") return value === null; + if (/^"[\s\S]*"$|^'[\s\S]*'$/.test(type)) return value === type.slice(1, -1); + if (/^-?\d+(?:\.\d+)?$/.test(type)) return value === Number(type); + if (type === "true") return value === true; + if (type === "false") return value === false; + if (type === "string") return typeof value === "string"; + if (type === "number") return typeof value === "number" && Number.isFinite(value); + if (type === "boolean") return typeof value === "boolean"; + if (type === "bigint") return typeof value === "bigint"; + if (type === "Date") + return value instanceof Date || (typeof value === "string" && !Number.isNaN(Date.parse(value))); + if (type.endsWith("[]")) + return ( + Array.isArray(value) && value.every((item) => matchesRuntimeType(item, type.slice(0, -2))) + ); + if (/^(?:Readonly)?Array\s*)?$/.test(type)) return value !== null && typeof value === "object"; + return true; +} + +function validateArguments(payload: RpcRequestPayload, manifest: RpcManifestContract): unknown[] { + const parameters = manifest.parameters ?? []; + const required = parameters.filter((parameter) => !parameter.optional).length; + if (payload.args.length < required || payload.args.length > parameters.length) { + throw new TypeError( + `WRN-RPC-INPUT: ${manifest.function} expects ${required === parameters.length ? required : `${required}-${parameters.length}`} arguments, received ${payload.args.length}.`, + ); + } + parameters.forEach((parameter, index) => { + const value = payload.args[index]; + if (value === undefined && parameter.optional) return; + if (!matchesRuntimeType(value, parameter.type)) { + throw new TypeError( + `WRN-RPC-INPUT: argument '${parameter.name}' expected ${parameter.type}.`, + ); + } + }); + return payload.args; +} + +function validateReturn(value: unknown, manifest: RpcManifestContract): unknown { + const type = manifest.returnType ?? "unknown"; + if (!matchesRuntimeType(value, type)) { + throw new TypeError( + `WRN-RPC-OUTPUT: ${manifest.function} returned a value incompatible with ${type}.`, + ); + } + return value; +} + +export function createRpcHandler( + options: RpcHandlerOptions, +): (request: Request) => Promise { + return async (request) => { + const traceId = request.headers.get("x-request-id") || crypto.randomUUID(); + if (request.method !== "POST") + return error("WRN-RPC-METHOD", "RPC requires POST", 405, traceId); + if (options.validateCsrf && !(await options.validateCsrf(request))) { + return error("WRN-RPC-CSRF", "CSRF validation failed", 403, traceId); + } + let payload: RpcRequestPayload; + try { + payload = (await request.json()) as RpcRequestPayload; + } catch { + return error("WRN-RPC-JSON", "Invalid JSON request", 400, traceId); + } + if ( + !validName(payload.component) || + !validName(payload.function) || + !Array.isArray(payload.args) + ) { + return error("WRN-RPC-PAYLOAD", "Invalid RPC payload", 400, traceId); + } + const resolved = await options.resolve(payload.component); + if (!resolved) + return error( + "WRN-RPC-COMPONENT", + `Unknown RPC component '${payload.component}'`, + 404, + traceId, + ); + const manifestEntry = resolved.manifest?.find((entry) => entry.function === payload.function); + if (!manifestEntry) { + return error( + "WRN-RPC-FUNCTION", + `Server function '${payload.function}' is not remotely exposed`, + 404, + traceId, + ); + } + const fn = resolved.functions[payload.function]; + if (typeof fn !== "function") { + return error( + "WRN-RPC-FUNCTION", + `Server function '${payload.function}' is not available`, + 404, + traceId, + ); + } + const user = options.authenticate ? await options.authenticate(request) : undefined; + const context: RpcContext = { request, user, traceId }; + if (options.authorize && !(await options.authorize(context, payload))) { + return error("WRN-RPC-AUTHZ", "Not authorized", 403, traceId); + } + try { + const args = options.validateInput + ? await options.validateInput(payload, manifestEntry) + : validateArguments(payload, manifestEntry); + const value = await fn(...args, context); + const validated = options.validateOutput + ? await options.validateOutput(value, manifestEntry) + : validateReturn(value, manifestEntry); + return json({ ok: true, value: validated, traceId }); + } catch (cause) { + const message = cause instanceof Error ? cause.message : String(cause); + const code = message.startsWith("WRN-RPC-INPUT") + ? "WRN-RPC-INPUT" + : message.startsWith("WRN-RPC-OUTPUT") + ? "WRN-RPC-OUTPUT" + : "WRN-RPC-EXECUTION"; + return error(code, message, code === "WRN-RPC-EXECUTION" ? 500 : 400, traceId); + } + }; +} diff --git a/packages/ssr/src/store-context.ts b/packages/ssr/src/store-context.ts new file mode 100644 index 00000000..283eb519 --- /dev/null +++ b/packages/ssr/src/store-context.ts @@ -0,0 +1,24 @@ +import { createRequestStoreContainer } from "@wrnexus/store/server"; +import type { StoreContainer } from "@wrnexus/store"; + +const containers = new WeakMap(); + +export function requestStoreContainer(request: object, routeId?: string): StoreContainer { + const existing = containers.get(request); + if (existing) return existing; + const created: StoreContainer = createRequestStoreContainer(request, routeId); + containers.set(request, created); + return created; +} + +export async function disposeRequestStores(request: object): Promise { + const container = containers.get(request); + if (!container) return; + containers.delete(request); + await container.dispose(); +} + +export function renderStoreHydration(container: StoreContainer, nonce?: string): string { + const json = JSON.stringify(container.serialize()).replace(/${json}`; +} diff --git a/packages/ssr/test/rpc-v060.test.ts b/packages/ssr/test/rpc-v060.test.ts new file mode 100644 index 00000000..6e88e37a --- /dev/null +++ b/packages/ssr/test/rpc-v060.test.ts @@ -0,0 +1,33 @@ +import { expect, test } from "bun:test"; +import { createRpcHandler } from "../src/rpc.ts"; + +function request(args: unknown[]): Request { + return new Request("http://localhost/__wrnexus/rpc", { + method: "POST", + headers: { "content-type": "application/json" }, + body: JSON.stringify({ component: "Demo", function: "save", args }), + }); +} + +const handler = createRpcHandler({ + resolve: async () => ({ + functions: { save: (value: string) => value.toUpperCase() }, + manifest: [ + { + function: "save", + parameters: [{ name: "value", type: "string", optional: false }], + returnType: "string", + }, + ], + }), +}); + +test("validates RPC input and output contracts", async () => { + const valid = await handler(request(["hello"])); + expect(valid.status).toBe(200); + expect(await valid.json()).toEqual(expect.objectContaining({ ok: true, value: "HELLO" })); + + const invalid = await handler(request([12])); + expect(invalid.status).toBe(400); + expect(((await invalid.json()) as any).error.code).toBe("WRN-RPC-INPUT"); +}); diff --git a/packages/store/package.json b/packages/store/package.json new file mode 100644 index 00000000..dbfa1146 --- /dev/null +++ b/packages/store/package.json @@ -0,0 +1,12 @@ +{ + "name": "@wrnexus/store", + "version": "0.6.0", + "type": "module", + "main": "src/index.ts", + "exports": { + ".": "./src/index.ts", + "./server": "./src/server.ts", + "./client": "./src/client.ts", + "./types": "./src/types.ts" + } +} diff --git a/packages/store/src/client.ts b/packages/store/src/client.ts new file mode 100644 index 00000000..954d5f0d --- /dev/null +++ b/packages/store/src/client.ts @@ -0,0 +1,29 @@ +import { createStoreContainer } from "./index.ts"; + +let globalContainer: ReturnType | undefined; + +export function browserStoreContainer(hydration: Record = {}) { + if (!globalContainer) { + globalContainer = createStoreContainer({ + runtime: "client", + hydration, + onMutation(mutation) { + try { + globalThis.dispatchEvent?.( + new CustomEvent("wrnexus:store-mutation", { detail: mutation }), + ); + } catch { + // Minimal DOM and non-browser runtimes may not expose CustomEvent. + } + }, + }); + (globalThis as any).__wrnexusStoreContainer = globalContainer; + } + return globalContainer; +} + +export async function resetBrowserStores() { + await globalContainer?.dispose(); + globalContainer = undefined; + delete (globalThis as any).__wrnexusStoreContainer; +} diff --git a/packages/store/src/index.ts b/packages/store/src/index.ts new file mode 100644 index 00000000..1edee164 --- /dev/null +++ b/packages/store/src/index.ts @@ -0,0 +1,511 @@ +import type { + StoreActionContext, + StoreDefinition, + StoreInstance, + StoreInstanceCore, + StoreMutation, + StorePersistenceConfig, + StoreCombinedState, + StoreFunction, +} from "./types.ts"; +export type * from "./types.ts"; + +const memoryPersistence = new Map(); + +function clone(value: T): T { + if (typeof structuredClone === "function") { + try { + return structuredClone(value); + } catch { + /* Proxies are cloned through their JSON-visible state below. */ + } + } + return JSON.parse(JSON.stringify(value)) as T; +} + +function readonlySnapshot(state: S): Readonly { + return Object.freeze(clone(state)); +} + +function storageFor(kind: StorePersistenceConfig["storage"]): Storage | null { + if (typeof window === "undefined") return null; + if (kind === "local") return window.localStorage; + if (kind === "session") return window.sessionStorage; + return null; +} + +function readPersisted( + key: string, + config: StorePersistenceConfig, +): Partial | null { + try { + const raw = + config.storage === "memory" + ? memoryPersistence.get(key) + : storageFor(config.storage)?.getItem(key); + if (!raw) return null; + const parsed = JSON.parse(raw) as { version?: number; state?: unknown }; + const from = Number(parsed.version ?? 0); + let state = parsed.state; + if (from !== config.version && config.migrate) + state = config.migrate(state, from, config.version); + if (config.validate) return config.validate(state); + if (!state || typeof state !== "object" || Array.isArray(state)) return null; + return state as Partial; + } catch { + return null; + } +} + +function writePersisted( + key: string, + state: S, + config: StorePersistenceConfig, +): void { + const picked: Record = {}; + for (const name of config.include) picked[name] = state[name]; + const raw = JSON.stringify({ version: config.version, state: picked }); + if (config.storage === "memory") memoryPersistence.set(key, raw); + else storageFor(config.storage)?.setItem(key, raw); +} + +export function defineStore< + S extends object, + C extends object = Record, + A extends Record = Record, + CS extends object = Record, + SS extends object = Record, +>(definition: StoreDefinition): StoreDefinition { + return definition; +} + +export interface StoreContainerOptions { + runtime: "server" | "client"; + request?: unknown; + routeId?: string; + hydration?: Record; + onMutation?: (mutation: StoreMutation) => void; +} + +export class StoreContainer { + readonly runtime: "server" | "client"; + readonly request?: unknown; + readonly routeId?: string; + private readonly instances = new Map>(); + private readonly hydration: Record; + private readonly onMutation?: (mutation: StoreMutation) => void; + private readonly lastMutations = new Map(); + + constructor(options: StoreContainerOptions) { + this.runtime = options.runtime; + this.request = options.request; + this.routeId = options.routeId; + this.hydration = options.hydration ?? {}; + this.onMutation = options.onMutation; + } + + async use< + S extends object, + C extends object, + A extends Record, + CS extends object, + SS extends object, + >( + definition: StoreDefinition, + ): Promise, C, A>> { + const key = + definition.kind === "page" + ? `${definition.name}@${this.routeId ?? "default"}` + : definition.name; + const existing = this.instances.get(key); + if (existing) return existing as StoreInstance, C, A>; + const instance = createStoreInstance(definition, { + runtime: this.runtime, + request: this.request, + routeId: this.routeId, + hydration: this.hydration[definition.name], + onMutation: (mutation) => { + this.lastMutations.set(definition.name, mutation); + this.onMutation?.(mutation); + }, + }); + this.instances.set(key, instance); + await instance.whenReady; + return instance; + } + + serialize(): Record { + return Object.fromEntries( + Array.from(this.instances.values(), (instance) => [instance.name, instance.serialize()]), + ); + } + + inspect(): Array<{ + name: string; + kind: "global" | "page"; + state: Readonly>; + computed: Readonly>; + lastAction?: string; + changed: string[]; + hydrationSource: "server" | "persistence" | "initial"; + }> { + return Array.from(this.instances.values(), (instance) => { + const mutation = this.lastMutations.get(instance.name); + return { + name: instance.name, + kind: instance.kind, + state: instance.snapshot() as Readonly>, + computed: Object.freeze( + Object.fromEntries( + Reflect.ownKeys(instance.computed).map((key) => [ + String(key), + (instance.computed as any)[key], + ]), + ), + ), + ...(mutation ? { lastAction: mutation.action } : {}), + changed: mutation?.changed ?? [], + hydrationSource: this.hydration[instance.name] ? "server" : "initial", + }; + }); + } + + async hotUpdate< + S extends object, + C extends object, + A extends Record, + CS extends object, + SS extends object, + >( + definition: StoreDefinition, + ): Promise<{ preserved: string[]; reset: string[] }> { + const entries = [...this.instances.entries()].filter( + ([, instance]) => instance.name === definition.name, + ); + const preserved = new Set(); + const reset = new Set(); + for (const [key, previous] of entries) { + const snapshot = previous.snapshot() as Record; + await previous.dispose(); + const freshShared = definition.createSharedState(); + const freshRuntime = + this.runtime === "client" + ? (definition.createClientState?.() ?? {}) + : (definition.createServerState?.() ?? {}); + const nextShape = { ...freshShared, ...freshRuntime } as Record; + const compatible: Record = {}; + for (const [name, value] of Object.entries(snapshot)) { + if (!(name in nextShape)) continue; + const expected = nextShape[name]; + const same = + expected === null || value === null + ? expected === value || expected === null + : Array.isArray(expected) + ? Array.isArray(value) + : typeof expected === typeof value; + if (same) { + compatible[name] = value; + preserved.add(name); + } else reset.add(name); + } + for (const name of Object.keys(nextShape)) + if (!(name in compatible) && name in snapshot) reset.add(name); + const instance = createStoreInstance(definition, { + runtime: this.runtime, + request: this.request, + routeId: this.routeId, + hydration: compatible, + onMutation: (mutation) => { + this.lastMutations.set(definition.name, mutation); + this.onMutation?.(mutation); + }, + }); + this.instances.set(key, instance); + await instance.whenReady; + } + return { preserved: [...preserved], reset: [...reset] }; + } + + async disposePageStores(): Promise { + for (const [key, instance] of [...this.instances]) { + if (instance.kind !== "page") continue; + await instance.dispose(); + this.instances.delete(key); + } + } + + async dispose(): Promise { + for (const instance of this.instances.values()) await instance.dispose(); + this.instances.clear(); + } +} + +export function createStoreContainer(options: StoreContainerOptions): StoreContainer { + return new StoreContainer(options); +} + +export function createStoreInstance< + S extends object, + C extends object, + A extends Record, + CS extends object, + SS extends object, +>( + definition: StoreDefinition, + options: Omit & { hydration?: unknown }, +): StoreInstance, C, A> { + type State = StoreCombinedState; + const createInitialState = (): State => + ({ + ...definition.createSharedState(), + ...(options.runtime === "client" + ? definition.createClientState?.() + : definition.createServerState?.()), + }) as State; + const initial = createInitialState(); + const persisted = + options.runtime === "client" && definition.persist + ? readPersisted(`wrnexus:store:${definition.name}`, definition.persist) + : null; + const hydrated = + options.hydration && typeof options.hydration === "object" + ? (options.hydration as Partial) + : null; + const raw = Object.assign(initial, persisted ?? {}, hydrated ?? {}); + const listeners = new Set<(snapshot: Readonly, mutation?: StoreMutation) => void>(); + let currentAction = "direct"; + let internalMutation = false; + + const mutableState = new Proxy(raw, { + set(target, property, value) { + if (!internalMutation) { + throw new TypeError( + `WRN-STORE-READONLY: ${definition.name}.${String(property)} must be changed by a store action.`, + ); + } + if (Object.is(Reflect.get(target, property), value)) return true; + const before = readonlySnapshot(target); + Reflect.set(target, property, value); + const after = readonlySnapshot(target); + const mutation: StoreMutation = { + store: definition.name, + action: currentAction, + changed: [String(property)], + before: before as Readonly>, + after: after as Readonly>, + timestamp: Date.now(), + }; + if (definition.persist && options.runtime === "client") { + writePersisted(`wrnexus:store:${definition.name}`, target, definition.persist); + } + options.onMutation?.(mutation); + for (const listener of listeners) listener(after, mutation); + return true; + }, + deleteProperty(target, property) { + if (!internalMutation) { + throw new TypeError( + `WRN-STORE-READONLY: ${definition.name}.${String(property)} must be changed by a store action.`, + ); + } + return Reflect.deleteProperty(target, property); + }, + }); + + const publicState = new Proxy({} as State, { + get(_target, property) { + return (mutableState as any)[property]; + }, + set(_target, property) { + throw new TypeError( + `WRN-STORE-READONLY: ${definition.name}.${String(property)} must be changed by a store action.`, + ); + }, + deleteProperty(_target, property) { + throw new TypeError( + `WRN-STORE-READONLY: ${definition.name}.${String(property)} must be changed by a store action.`, + ); + }, + ownKeys() { + return Reflect.ownKeys(mutableState); + }, + getOwnPropertyDescriptor(_target, property) { + if (!(property in mutableState)) return undefined; + return { + enumerable: true, + configurable: true, + value: (mutableState as any)[property], + writable: false, + }; + }, + has(_target, property) { + return property in mutableState; + }, + }); + + const mutate = (action: string, callback: () => T): T => { + const previousAction = currentAction; + const previousMutation = internalMutation; + currentAction = action; + internalMutation = true; + try { + return callback(); + } finally { + currentAction = previousAction; + internalMutation = previousMutation; + } + }; + + const reset = () => + mutate("$reset", () => { + const next = createInitialState(); + for (const key of Object.keys(mutableState)) { + if (!(key in next)) delete (mutableState as any)[key]; + } + Object.assign(mutableState, next); + }); + + const context: StoreActionContext = { + state: mutableState, + snapshot: () => readonlySnapshot(mutableState), + reset, + runtime: options.runtime, + request: options.request, + routeId: options.routeId, + }; + + const actions = {} as A; + for (const [name, rawDefinitions] of Object.entries(definition.actions ?? {})) { + const definitions = Array.isArray(rawDefinitions) ? rawDefinitions : [rawDefinitions]; + const selected = + definitions.find((entry) => entry.runtime === options.runtime) ?? + definitions.find((entry) => entry.runtime === "shared") ?? + definitions.find((entry) => entry.runtime === "legacy"); + if (!selected) continue; + (actions as any)[name] = async (...args: unknown[]) => { + currentAction = name; + internalMutation = true; + try { + return await (selected.handler as any)(context, ...args); + } finally { + currentAction = "direct"; + internalMutation = false; + } + }; + } + + const computed = new Proxy({} as C, { + get(_target, property) { + const fn = definition.computed?.[property as keyof C]; + return fn ? fn(publicState) : undefined; + }, + set() { + throw new TypeError("Computed store values are readonly"); + }, + ownKeys() { + return Reflect.ownKeys(definition.computed ?? {}); + }, + getOwnPropertyDescriptor() { + return { enumerable: true, configurable: true }; + }, + }); + + const lifecycleContext = { + state: mutableState, + runtime: options.runtime, + request: options.request, + routeId: options.routeId, + }; + const runLifecycle = async ( + name: string, + hook?: (context: typeof lifecycleContext) => void | Promise, + ): Promise => { + if (!hook) return; + const previousAction = currentAction; + const previousMutation = internalMutation; + currentAction = name; + internalMutation = true; + try { + await hook(lifecycleContext); + } finally { + currentAction = previousAction; + internalMutation = previousMutation; + } + }; + const initHook = + options.runtime === "server" + ? definition.lifecycle?.serverInit + : definition.lifecycle?.clientInit; + const ready = runLifecycle( + options.runtime === "server" ? "$serverInit" : "$clientInit", + initHook, + ).then(async () => { + if (options.runtime === "client" && options.hydration && definition.lifecycle?.hydrate) { + await runLifecycle("$hydrate", definition.lifecycle.hydrate); + } + }); + + const core: StoreInstanceCore = { + name: definition.name, + kind: definition.kind, + state: publicState, + computed, + actions, + whenReady: ready, + reset, + snapshot: () => readonlySnapshot(mutableState), + hydrate(value) { + mutate("$hydrate", () => Object.assign(mutableState, value)); + }, + serialize() { + const result: Partial = {}; + const serverKeys = new Set(Object.keys(definition.createServerState?.() ?? {})); + for (const [key, value] of Object.entries(mutableState)) { + if (!serverKeys.has(key)) (result as any)[key] = clone(value); + } + return result; + }, + subscribe(listener) { + listeners.add(listener); + return () => listeners.delete(listener); + }, + async dispose() { + await ready; + await runLifecycle("$dispose", definition.lifecycle?.dispose); + listeners.clear(); + }, + }; + + return new Proxy(core as StoreInstance, { + get(target, property, receiver) { + if (Reflect.has(target, property)) return Reflect.get(target, property, receiver); + if (property in actions) return (actions as any)[property]; + if (property in (definition.computed ?? {})) return (computed as any)[property]; + if (property in mutableState) return (publicState as any)[property]; + return undefined; + }, + set(_target, property) { + throw new TypeError( + `WRN-STORE-READONLY: ${definition.name}.${String(property)} must be changed by a store action.`, + ); + }, + ownKeys(target) { + return [ + ...new Set([ + ...Reflect.ownKeys(target), + ...Reflect.ownKeys(mutableState), + ...Reflect.ownKeys(definition.computed ?? {}), + ...Reflect.ownKeys(actions), + ]), + ]; + }, + getOwnPropertyDescriptor(target, property) { + return ( + Reflect.getOwnPropertyDescriptor(target, property) ?? { + enumerable: true, + configurable: true, + } + ); + }, + }); +} diff --git a/packages/store/src/server.ts b/packages/store/src/server.ts new file mode 100644 index 00000000..3ca76089 --- /dev/null +++ b/packages/store/src/server.ts @@ -0,0 +1,9 @@ +import { createStoreContainer, type StoreContainerOptions } from "./index.ts"; + +export function createRequestStoreContainer( + request: unknown, + routeId?: string, + options: Omit = {}, +) { + return createStoreContainer({ ...options, runtime: "server", request, routeId }); +} diff --git a/packages/store/src/types.ts b/packages/store/src/types.ts new file mode 100644 index 00000000..cb9f3d1b --- /dev/null +++ b/packages/store/src/types.ts @@ -0,0 +1,111 @@ +export type StoreKind = "global" | "page"; +export type StoreRuntime = "shared" | "client" | "server" | "legacy"; +export type PersistenceStorage = "memory" | "session" | "local"; +export type StoreFunction = (...args: any[]) => any; + +export type StoreCombinedState< + S extends object, + CS extends object = Record, + SS extends object = Record, +> = S & Partial & Partial; + +export interface StorePersistenceConfig { + storage: PersistenceStorage; + include: Array; + version: number; + migrate?: (value: unknown, fromVersion: number, toVersion: number) => Partial; + validate?: (value: unknown) => Partial | null; +} + +export interface StoreLifecycleContext { + state: S; + runtime: "server" | "client"; + request?: unknown; + routeId?: string; +} + +export interface StoreActionDefinition { + runtime: StoreRuntime; + handler: (context: StoreActionContext, ...args: Parameters) => ReturnType; +} + +export interface StoreDefinition< + S extends object, + C extends object = Record, + A extends Record = Record, + CS extends object = Record, + SS extends object = Record, +> { + name: string; + kind: StoreKind; + createSharedState: () => S; + createClientState?: () => CS; + createServerState?: () => SS; + computed?: { + [K in keyof C]: (state: Readonly>) => C[K]; + }; + actions?: { + [K in keyof A]: + | StoreActionDefinition, A[K]> + | Array, A[K]>>; + }; + persist?: StorePersistenceConfig>; + lifecycle?: { + serverInit?: ( + context: StoreLifecycleContext>, + ) => void | Promise; + clientInit?: ( + context: StoreLifecycleContext>, + ) => void | Promise; + hydrate?: ( + context: StoreLifecycleContext>, + ) => void | Promise; + dispose?: ( + context: StoreLifecycleContext>, + ) => void | Promise; + }; +} + +export interface StoreActionContext { + state: S; + snapshot(): Readonly; + reset(): void; + runtime: "server" | "client"; + request?: unknown; + routeId?: string; +} + +export interface StoreMutation { + store: string; + action: string; + changed: string[]; + before: Readonly>; + after: Readonly>; + timestamp: number; +} + +export interface StoreInstanceCore< + S extends object, + C extends object, + A extends Record, +> { + readonly name: string; + readonly kind: StoreKind; + readonly state: Readonly; + readonly computed: Readonly; + readonly actions: A; + /** Internal initialization promise. `whenReady` avoids colliding with store state named `ready`. */ + readonly whenReady: Promise; + reset(): void; + snapshot(): Readonly; + hydrate(value: Partial): void; + serialize(): Partial; + subscribe(listener: (snapshot: Readonly, mutation?: StoreMutation) => void): () => void; + dispose(): Promise; +} + +export type StoreInstance< + S extends object, + C extends object, + A extends Record, +> = StoreInstanceCore & Readonly & Readonly & A; diff --git a/packages/store/test/store.test.ts b/packages/store/test/store.test.ts new file mode 100644 index 00000000..621d16c7 --- /dev/null +++ b/packages/store/test/store.test.ts @@ -0,0 +1,88 @@ +import { expect, test } from "bun:test"; +import { createStoreContainer, defineStore } from "../src/index.ts"; + +const CounterStore = defineStore({ + name: "CounterStore", + kind: "global" as const, + createSharedState: () => ({ count: 0 }), + createClientState: () => ({ viewport: 0 }), + createServerState: () => ({ secret: "server-only" }), + computed: { doubled: (state: Readonly<{ count: number }>) => state.count * 2 }, + actions: { + increment: [ + { + runtime: "client" as const, + handler: ({ state }: any, amount = 1) => { + state.count += amount; + }, + }, + { + runtime: "server" as const, + handler: ({ state }: any, amount = 1) => { + state.count += amount * 2; + }, + }, + ], + }, +}); + +test("isolates request-scoped server stores and excludes server state", async () => { + const first = createStoreContainer({ runtime: "server", request: {} }); + const second = createStoreContainer({ runtime: "server", request: {} }); + const a = await first.use(CounterStore); + const b = await second.use(CounterStore); + await a.increment(2); + expect(a.count).toBe(4); + expect(a.doubled).toBe(8); + expect(b.count).toBe(0); + expect(first.serialize()).toEqual({ CounterStore: { count: 4 } }); +}); + +test("store state is readonly outside actions and supports snapshots/reset", async () => { + const container = createStoreContainer({ runtime: "client" }); + const store = await container.use(CounterStore); + expect(() => { + (store.state as any).count = 5; + }).toThrow("WRN-STORE-READONLY"); + await store.increment(3); + expect(store.snapshot().count).toBe(3); + store.reset(); + expect(store.count).toBe(0); +}); + +test("HMR preserves compatible state and resets incompatible fields", async () => { + const container = createStoreContainer({ runtime: "client" }); + const store = await container.use(CounterStore); + await store.increment(2); + const result = await container.hotUpdate( + defineStore({ + ...CounterStore, + createSharedState: () => ({ count: 0, added: true }), + } as any), + ); + expect(result.preserved).toContain("count"); +}); + +test("store lifecycle hooks may update state and page stores dispose cleanly", async () => { + const calls: string[] = []; + const LifecycleStore = defineStore({ + name: "LifecycleStore", + kind: "page" as const, + createSharedState: () => ({ ready: false }), + lifecycle: { + clientInit: async ({ state }: any) => { + calls.push("clientInit"); + state.ready = true; + }, + dispose: async ({ state }: any) => { + calls.push("dispose"); + state.ready = false; + }, + }, + }); + const container = createStoreContainer({ runtime: "client", routeId: "/one" }); + const store = await container.use(LifecycleStore); + expect(store.ready).toBe(true); + await container.disposePageStores(); + expect(calls).toEqual(["clientInit", "dispose"]); +}); diff --git a/packages/styles/package.json b/packages/styles/package.json index 46354714..a1999d1a 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/styles", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/styles/src/config.ts b/packages/styles/src/config.ts index 052cfb90..3f5eb9be 100644 --- a/packages/styles/src/config.ts +++ b/packages/styles/src/config.ts @@ -191,9 +191,51 @@ export interface NavigationConfig { mode?: "client" | "document"; } +export interface ImportsConfig { + mode?: "legacy" | "compatible" | "explicit"; + autoImport?: boolean; + aliases?: Record; +} + +export interface TypesConfig { + strict?: boolean; + noImplicitAny?: boolean; + strictNullChecks?: boolean; + checkTemplates?: boolean; + checkComponentProps?: boolean; + generateDeclarations?: boolean; + globalTypes?: string; +} + +export interface FunctionsConfig { + legacyDefaultRuntime?: "current" | "client" | "server" | "shared"; +} + +export interface StoresConfig { + strictMutations?: boolean; + persistence?: boolean; +} + +export interface CompatibilityConfig { + legacyEmit?: boolean; + legacyEventProps?: boolean; + legacyComponentDiscovery?: boolean; + stringLayouts?: boolean; +} + export interface AppConfig { /** Compiler/dev/build plugins, resolved in deterministic pre/normal/post order. */ plugins?: PluginInput; + /** WRN v0.6 explicit import and compatibility resolution. */ + imports?: ImportsConfig; + /** TypeScript-backed .wrn type checking and declaration generation. */ + types?: TypesConfig; + /** Legacy function runtime behavior for existing applications. */ + functions?: FunctionsConfig; + /** Typed global/page store behavior. */ + stores?: StoresConfig; + /** Temporary v0.5 syntax compatibility switches. */ + compatibility?: CompatibilityConfig; /** Opt-in APIs that are not yet covered by stable compatibility guarantees. */ experimental?: ExperimentalConfig; /** Route and asset budgets plus build analyzer behavior. */ diff --git a/packages/syntax/package.json b/packages/syntax/package.json index 08ec208a..f845838f 100644 --- a/packages/syntax/package.json +++ b/packages/syntax/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/syntax", - "version": "0.5.14", + "version": "0.6.0", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/syntax/src/diagnostics.ts b/packages/syntax/src/diagnostics.ts index 8b9d3051..a3dc5058 100644 --- a/packages/syntax/src/diagnostics.ts +++ b/packages/syntax/src/diagnostics.ts @@ -22,6 +22,9 @@ export interface WrnDiagnostic { hint?: string; file?: string; position?: WrnSourcePosition; + expected?: string; + received?: string; + related?: Array<{ file?: string; message: string; position?: WrnSourcePosition }>; } export interface DiagnoseOptions { @@ -29,6 +32,95 @@ export interface DiagnoseOptions { accessibility?: boolean; } +function maskJavaScriptTrivia(source: string): string { + let result = ""; + let index = 0; + let quote: "'" | '"' | "`" | null = null; + let lineComment = false; + let blockComment = false; + + while (index < source.length) { + const char = source[index]!; + const next = source[index + 1]; + + if (lineComment) { + if (char === "\n") { + lineComment = false; + result += "\n"; + } else result += " "; + index++; + continue; + } + + if (blockComment) { + if (char === "*" && next === "/") { + result += " "; + index += 2; + blockComment = false; + } else { + result += char === "\n" ? "\n" : " "; + index++; + } + continue; + } + + if (quote) { + if (char === "\\") { + result += " "; + index += Math.min(2, source.length - index); + } else if (char === quote) { + result += " "; + index++; + quote = null; + } else { + result += char === "\n" ? "\n" : " "; + index++; + } + continue; + } + + if (char === "/" && next === "/") { + result += " "; + index += 2; + lineComment = true; + continue; + } + if (char === "/" && next === "*") { + result += " "; + index += 2; + blockComment = true; + continue; + } + if (char === "'" || char === '"' || char === "`") { + quote = char; + result += " "; + index++; + continue; + } + + result += char; + index++; + } + + return result; +} + +export function containsReadonlyPropMutation( + body: string, + propName: string, + parameterNames: Set, +): boolean { + const code = maskJavaScriptTrivia(body); + const escaped = propName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + const operator = String.raw`(?:\+\+|--|(?:\*\*|&&|\|\||\?\?|[+\-*/%&|^])?=(?!=|>))`; + + if (new RegExp(String.raw`\bprops\.${escaped}\s*${operator}`).test(code)) return true; + if (parameterNames.has(propName)) return false; + if (new RegExp(String.raw`\b(?:const|let|var)\s+${escaped}\b`).test(code)) return false; + + return new RegExp(String.raw`(?:^|[^\w$.])${escaped}\s*${operator}`, "m").test(code); +} + export function positionAt(source: string, offset: number): WrnSourcePosition { const safe = Math.max(0, Math.min(offset, source.length)); const before = source.slice(0, safe); @@ -155,6 +247,100 @@ function astDiagnostics(ast: PageAst, options: DiagnoseOptions): WrnDiagnostic[] file: options.file, }); } + + const outputs = new Set(ast.outputs.map((output) => output.name)); + for (const fn of ast.runtimeFunctions) { + for (const call of fn.body.matchAll(/\boutput\.([A-Za-z_$][\w$]*)\s*\(/g)) { + const outputName = call[1]!; + if (fn.runtime === "server") { + diagnostics.push({ + code: "WRN-OUTPUT-SERVER-CALL", + severity: "error", + message: `Server function '${fn.name}' cannot call output.${outputName}().`, + hint: "Return a typed value to the browser and call the output from a client function.", + file: options.file, + }); + } else if (!outputs.has(outputName)) { + diagnostics.push({ + code: "WRN-OUTPUT-UNKNOWN", + severity: "error", + message: `Unknown output '${outputName}' called from '${fn.name}'.`, + hint: `Declare ${outputName}(payload) inside outputs { ... }.`, + file: options.file, + }); + } + } + if (fn.runtime === "client" && /\b(?:process|Bun|Deno|__dirname|require)\b/.test(fn.body)) { + diagnostics.push({ + code: "WRN-CLIENT-SERVER-API", + severity: "error", + message: `Client function '${fn.name}' references a server-only API.`, + hint: "Move that operation into a server function and call it through server.name(...).", + file: options.file, + }); + } + if ( + fn.runtime === "server" && + /\b(?:window|document|localStorage|sessionStorage|navigator)\b/.test(fn.body) + ) { + diagnostics.push({ + code: "WRN-SERVER-BROWSER-API", + severity: "error", + message: `Server function '${fn.name}' references a browser-only API.`, + hint: "Move that code into a client function.", + file: options.file, + }); + } + const parameterNames = new Set(fn.parameters.map((parameter) => parameter.name)); + for (const prop of ast.props) { + if (containsReadonlyPropMutation(fn.body, prop.name, parameterNames)) { + diagnostics.push({ + code: "WRN-PROP-READONLY", + severity: "error", + message: `Function '${fn.name}' attempts to mutate readonly prop '${prop.name}'.`, + hint: "Copy the prop into state before mutating it.", + file: options.file, + }); + } + } + } + for (const state of ast.states) { + if ( + state.runtime === "shared" && + /^(?:new\s+(?:Map|Set|WeakMap|WeakSet)|(?:async\s+)?function\b|.*=>)/.test(state.expr.trim()) + ) { + diagnostics.push({ + code: "WRN-STATE-NON-SERIALIZABLE", + severity: "error", + message: `Shared state '${state.name}' is not safely serializable.`, + hint: "Use JSON-compatible data or move the value into client/server state.", + file: options.file, + }); + } + } + if (ast.persist) { + const stateNames = new Set( + ast.states.filter((state) => state.runtime !== "server").map((state) => state.name), + ); + for (const name of ast.persist.include) + if (!stateNames.has(name)) + diagnostics.push({ + code: "WRN-PERSIST-UNKNOWN-FIELD", + severity: "error", + message: `Persist include references unknown or server-only state '${name}'.`, + hint: "Persist only declared shared/client state fields.", + file: options.file, + }); + for (const name of ast.persist.include) + if (/token|password|secret|otp|api.?key/i.test(name)) + diagnostics.push({ + code: "WRN-PERSIST-SENSITIVE", + severity: "error", + message: `Sensitive field '${name}' cannot be persisted.`, + hint: "Remove secrets, tokens, passwords, OTPs, and API keys from persistence.", + file: options.file, + }); + } return diagnostics; } diff --git a/packages/syntax/src/index.ts b/packages/syntax/src/index.ts index fe0b115c..36cb6af4 100644 --- a/packages/syntax/src/index.ts +++ b/packages/syntax/src/index.ts @@ -31,6 +31,7 @@ export type { RuntimeType } from "./types.ts"; export { assertValidAst, classifyParseError, + containsReadonlyPropMutation, diagnose, diagnosticFromError, formatDiagnostic, @@ -54,3 +55,25 @@ export { supportsSyntaxFeature, } from "./versioning.ts"; export type { SourceRange, WrnSyntaxFeature } from "./versioning.ts"; + +export { + parseComputedDeclarations, + parseOutputs, + parsePersist, + parseRuntimeFunctions, + parseStateDeclarations, + parseStoreLifecycle, + parseStructuredImports, + stripRuntimeFunctionModifiers, +} from "./v060.ts"; +export type { + FunctionParameterDecl, + FunctionRuntime, + OutputDecl, + PersistDecl, + RuntimeFunctionDecl, + StateRuntime, + StoreKind, + StoreLifecycleDecl, + StructuredImportDecl, +} from "./v060.ts"; diff --git a/packages/syntax/src/parser.ts b/packages/syntax/src/parser.ts index 3ce71897..47f1e540 100644 --- a/packages/syntax/src/parser.ts +++ b/packages/syntax/src/parser.ts @@ -24,9 +24,27 @@ import { Lexer, LexError, type Token } from "./tokenizer.ts"; import { validateTypedInitializer } from "./types.ts"; +import { + parseComputedDeclarations, + parseOutputs, + parsePersist, + parseRuntimeFunctions, + parseStateDeclarations, + parseStoreLifecycle, + parseStructuredImports, + type OutputDecl, + type PersistDecl, + type RuntimeFunctionDecl, + type StateRuntime, + type StoreKind, + type StoreLifecycleDecl, + type StructuredImportDecl, +} from "./v060.ts"; export interface StateDecl { name: string; + /** Runtime visibility. Legacy declarations are shared. */ + runtime: StateRuntime; /** Explicit TypeScript-style type annotation, when supplied. */ valueType?: string; /** Raw JS initializer expression, e.g. `0` or `'x'`. */ @@ -35,6 +53,7 @@ export interface StateDecl { export interface ComputedDecl { name: string; + valueType?: string; expr: string; } @@ -166,7 +185,7 @@ export interface PropDecl { } export interface EventDecl { - /** Public event name used by consumers as `@name="handler(event)"`. */ + /** Legacy public event declaration retained for compatibility. */ name: string; } @@ -174,22 +193,27 @@ export interface PageAst { type: "page"; /** Static ES module imports declared before the WRN root declaration. */ imports: string[]; + structuredImports: StructuredImportDecl[]; /** * `page` is a route, `component` is a reusable fragment, * and `layout` is a reusable page wrapper. */ - kind: "page" | "component" | "layout"; + kind: "page" | "component" | "layout" | "global-store" | "page-store"; + storeKind?: StoreKind; name: string; /** Name of the page layout (`app/layouts/.wrn`), if the page sets one. */ layout?: string; + layoutIsSymbol?: boolean; /** Execution boundary metadata. Defaults to universal. */ runtime?: "server" | "client" | "universal"; /** Client hydration strategy. Defaults to load when interactivity is present. */ hydrate?: string; /** Declared component props (empty for pages). */ props: PropDecl[]; - /** Public events exposed by a reusable component. */ + /** Legacy public events exposed by a reusable component. */ events: EventDecl[]; + /** Canonical typed callable outputs. */ + outputs: OutputDecl[]; /** Raw declarations from `types { ... }`, emitted as TypeScript. */ types: string[]; states: StateDecl[]; @@ -202,9 +226,12 @@ export interface PageAst { view: ViewNode[]; styles: string[]; functions: string[]; + runtimeFunctions: RuntimeFunctionDecl[]; dataApis: DataApiBlock[]; modeFunctions: ModeFunctionsBlock[]; lifecycle: LifecycleBlock; + storeLifecycle: StoreLifecycleDecl; + persist?: PersistDecl; watches: WatchBlock[]; apis: ApiBlock[]; realtimes: RealtimeBlock[]; @@ -277,26 +304,49 @@ export function parse(source: string): PageAst { }; try { - // A file may contain a page, reusable component, or reusable layout. + // A file may contain a page, component, layout, global store, or page store. const opener = lx.next(); - - if (opener.type !== "ident" || !["page", "component", "layout"].includes(opener.value)) { + if ( + opener.type !== "ident" || + !["page", "component", "layout", "global"].includes(opener.value) + ) { throw new ParseError( - `Expected 'page', 'component', or 'layout' but got '${ + `Expected 'page', 'component', 'layout', 'global store', or 'page store' but got '${ opener.value || opener.type }' at offset ${opener.pos}`, ); } - const kind = opener.value as "page" | "component" | "layout"; - const name = expect("ident").value; + let kind: PageAst["kind"]; + let storeKind: StoreKind | undefined; + let name: string; + if (opener.value === "global") { + expectKeyword("store"); + kind = "global-store"; + storeKind = "global"; + name = expect("ident").value; + } else if ( + opener.value === "page" && + lx.peek().type === "ident" && + lx.peek().value === "store" + ) { + lx.next(); + kind = "page-store"; + storeKind = "page"; + name = expect("ident").value; + } else { + kind = opener.value as "page" | "component" | "layout"; + name = expect("ident").value; + } expect("lbrace"); let layout: string | undefined; + let layoutIsSymbol = false; let runtime: PageAst["runtime"]; let hydrate: string | undefined; const props: PropDecl[] = []; const events: EventDecl[] = []; + const outputs: OutputDecl[] = []; const types: string[] = []; const states: StateDecl[] = []; const computed: ComputedDecl[] = []; @@ -308,9 +358,12 @@ export function parse(source: string): PageAst { const view: ViewNode[] = []; const styles: string[] = []; const functions: string[] = []; + const runtimeFunctions: RuntimeFunctionDecl[] = []; const dataApis: DataApiBlock[] = []; const modeFunctions: ModeFunctionsBlock[] = []; const lifecycle: LifecycleBlock = {}; + let storeLifecycle: StoreLifecycleDecl = {}; + let persist: PersistDecl | undefined; const watches: WatchBlock[] = []; const apis: ApiBlock[] = []; const realtimes: RealtimeBlock[] = []; @@ -326,7 +379,14 @@ export function parse(source: string): PageAst { // layout = "public" — selects app/layouts/.wrn for this page. lx.next(); expect("eq"); - layout = expect("string").value; + const layoutToken = lx.next(); + if (layoutToken.type !== "string" && layoutToken.type !== "ident") { + throw new ParseError( + `Expected a layout string or imported symbol at offset ${layoutToken.pos}`, + ); + } + layout = layoutToken.value; + layoutIsSymbol = layoutToken.type === "ident"; break; } case "runtime": { @@ -378,6 +438,7 @@ export function parse(source: string): PageAst { throw new ParseError(`Expected a prop name at offset ${t.pos}`); } const pName = expect("ident").value; + const optional = lx.peek().type === "question" ? (lx.next(), true) : false; let valueType: string | undefined; let hasDefault = false; if (lx.peek().type === "colon") { @@ -390,43 +451,70 @@ export function parse(source: string): PageAst { hasDefault = true; } const defaultValue = hasDefault ? lx.readPropInitializer() : "undefined"; - props.push({ name: pName, valueType, required: !hasDefault, default: defaultValue }); + props.push({ + name: pName, + valueType, + required: !hasDefault && !optional, + default: defaultValue, + }); } expect("rbrace"); break; } case "state": { lx.next(); + if (lx.peek().type === "lbrace") { + const grouped = parseStateDeclarations(lx.readBalancedBraces(), "shared"); + states.push(...grouped); + break; + } const sName = expect("ident").value; let valueType: string | undefined; if (lx.peek().type === "colon") { lx.next(); const annotation = lx.readTypeAnnotation(); valueType = annotation.type; - if (!annotation.hasDefault) { + if (!annotation.hasDefault) throw new ParseError(`State '${sName}' requires an initializer`); - } } else { expect("eq"); } - // State values may be multiline structured expressions. Use the same - // balanced initializer reader as props so formatted arrays/objects - // remain one declaration instead of exposing their inner braces as - // component members on the next line. - states.push({ name: sName, valueType, expr: lx.readPropInitializer() }); + states.push({ + name: sName, + valueType, + expr: lx.readPropInitializer(), + runtime: "shared", + }); break; } case "computed": { lx.next(); - expect("lbrace"); - while (lx.peek().type !== "rbrace") { - const t = lx.peek(); - if (t.type === "eof") throw new ParseError("Unexpected end of input inside computed"); - const name = expect("ident").value; - expect("eq"); - computed.push({ name, expr: lx.readPropInitializer() }); + if (lx.peek().type === "lbrace") { + computed.push(...parseComputedDeclarations(lx.readBalancedBraces())); + } else { + const cName = expect("ident").value; + let valueType: string | undefined; + if (lx.peek().type === "colon") { + lx.next(); + const annotation = lx.readTypeAnnotation(); + valueType = annotation.type; + if (!annotation.hasDefault) + throw new ParseError(`Computed '${cName}' requires an expression`); + } else expect("eq"); + computed.push({ name: cName, valueType, expr: lx.readPropInitializer() }); + } + break; + } + case "outputs": { + lx.next(); + try { + outputs.push(...parseOutputs(lx.readBalancedBraces())); + } catch (error) { + throw new ParseError( + error instanceof Error ? error.message : String(error), + "WRN-OUTPUT-DECLARATION", + ); } - expect("rbrace"); break; } case "effect": { @@ -496,9 +584,24 @@ export function parse(source: string): PageAst { break; } case "ssr": - case "client": { - const mode: DataMode = kw.value === "ssr" ? "ssr" : "client"; + case "client": + case "server": { + const rawMode = kw.value; + const mode: DataMode = rawMode === "client" ? "client" : "ssr"; lx.next(); + if ( + (rawMode === "client" || rawMode === "server") && + lx.peek().type === "ident" && + lx.peek().value === "state" + ) { + lx.next(); + if (lx.peek().type !== "lbrace") + throw new ParseError(`Expected a grouped ${rawMode} state block`); + states.push( + ...parseStateDeclarations(lx.readBalancedBraces(), rawMode as StateRuntime), + ); + break; + } if (mode === "client" && lx.peek().type === "eq") { lx.next(); hydrate = expect("string").value; @@ -537,6 +640,14 @@ export function parse(source: string): PageAst { expect("rbrace"); break; } + case "shared": { + lx.next(); + const member = expect("ident"); + if (member.value !== "state") + throw new ParseError(`Expected 'state' after shared at offset ${member.pos}`); + states.push(...parseStateDeclarations(lx.readBalancedBraces(), "shared")); + break; + } case "realtime": { lx.next(); const rName = expect("ident").value; @@ -565,35 +676,51 @@ export function parse(source: string): PageAst { } case "lifecycle": { lx.next(); - expect("lbrace"); - - while (lx.peek().type !== "rbrace") { - const hook = lx.peek(); - - if (hook.type === "eof") { - throw new ParseError("Unexpected end of input inside lifecycle block"); + const body = lx.readBalancedBraces(); + if (kind === "global-store" || kind === "page-store") { + storeLifecycle = parseStoreLifecycle(body); + const allowedStoreHooks = new Set(["serverInit", "clientInit", "hydrate", "dispose"]); + const hookLexer = new Lexer(body); + while (hookLexer.peek().type !== "eof") { + const token = hookLexer.next(); + if (token.type !== "ident") { + throw new ParseError(`Expected a lifecycle hook at offset ${token.pos}`); + } + if (!allowedStoreHooks.has(token.value)) { + throw new ParseError(`Unknown store lifecycle hook '${token.value}'`); + } + hookLexer.readBalancedBraces(); } - - if (hook.type !== "ident") { - throw new ParseError(`Expected a lifecycle hook at offset ${hook.pos}`); + } else { + const allowedComponentHooks = new Set([ + "mount", + "update", + "unmount", + "clientInit", + "dispose", + ]); + const hookLexer = new Lexer(body); + while (hookLexer.peek().type !== "eof") { + const token = hookLexer.next(); + if (token.type !== "ident") { + throw new ParseError(`Expected a lifecycle hook at offset ${token.pos}`); + } + if (!allowedComponentHooks.has(token.value)) { + throw new ParseError(`Unknown lifecycle hook '${token.value}'`); + } + const hookBody = hookLexer.readBalancedBraces(); + const hook = + token.value === "clientInit" + ? "mount" + : token.value === "dispose" + ? "unmount" + : (token.value as LifecycleHookName); + if (lifecycle[hook] !== undefined) { + throw new ParseError(`Duplicate lifecycle hook '${hook}'`); + } + lifecycle[hook] = hookBody; } - - if (hook.value !== "mount" && hook.value !== "update" && hook.value !== "unmount") { - throw new ParseError(`Unknown lifecycle hook '${hook.value}' at offset ${hook.pos}`); - } - - const hookName = hook.value as LifecycleHookName; - - lx.next(); - - if (lifecycle[hookName] !== undefined) { - throw new ParseError(`Duplicate lifecycle hook '${hookName}' at offset ${hook.pos}`); - } - - lifecycle[hookName] = lx.readBalancedBraces(); } - - expect("rbrace"); break; } case "watch": { @@ -611,7 +738,21 @@ export function parse(source: string): PageAst { } case "functions": { lx.next(); - functions.push(lx.readBalancedBraces()); + const body = lx.readBalancedBraces(); + functions.push(body); + try { + runtimeFunctions.push(...parseRuntimeFunctions(body)); + } catch (error) { + throw new ParseError( + error instanceof Error ? error.message : String(error), + "WRN-FUNCTION-DECLARATION", + ); + } + break; + } + case "persist": { + lx.next(); + persist = parsePersist(lx.readBalancedBraces()); break; } default: @@ -649,16 +790,36 @@ export function parse(source: string): PageAst { symbols.add(declaration.name); } + const outputNames = new Set(); + for (const output of outputs) { + if (outputNames.has(output.name)) + throw new ParseError(`Duplicate output '${output.name}'`, "WRN-OUTPUT-DUPLICATE"); + outputNames.add(output.name); + } + const functionKeys = new Set(); + for (const fn of runtimeFunctions) { + const key = `${fn.runtime}:${fn.name}`; + if (functionKeys.has(key)) + throw new ParseError( + `Duplicate ${fn.runtime} function '${fn.name}'`, + "WRN-FUNCTION-DUPLICATE", + ); + functionKeys.add(key); + } return { type: "page", imports, + structuredImports: parseStructuredImports(imports), kind, + storeKind, name, layout, + layoutIsSymbol, runtime, hydrate, props, events, + outputs, types, states, computed, @@ -670,9 +831,12 @@ export function parse(source: string): PageAst { view, styles, functions, + runtimeFunctions, dataApis, modeFunctions, lifecycle, + storeLifecycle, + persist, watches, apis, realtimes, diff --git a/packages/syntax/src/spec.ts b/packages/syntax/src/spec.ts index 3ad97f82..fc241700 100644 --- a/packages/syntax/src/spec.ts +++ b/packages/syntax/src/spec.ts @@ -1,7 +1,13 @@ /** Canonical, machine-readable WRN language capabilities. */ -export const WRN_LANGUAGE_VERSION = "1.0"; +export const WRN_LANGUAGE_VERSION = "0.6"; -export const WRN_ROOT_KINDS = ["page", "component", "layout"] as const; +export const WRN_ROOT_KINDS = [ + "page", + "component", + "layout", + "global-store", + "page-store", +] as const; export const WRN_ROOT_MEMBERS = [ "layout", "runtime", @@ -9,7 +15,10 @@ export const WRN_ROOT_MEMBERS = [ "client", "types", "props", + "outputs", "state", + "shared", + "server", "computed", "effect", "watch", @@ -24,6 +33,7 @@ export const WRN_ROOT_MEMBERS = [ "realtime", "style", "functions", + "persist", ] as const; export const WRN_HYDRATION_STRATEGIES = ["load", "idle", "visible", "interaction", "none"] as const; @@ -47,4 +57,18 @@ export const WRN_DIAGNOSTIC_CODES = { invalidRuntime: "WRN-RUNTIME-TARGET", serverInteractive: "WRN-RUNTIME-SERVER-INTERACTIVE", accessibility: "WRN-A11Y-001", + import: "WRN-IMPORT-001", + function: "WRN-FUNCTION-001", + client: "WRN-CLIENT-001", + server: "WRN-SERVER-001", + output: "WRN-OUTPUT-001", + type: "WRN-TYPE-001", + state: "WRN-STATE-001", + component: "WRN-COMPONENT-001", + template: "WRN-TEMPLATE-001", + store: "WRN-STORE-001", + persist: "WRN-PERSIST-001", + rpc: "WRN-RPC-001", + hydration: "WRN-HYDRATION-001", + migration: "WRN-MIGRATION-001", } as const; diff --git a/packages/syntax/src/tokenizer.ts b/packages/syntax/src/tokenizer.ts index e1fea53e..6d6cbd53 100644 --- a/packages/syntax/src/tokenizer.ts +++ b/packages/syntax/src/tokenizer.ts @@ -19,6 +19,7 @@ export type TokenType = | "eq" | "colon" | "comma" + | "question" | "eof"; export interface Token { @@ -87,6 +88,9 @@ export class Lexer { case ",": this.pos++; return { type: "comma", value: c, pos }; + case "?": + this.pos++; + return { type: "question", value: c, pos }; case '"': case "'": return this.readString(c, pos); @@ -243,6 +247,7 @@ export class Lexer { this.pos++; continue; } + if (c === "}" && angle === 0 && square === 0 && brace === 0 && paren === 0) break; if (c === "<") angle++; else if (c === ">" && angle > 0) angle--; else if (c === "[") square++; @@ -253,6 +258,11 @@ export class Lexer { else if (c === ")" && paren > 0) paren--; if (angle === 0 && square === 0 && brace === 0 && paren === 0) { + if (c === " " || c === "\t") { + let look = this.pos; + while (look < src.length && (src[look] === " " || src[look] === "\t")) look++; + if (/^[A-Za-z_][A-Za-z0-9_]*\??\s*:/.test(src.slice(look))) break; + } if (c === "=") { this.pos++; const type = value.trim(); diff --git a/packages/syntax/src/v060.ts b/packages/syntax/src/v060.ts new file mode 100644 index 00000000..57dbd47f --- /dev/null +++ b/packages/syntax/src/v060.ts @@ -0,0 +1,460 @@ +import { Lexer, LexError } from "./tokenizer.ts"; + +export type FunctionRuntime = "legacy" | "client" | "server" | "shared"; +export type StateRuntime = "shared" | "client" | "server"; +export type StoreKind = "global" | "page"; + +export interface FunctionParameterDecl { + name: string; + optional: boolean; + valueType?: string; + default?: string; +} + +export interface RuntimeFunctionDecl { + name: string; + runtime: FunctionRuntime; + async: boolean; + parameters: FunctionParameterDecl[]; + returnType?: string; + body: string; + source: string; +} + +export interface OutputDecl { + name: string; + payload?: { + name: string; + valueType: string; + optional: boolean; + }; +} + +export interface StructuredImportDecl { + source: string; + typeOnly: boolean; + defaultImport?: string; + namespaceImport?: string; + namedImports: Array<{ imported: string; local: string; typeOnly: boolean }>; + raw: string; +} + +export interface PersistDecl { + storage: "memory" | "session" | "local"; + include: string[]; + version: number; + migrations?: string; + validation?: string; +} + +export interface StoreLifecycleDecl { + serverInit?: string; + clientInit?: string; + hydrate?: string; + dispose?: string; +} + +function splitTopLevel(input: string, separator = ","): string[] { + const parts: string[] = []; + let start = 0; + let quote: string | null = null; + let angle = 0; + let square = 0; + let brace = 0; + let paren = 0; + for (let i = 0; i < input.length; i++) { + const c = input[i]!; + if (quote) { + if (c === "\\") i++; + else if (c === quote) quote = null; + continue; + } + if (c === '"' || c === "'" || c === "`") { + quote = c; + continue; + } + if (c === "<") angle++; + else if (c === ">" && angle > 0) angle--; + else if (c === "[") square++; + else if (c === "]" && square > 0) square--; + else if (c === "{") brace++; + else if (c === "}" && brace > 0) brace--; + else if (c === "(") paren++; + else if (c === ")" && paren > 0) paren--; + else if (c === separator && angle === 0 && square === 0 && brace === 0 && paren === 0) { + parts.push(input.slice(start, i).trim()); + start = i + 1; + } + } + const tail = input.slice(start).trim(); + if (tail) parts.push(tail); + return parts; +} + +function findTopLevelChar(input: string, wanted: string): number { + let quote: string | null = null; + let angle = 0; + let square = 0; + let brace = 0; + let paren = 0; + for (let i = 0; i < input.length; i++) { + const c = input[i]!; + if (quote) { + if (c === "\\") i++; + else if (c === quote) quote = null; + continue; + } + if (c === '"' || c === "'" || c === "`") { + quote = c; + continue; + } + if (c === "<") angle++; + else if (c === ">" && angle > 0) angle--; + else if (c === "[") square++; + else if (c === "]" && square > 0) square--; + else if (c === "{") brace++; + else if (c === "}" && brace > 0) brace--; + else if (c === "(") paren++; + else if (c === ")" && paren > 0) paren--; + if (c === wanted && angle === 0 && square === 0 && brace === 0 && paren === 0) return i; + } + return -1; +} + +function parseParameters(source: string): FunctionParameterDecl[] { + return splitTopLevel(source) + .filter(Boolean) + .map((entry) => { + const eq = findTopLevelChar(entry, "="); + const declaration = (eq >= 0 ? entry.slice(0, eq) : entry).trim(); + const defaultValue = eq >= 0 ? entry.slice(eq + 1).trim() : undefined; + const colon = findTopLevelChar(declaration, ":"); + const rawName = (colon >= 0 ? declaration.slice(0, colon) : declaration).trim(); + const optional = rawName.endsWith("?"); + const name = optional ? rawName.slice(0, -1).trim() : rawName; + const valueType = colon >= 0 ? declaration.slice(colon + 1).trim() : undefined; + return { + name, + optional, + ...(valueType ? { valueType } : {}), + ...(defaultValue ? { default: defaultValue } : {}), + }; + }); +} + +function skipTrivia(source: string, start: number): number { + let i = start; + while (i < source.length) { + if (/\s/.test(source[i]!)) { + i++; + continue; + } + if (source.startsWith("//", i)) { + const end = source.indexOf("\n", i + 2); + i = end < 0 ? source.length : end + 1; + continue; + } + if (source.startsWith("/*", i)) { + const end = source.indexOf("*/", i + 2); + i = end < 0 ? source.length : end + 2; + continue; + } + break; + } + return i; +} + +function readWord(source: string, start: number): { word: string; end: number } | null { + const match = /^[A-Za-z_$][\w$]*/.exec(source.slice(start)); + return match ? { word: match[0], end: start + match[0].length } : null; +} + +function readBalanced( + source: string, + start: number, + open: string, + close: string, +): { inner: string; end: number } { + if (source[start] !== open) throw new Error(`Expected '${open}' at offset ${start}`); + let depth = 0; + let quote: string | null = null; + for (let i = start; i < source.length; i++) { + const c = source[i]!; + if (quote) { + if (c === "\\") i++; + else if (c === quote) quote = null; + continue; + } + if (c === '"' || c === "'" || c === "`") { + quote = c; + continue; + } + if (c === open) depth++; + else if (c === close && --depth === 0) return { inner: source.slice(start + 1, i), end: i + 1 }; + } + throw new Error(`Unbalanced '${open}${close}' starting at offset ${start}`); +} + +export function parseRuntimeFunctions(source: string): RuntimeFunctionDecl[] { + const declarations: RuntimeFunctionDecl[] = []; + let i = 0; + while (i < source.length) { + i = skipTrivia(source, i); + const start = i; + let token = readWord(source, i); + if (!token) { + i++; + continue; + } + let runtime: FunctionRuntime = "legacy"; + if (["client", "server", "shared"].includes(token.word)) { + runtime = token.word as FunctionRuntime; + i = skipTrivia(source, token.end); + token = readWord(source, i); + if (!token) continue; + } + let isAsync = false; + if (token.word === "async") { + isAsync = true; + i = skipTrivia(source, token.end); + token = readWord(source, i); + if (!token) continue; + } + if (token.word !== "function") { + i = token.end; + continue; + } + i = skipTrivia(source, token.end); + const nameToken = readWord(source, i); + if (!nameToken) throw new Error(`Expected function name at offset ${i}`); + const name = nameToken.word; + i = skipTrivia(source, nameToken.end); + const params = readBalanced(source, i, "(", ")"); + i = skipTrivia(source, params.end); + let returnType: string | undefined; + if (source[i] === ":") { + i++; + const typeStart = i; + let quote: string | null = null; + let angle = 0; + let square = 0; + let paren = 0; + while (i < source.length) { + const c = source[i]!; + if (quote) { + if (c === "\\") i++; + else if (c === quote) quote = null; + i++; + continue; + } + if (c === '"' || c === "'" || c === "`") quote = c; + else if (c === "<") angle++; + else if (c === ">" && angle > 0) angle--; + else if (c === "[") square++; + else if (c === "]" && square > 0) square--; + else if (c === "(") paren++; + else if (c === ")" && paren > 0) paren--; + else if (c === "{" && angle === 0 && square === 0 && paren === 0) break; + i++; + } + returnType = source.slice(typeStart, i).trim(); + } + i = skipTrivia(source, i); + const body = readBalanced(source, i, "{", "}"); + i = body.end; + declarations.push({ + name, + runtime, + async: isAsync, + parameters: parseParameters(params.inner), + ...(returnType ? { returnType } : {}), + body: body.inner, + source: source.slice(start, body.end).trim(), + }); + } + return declarations; +} + +export function stripRuntimeFunctionModifiers(source: string, include: FunctionRuntime[]): string { + const allowed = new Set(include); + return parseRuntimeFunctions(source) + .filter((entry) => allowed.has(entry.runtime)) + .map((entry) => { + const params = entry.parameters + .map( + (param) => + `${param.name}${param.optional ? "?" : ""}${param.valueType ? `: ${param.valueType}` : ""}${param.default ? ` = ${param.default}` : ""}`, + ) + .join(", "); + return `${entry.async ? "async " : ""}function ${entry.name}(${params})${entry.returnType ? `: ${entry.returnType}` : ""} {${entry.body}}`; + }) + .join("\n\n"); +} + +export function parseOutputs(source: string): OutputDecl[] { + const out: OutputDecl[] = []; + let i = 0; + while (i < source.length) { + i = skipTrivia(source, i); + if (i >= source.length) break; + const nameToken = readWord(source, i); + if (!nameToken) throw new Error(`Expected output name at offset ${i}`); + i = skipTrivia(source, nameToken.end); + const args = readBalanced(source, i, "(", ")"); + i = args.end; + const parameters = parseParameters(args.inner); + if (parameters.length > 1) + throw new Error(`Output '${nameToken.word}' accepts zero or one payload`); + const payload = parameters[0]; + if (payload && !payload.valueType) + throw new Error(`Output '${nameToken.word}' payload requires a type`); + out.push({ + name: nameToken.word, + ...(payload + ? { + payload: { + name: payload.name, + valueType: payload.valueType!, + optional: payload.optional, + }, + } + : {}), + }); + } + return out; +} + +export function parseStructuredImports(imports: string[]): StructuredImportDecl[] { + return imports.map((raw) => { + const sourceMatch = /\sfrom\s+["']([^"']+)["']|^import\s+["']([^"']+)["']/.exec(raw); + const source = sourceMatch?.[1] ?? sourceMatch?.[2] ?? ""; + const typeOnly = /^import\s+type\b/.test(raw); + const clause = raw + .replace(/^import\s+(?:type\s+)?/, "") + .replace(/\s+from\s+["'][^"']+["']\s*;?$/, "") + .trim(); + const declaration: StructuredImportDecl = { source, typeOnly, namedImports: [], raw }; + if (!clause || clause.startsWith('"') || clause.startsWith("'")) return declaration; + if (clause.startsWith("*")) { + declaration.namespaceImport = /\*\s+as\s+([A-Za-z_$][\w$]*)/.exec(clause)?.[1]; + return declaration; + } + let rest = clause; + if (!rest.startsWith("{")) { + const comma = findTopLevelChar(rest, ","); + declaration.defaultImport = (comma < 0 ? rest : rest.slice(0, comma)).trim(); + rest = comma < 0 ? "" : rest.slice(comma + 1).trim(); + } + const named = /^\{([\s\S]*)\}$/.exec(rest)?.[1]; + if (named !== undefined) { + declaration.namedImports = splitTopLevel(named).map((item) => { + const localTypeOnly = /^type\s+/.test(item); + const cleaned = item.replace(/^type\s+/, "").trim(); + const [imported, local] = cleaned.split(/\s+as\s+/); + return { + imported: imported!.trim(), + local: (local ?? imported)!.trim(), + typeOnly: typeOnly || localTypeOnly, + }; + }); + } + return declaration; + }); +} + +export function parseStateDeclarations( + source: string, + runtime: StateRuntime, +): Array<{ name: string; valueType?: string; expr: string; runtime: StateRuntime }> { + const lx = new Lexer(source); + const out: Array<{ name: string; valueType?: string; expr: string; runtime: StateRuntime }> = []; + while (lx.peek().type !== "eof") { + const nameToken = lx.next(); + if (nameToken.type !== "ident") + throw new LexError(`Expected a state name at offset ${nameToken.pos}`); + let valueType: string | undefined; + if (lx.peek().type === "colon") { + lx.next(); + const annotation = lx.readTypeAnnotation(); + valueType = annotation.type; + if (!annotation.hasDefault) + throw new LexError(`State '${nameToken.value}' requires an initializer`); + } else { + const eq = lx.next(); + if (eq.type !== "eq") + throw new LexError(`Expected '=' after state '${nameToken.value}' at offset ${eq.pos}`); + } + out.push({ + name: nameToken.value, + ...(valueType ? { valueType } : {}), + expr: lx.readPropInitializer(), + runtime, + }); + } + return out; +} + +export function parseComputedDeclarations( + source: string, +): Array<{ name: string; valueType?: string; expr: string }> { + const lx = new Lexer(source); + const out: Array<{ name: string; valueType?: string; expr: string }> = []; + while (lx.peek().type !== "eof") { + const nameToken = lx.next(); + if (nameToken.type !== "ident") + throw new LexError(`Expected a computed name at offset ${nameToken.pos}`); + let valueType: string | undefined; + if (lx.peek().type === "colon") { + lx.next(); + const annotation = lx.readTypeAnnotation(); + valueType = annotation.type; + if (!annotation.hasDefault) + throw new LexError(`Computed '${nameToken.value}' requires an expression`); + } else { + const eq = lx.next(); + if (eq.type !== "eq") + throw new LexError(`Expected '=' after computed '${nameToken.value}' at offset ${eq.pos}`); + } + out.push({ + name: nameToken.value, + ...(valueType ? { valueType } : {}), + expr: lx.readPropInitializer(), + }); + } + return out; +} + +function nestedBlock(source: string, name: string): string | undefined { + const match = new RegExp(`\\b${name}\\s*\\{`).exec(source); + if (!match) return undefined; + const brace = source.indexOf("{", match.index); + return readBalanced(source, brace, "{", "}").inner.trim() || undefined; +} + +export function parsePersist(source: string): PersistDecl { + const storage = /\bstorage\s*=\s*["'](memory|session|local)["']/.exec(source)?.[1] as + PersistDecl["storage"] | undefined; + const includeRaw = /\binclude\s*=\s*\[([\s\S]*?)\]/.exec(source)?.[1] ?? ""; + const include = Array.from(includeRaw.matchAll(/["']([^"']+)["']/g), (match) => match[1]!); + const version = Number(/\bversion\s*=\s*(\d+)/.exec(source)?.[1] ?? "1"); + const migrations = nestedBlock(source, "migrations"); + const validation = nestedBlock(source, "validate"); + return { + storage: storage ?? "memory", + include, + version, + ...(migrations ? { migrations } : {}), + ...(validation ? { validation } : {}), + }; +} + +export function parseStoreLifecycle(source: string): StoreLifecycleDecl { + const out: StoreLifecycleDecl = {}; + for (const hook of ["serverInit", "clientInit", "hydrate", "dispose"] as const) { + const start = new RegExp(`\\b${hook}\\s*\\{`).exec(source); + if (!start) continue; + const brace = source.indexOf("{", start.index); + out[hook] = readBalanced(source, brace, "{", "}").inner; + } + return out; +} diff --git a/packages/syntax/test/v060.test.ts b/packages/syntax/test/v060.test.ts new file mode 100644 index 00000000..48ec46ae --- /dev/null +++ b/packages/syntax/test/v060.test.ts @@ -0,0 +1,120 @@ +import { expect, test } from "bun:test"; +import { diagnose, parse } from "../src/index.ts"; + +const source = `import type { PublicUser } from "@/types/user.ts" +import PublicLayout from "@/layouts/PublicLayout.wrn" + +component ProfileCard { + props { + user: PublicUser + title?: string + open: boolean = false + size: "small" | "medium" | "large" = "medium" + } + + state query: string = "" + state { + selected: PublicUser | null = null + loading: boolean = false + } + client state { menuOpen: boolean = false } + server state { sessionId: string | null = null } + + computed ready: boolean = selected !== null + computed { label: string = title || user.name } + + outputs { + confirm(payload: PublicUser) + cancel() + } + + functions { + client async function confirmed(payload: PublicUser): Promise { + const result = await server.confirmed(payload) + output.confirm(result) + } + server async function confirmed(payload: PublicUser): Promise { + return payload + } + shared function normalize(value: string): string { + return value.trim() + } + } + + view { } +}`; + +test("parses the WRNexusJS 0.6 language surface", () => { + const ast = parse(source); + expect(ast.structuredImports).toHaveLength(2); + expect(ast.props.map((prop) => [prop.name, prop.required])).toEqual([ + ["user", true], + ["title", false], + ["open", false], + ["size", false], + ]); + expect(ast.states.map((state) => `${state.runtime}:${state.name}`)).toEqual([ + "shared:query", + "shared:selected", + "shared:loading", + "client:menuOpen", + "server:sessionId", + ]); + expect(ast.outputs.map((output) => output.name)).toEqual(["confirm", "cancel"]); + expect(ast.runtimeFunctions.map((fn) => `${fn.runtime}:${fn.name}`)).toEqual([ + "client:confirmed", + "server:confirmed", + "shared:normalize", + ]); +}); + +test("supports global and page store roots", () => { + const globalStore = parse(`global store UserStore { + state { user: string | null = null } + computed { authenticated: boolean = user !== null } + persist { storage = "local" include = ["user"] version = 1 } + lifecycle { serverInit {} clientInit {} hydrate {} dispose {} } + functions { client function clear(): void { user = null } } + }`); + const pageStore = parse(`page store SearchStore { state { query: string = "" } }`); + expect(globalStore.kind).toBe("global-store"); + expect(globalStore.persist?.storage).toBe("local"); + expect(globalStore.storeLifecycle).toEqual( + expect.objectContaining({ serverInit: "", dispose: "" }), + ); + expect(pageStore.kind).toBe("page-store"); +}); + +test("rejects duplicate implementations in the same runtime", () => { + const diagnostics = diagnose(`component Invalid { + functions { + client function save(): void {} + client function save(): void {} + } + view {
} + }`); + expect(diagnostics.some((diagnostic) => diagnostic.code === "WRN-FUNCTION-DUPLICATE")).toBe(true); +}); + +test("readonly prop diagnostics ignore comparisons, strings, and shadowing parameters", () => { + const diagnostics = diagnose(`component Valid { + props { name: string = "field" mode: string = "exact" items: any[] = [] } + functions { + client function inspect(name, localItems) { + if (mode === "exact") localItems = items.filter((item) => item.name === name) + return document.querySelector("input[name='" + name + "']") + } + } + view {
} + }`); + expect(diagnostics.some((diagnostic) => diagnostic.code === "WRN-PROP-READONLY")).toBe(false); +}); + +test("readonly prop diagnostics still reject direct prop assignments", () => { + const diagnostics = diagnose(`component Invalid { + props { open: boolean = false } + functions { client function mutate() { open = true } } + view {
} + }`); + expect(diagnostics.some((diagnostic) => diagnostic.code === "WRN-PROP-READONLY")).toBe(true); +}); diff --git a/packages/test/package.json b/packages/test/package.json index eebd27c4..8951b87b 100644 --- a/packages/test/package.json +++ b/packages/test/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/test", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/tracking/package.json b/packages/tracking/package.json index d9dac6e3..818e0fd0 100644 --- a/packages/tracking/package.json +++ b/packages/tracking/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/tracking", - "version": "0.5.14", + "version": "0.6.0", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/typecheck/package.json b/packages/typecheck/package.json new file mode 100644 index 00000000..c49b83c8 --- /dev/null +++ b/packages/typecheck/package.json @@ -0,0 +1,15 @@ +{ + "name": "@wrnexus/typecheck", + "version": "0.6.0", + "type": "module", + "main": "src/index.ts", + "exports": { + ".": "./src/index.ts", + "./contracts": "./src/contracts.ts", + "./project": "./src/project.ts" + }, + "dependencies": { + "@wrnexus/syntax": "workspace:*", + "typescript": "^5.5.0" + } +} diff --git a/packages/typecheck/src/contracts.ts b/packages/typecheck/src/contracts.ts new file mode 100644 index 00000000..633cf45d --- /dev/null +++ b/packages/typecheck/src/contracts.ts @@ -0,0 +1,50 @@ +import type { PageAst } from "@wrnexus/syntax"; + +function safe(name: string): string { + return /^[A-Za-z_$][\w$]*$/.test(name) ? name : JSON.stringify(name); +} + +export function componentContract(ast: PageAst): string { + const typeSource = ast.types + .map((entry) => entry.trim()) + .filter(Boolean) + .join("\n\n"); + const props = ast.props + .map( + (prop) => + ` readonly ${safe(prop.name)}${prop.required ? "" : "?"}: ${prop.valueType ?? "unknown"};`, + ) + .join("\n"); + const outputs = ast.outputs + .map( + (output) => + ` ${safe(output.name)}(${output.payload ? `${output.payload.name}${output.payload.optional ? "?" : ""}: ${output.payload.valueType}` : ""}): void;`, + ) + .join("\n"); + const callable = ast.runtimeFunctions + .filter((fn) => fn.runtime !== "legacy") + .map( + (fn) => + ` ${safe(fn.name)}(${fn.parameters.map((param) => `${param.name}${param.optional ? "?" : ""}: ${param.valueType ?? "unknown"}`).join(", ")}): ${fn.returnType ?? (fn.async ? "Promise" : "unknown")};`, + ) + .join("\n"); + return `${typeSource ? `${typeSource}\n\n` : ""}export interface ${ast.name}Props {\n${props}\n}\n\nexport interface ${ast.name}Outputs {\n${outputs}\n}\n\nexport interface ${ast.name}Functions {\n${callable}\n}\n\nexport interface ${ast.name}Contract {\n props: ${ast.name}Props;\n outputs: ${ast.name}Outputs;\n functions: ${ast.name}Functions;\n}\n`; +} + +export function storeContract(ast: PageAst): string { + const state = ast.states + .filter((entry) => entry.runtime !== "server") + .map((entry) => ` readonly ${safe(entry.name)}: ${entry.valueType ?? "unknown"};`) + .join("\n"); + const computed = ast.computed + .map((entry) => ` readonly ${safe(entry.name)}: ${entry.valueType ?? "unknown"};`) + .join("\n"); + const actions = ast.runtimeFunctions + .filter((fn) => fn.runtime !== "server") + .map( + (fn) => + ` ${safe(fn.name)}(${fn.parameters.map((param) => `${param.name}${param.optional ? "?" : ""}: ${param.valueType ?? "unknown"}`).join(", ")}): ${fn.returnType ?? (fn.async ? "Promise" : "unknown")};`, + ) + .join("\n"); + return `export interface ${ast.name}State {\n${state}\n}\n\nexport interface ${ast.name}Computed {\n${computed}\n}\n\nexport interface ${ast.name}Actions {\n${actions}\n}\n\nexport interface ${ast.name}Instance extends ${ast.name}State, ${ast.name}Computed, ${ast.name}Actions {\n reset(): void;\n snapshot(): Readonly<${ast.name}State>;\n}\n`; +} diff --git a/packages/typecheck/src/index.ts b/packages/typecheck/src/index.ts new file mode 100644 index 00000000..95c0bf17 --- /dev/null +++ b/packages/typecheck/src/index.ts @@ -0,0 +1,646 @@ +import { existsSync, readFileSync } from "node:fs"; +import { dirname, join, normalize, resolve } from "node:path"; +import ts from "typescript"; +import { + containsReadonlyPropMutation, + inferredRuntimeType, + parse, + runtimeTypeOf, + type PageAst, + type RuntimeFunctionDecl, + type ViewNode, +} from "@wrnexus/syntax"; +import { componentContract, storeContract } from "./contracts.ts"; +import { findAppRoot, loadApplicationTypes } from "./project.ts"; +export { componentContract, storeContract } from "./contracts.ts"; +export { findAppRoot, loadApplicationTypes } from "./project.ts"; + +export interface WrnTypeDiagnostic { + code: string; + category: "error" | "warning" | "info"; + message: string; + file: string; + line: number; + column: number; + length: number; + expected?: string; + received?: string; + hint?: string; + related?: { file: string; line: number; column: number; message: string }; +} + +export interface TypecheckOptions { + filePath?: string; + appRoot?: string; + strict?: boolean; + noImplicitAny?: boolean; + strictNullChecks?: boolean; + checkRuntimeBoundaries?: boolean; +} + +interface SourceMapping { + virtualStartLine: number; + virtualEndLine: number; + sourceStartLine: number; + sourceStartColumn: number; +} + +function resolveImportedWrn(source: string, filePath: string, appRoot: string): string | null { + if (source.startsWith("@/")) return resolve(appRoot, "app", source.slice(2)); + if (source.startsWith(".")) return resolve(dirname(filePath), source); + return null; +} + +function importedWrnDeclarations(ast: PageAst, filePath: string, appRoot: string): string { + const declarations: string[] = []; + for (const entry of ast.structuredImports) { + if (entry.typeOnly || !entry.source.endsWith(".wrn")) continue; + const importedPath = resolveImportedWrn(entry.source, filePath, appRoot); + if (!importedPath || !existsSync(importedPath)) continue; + try { + const importedAst = parse(readFileSync(importedPath, "utf8")); + const isStore = importedAst.kind === "global-store" || importedAst.kind === "page-store"; + declarations.push(isStore ? storeContract(importedAst) : componentContract(importedAst)); + const typeName = isStore ? `${importedAst.name}Instance` : `${importedAst.name}Contract`; + if (entry.defaultImport) + declarations.push(`declare const ${entry.defaultImport}: ${typeName};`); + if (entry.namespaceImport) + declarations.push(`declare const ${entry.namespaceImport}: Record;`); + for (const item of entry.namedImports) { + declarations.push( + `declare const ${item.local}: ${item.imported === importedAst.name ? typeName : "unknown"};`, + ); + } + } catch { + // The parser/import diagnostic layer reports malformed or unresolved .wrn imports. + } + } + return declarations.join("\n\n"); +} + +export interface VirtualTypeScriptModule { + ast: PageAst; + fileName: string; + code: string; + mappings: SourceMapping[]; +} + +function lineAt(source: string, needle: string, occurrence = 0): { line: number; column: number } { + let index = -1; + let from = 0; + for (let count = 0; count <= occurrence; count++) { + index = source.indexOf(needle, from); + if (index < 0) return { line: 1, column: 1 }; + from = index + Math.max(needle.length, 1); + } + const before = source.slice(0, index); + const parts = before.split(/\r?\n/); + return { line: parts.length, column: (parts.at(-1)?.length ?? 0) + 1 }; +} + +function runtimeNamespace(runtime: RuntimeFunctionDecl["runtime"]): string { + return `__wrn_${runtime}`; +} + +function functionDeclaration(fn: RuntimeFunctionDecl): string { + const params = fn.parameters + .map( + (param) => + `${param.name}${param.optional ? "?" : ""}${param.valueType ? `: ${param.valueType}` : ": unknown"}${param.default ? ` = ${param.default}` : ""}`, + ) + .join(", "); + return `export ${fn.async ? "async " : ""}function ${fn.name}(${params})${fn.returnType ? `: ${fn.returnType}` : ""} {${fn.body}}`; +} + +function retainedImports(ast: PageAst): string { + return ast.structuredImports + .filter((entry) => { + if (entry.source.endsWith(".wrn")) return false; + if (entry.typeOnly) return true; + return ( + !entry.source.startsWith("@/components/") && + !entry.source.startsWith("@/layouts/") && + !entry.source.startsWith("@/stores/") + ); + }) + .map((entry) => entry.raw) + .join("\n"); +} + +export function virtualTypeScriptModule( + source: string, + filePath = "component.wrn", + appRoot = findAppRoot(filePath), +): VirtualTypeScriptModule { + const ast = parse(source); + const chunks: string[] = []; + const mappings: SourceMapping[] = []; + let virtualLine = 1; + + const append = (code: string, sourceNeedle?: string, occurrence = 0): void => { + if (!code) return; + const lineCount = code.split(/\r?\n/).length; + if (sourceNeedle) { + const sourcePosition = lineAt(source, sourceNeedle, occurrence); + mappings.push({ + virtualStartLine: virtualLine, + virtualEndLine: virtualLine + lineCount - 1, + sourceStartLine: sourcePosition.line, + sourceStartColumn: sourcePosition.column, + }); + } + chunks.push(code); + virtualLine += lineCount; + }; + + append(retainedImports(ast), ast.imports[0]); + append(ast.types.join("\n\n"), ast.types[0]?.trim()); + + for (const prop of ast.props) { + append(`declare const ${prop.name}: Readonly<${prop.valueType ?? "unknown"}>;`, prop.name); + } + for (const state of ast.states) { + append( + `let ${state.name}${state.valueType ? `: ${state.valueType}` : ""} = (${state.expr});`, + state.name, + ); + } + for (const computed of ast.computed) { + append( + `const ${computed.name}${computed.valueType ? `: ${computed.valueType}` : ""} = (${computed.expr});`, + computed.name, + ); + } + + const outputType = ast.outputs + .map( + (output) => + `${output.name}: (${output.payload ? `${output.payload.name}${output.payload.optional ? "?" : ""}: ${output.payload.valueType}` : ""}) => void`, + ) + .join("; "); + const serverFunctions = ast.runtimeFunctions.filter((fn) => fn.runtime === "server"); + const serverType = serverFunctions + .map( + (fn) => + `${fn.name}: (${fn.parameters.map((param) => `${param.name}${param.optional ? "?" : ""}: ${param.valueType ?? "unknown"}`).join(", ")}) => ${fn.returnType ?? (fn.async ? "Promise" : "unknown")}`, + ) + .join("; "); + append(`declare const output: { ${outputType} };`); + append(`declare const server: { ${serverType} };`); + append(`declare const props: Readonly<${ast.name}Props>;`); + append("declare const refs: Record;"); + append( + ast.kind === "global-store" || ast.kind === "page-store" + ? storeContract(ast) + : componentContract(ast), + ); + append(importedWrnDeclarations(ast, filePath, appRoot)); + + const sharedNames = new Set( + ast.runtimeFunctions.filter((fn) => fn.runtime === "shared").map((fn) => fn.name), + ); + for (const runtime of ["shared", "client", "server", "legacy"] as const) { + const functions = ast.runtimeFunctions.filter((fn) => fn.runtime === runtime); + if (!functions.length) continue; + const localNames = new Set(functions.map((fn) => fn.name)); + const sharedAliases = + runtime !== "shared" + ? [...sharedNames] + .filter((name) => !localNames.has(name)) + .map((name) => `const ${name} = ${runtimeNamespace("shared")}.${name};`) + .join("\n") + : ""; + append(`namespace ${runtimeNamespace(runtime)} {\n${sharedAliases}`); + for (const fn of functions) append(functionDeclaration(fn), fn.source); + append("}"); + } + + return { + ast, + fileName: filePath.replace(/\.wrn$/i, ".wrn.ts"), + code: chunks.join("\n") + "\n", + mappings, + }; +} + +interface ComponentShape { + name: string; + props: Array<{ name: string; type: string; required: boolean; options?: string[] }>; + outputs: Array<{ name: string; payloadType?: string }>; +} + +function shapeFromAst(ast: PageAst): ComponentShape { + return { + name: ast.name, + props: ast.props.map((prop) => ({ + name: prop.name, + type: prop.valueType ?? "unknown", + required: prop.required, + options: /^\s*(?:"[^"]+"\s*\|\s*)+"[^"]+"\s*$/.test(prop.valueType ?? "") + ? (prop.valueType ?? "").split("|").map((part) => part.trim().replace(/^"|"$/g, "")) + : undefined, + })), + outputs: ast.outputs.map((output) => ({ + name: output.name, + payloadType: output.payload?.valueType, + })), + }; +} + +function loadUiShapes(appRoot: string): Map { + const candidates = [ + join(appRoot, "node_modules", "@wrnexus", "ui", "component-reference.json"), + resolve(process.cwd(), "packages", "ui", "component-reference.json"), + ]; + for (const candidate of candidates) { + if (!existsSync(candidate)) continue; + try { + const parsed = JSON.parse(readFileSync(candidate, "utf8")) as { + components?: Array<{ + name: string; + props?: Array<{ name: string; type?: string; required?: boolean; options?: string[] }>; + outputs?: Array<{ name: string; payloadType?: string }>; + }>; + }; + return new Map( + (parsed.components ?? []).map((component) => [ + component.name, + { + name: component.name, + props: (component.props ?? []).map((prop) => ({ + name: prop.name, + type: prop.type ?? "unknown", + required: Boolean(prop.required), + options: prop.options, + })), + outputs: component.outputs ?? [], + }, + ]), + ); + } catch { + // Ignore a stale or malformed optional reference; import diagnostics report it separately. + } + } + return new Map(); +} + +function importedComponentShapes( + ast: PageAst, + filePath: string, + appRoot: string, +): Map { + const shapes = new Map(); + const ui = loadUiShapes(appRoot); + for (const entry of ast.structuredImports) { + if (entry.typeOnly) continue; + if (entry.source === "@wrnexus/ui") { + for (const item of entry.namedImports) { + const shape = ui.get(item.imported); + if (shape) shapes.set(item.local, shape); + } + continue; + } + if (!entry.source.endsWith(".wrn")) continue; + const importedPath = resolveImportedWrn(entry.source, filePath, appRoot); + if (!importedPath || !existsSync(importedPath)) continue; + try { + const importedAst = parse(readFileSync(importedPath, "utf8")); + if (importedAst.kind !== "component") continue; + const shape = shapeFromAst(importedAst); + if (entry.defaultImport) shapes.set(entry.defaultImport, shape); + for (const item of entry.namedImports) + if (item.imported === importedAst.name) shapes.set(item.local, shape); + } catch { + // Syntax/import diagnostics are emitted elsewhere. + } + } + return shapes; +} + +function walkView( + nodes: ViewNode[], + visit: (node: Extract) => void, +): void { + for (const node of nodes) { + if (node.type === "element") { + visit(node); + walkView(node.children, visit); + } else if (node.type === "each") { + walkView(node.body, visit); + walkView(node.empty, visit); + } else if (node.type === "if") { + for (const branch of node.branches) walkView(branch.body, visit); + } + } +} + +function componentUsageDiagnostics( + source: string, + ast: PageAst, + filePath: string, + appRoot: string, +): WrnTypeDiagnostic[] { + const shapes = importedComponentShapes(ast, filePath, appRoot); + const diagnostics: WrnTypeDiagnostic[] = []; + walkView(ast.view, (node) => { + const shape = shapes.get(node.tag); + if (!shape) return; + const attributes = new Map( + node.attrs.filter((attr) => !attr.event).map((attr) => [attr.name, attr]), + ); + const outputNames = new Set(shape.outputs.map((output) => output.name)); + const position = lineAt(source, `<${node.tag}`); + for (const prop of shape.props) { + if (prop.required && !attributes.has(prop.name)) { + diagnostics.push({ + code: "WRN-COMPONENT-MISSING-PROP", + category: "error", + message: `<${node.tag}> is missing required prop '${prop.name}'.`, + file: filePath, + line: position.line, + column: position.column, + length: node.tag.length + 1, + expected: prop.type, + hint: `Add ${prop.name} with a value assignable to ${prop.type}.`, + }); + } + } + const known = new Map(shape.props.map((prop) => [prop.name, prop])); + for (const attr of node.attrs) { + if (attr.event) { + if (!outputNames.has(attr.name)) { + diagnostics.push({ + code: "WRN-OUTPUT-UNKNOWN-HANDLER", + category: "error", + message: `<${node.tag}> does not declare output '${attr.name}'.`, + file: filePath, + line: position.line, + column: position.column, + length: attr.name.length, + hint: "Use an output declared by the component contract.", + }); + } + continue; + } + if (/^(?:class|id|style|slot|data-|aria-)/.test(attr.name) || attr.name === "attrs") continue; + const prop = known.get(attr.name); + if (!prop) { + diagnostics.push({ + code: "WRN-COMPONENT-UNKNOWN-PROP", + category: "error", + message: `<${node.tag}> has unknown prop '${attr.name}'.`, + file: filePath, + line: position.line, + column: position.column, + length: attr.name.length, + hint: "Remove the prop or add it to the component declaration.", + }); + continue; + } + if (attr.value.startsWith("{") && attr.value.endsWith("}")) continue; + const received = attr.boolean ? "boolean" : inferredRuntimeType(JSON.stringify(attr.value)); + const expected = runtimeTypeOf(prop.type); + if (expected !== "unknown" && received !== "unknown" && expected !== received) { + diagnostics.push({ + code: "WRN-COMPONENT-PROP-TYPE", + category: "error", + message: `Prop '${attr.name}' on <${node.tag}> expects ${prop.type}, received ${received}.`, + file: filePath, + line: position.line, + column: position.column, + length: attr.name.length, + expected: prop.type, + received, + }); + } + if (prop.options?.length && !prop.options.includes(attr.value)) { + diagnostics.push({ + code: "WRN-COMPONENT-PROP-LITERAL", + category: "error", + message: `Prop '${attr.name}' on <${node.tag}> must be one of ${prop.options.map((value) => JSON.stringify(value)).join(", ")}.`, + file: filePath, + line: position.line, + column: position.column, + length: attr.name.length, + expected: prop.type, + received: JSON.stringify(attr.value), + }); + } + } + }); + return diagnostics; +} + +function category(value: ts.DiagnosticCategory): WrnTypeDiagnostic["category"] { + return value === ts.DiagnosticCategory.Error + ? "error" + : value === ts.DiagnosticCategory.Warning + ? "warning" + : "info"; +} + +function hostWithVirtualFiles( + files: Map, + options: ts.CompilerOptions, +): ts.CompilerHost { + const host = ts.createCompilerHost(options, true); + const originalGet = host.getSourceFile.bind(host); + host.fileExists = (fileName) => files.has(normalize(fileName)) || ts.sys.fileExists(fileName); + host.readFile = (fileName) => files.get(normalize(fileName)) ?? ts.sys.readFile(fileName); + host.getSourceFile = (fileName, languageVersion, onError, shouldCreateNewSourceFile) => { + const text = files.get(normalize(fileName)); + return text === undefined + ? originalGet(fileName, languageVersion, onError, shouldCreateNewSourceFile) + : ts.createSourceFile(fileName, text, languageVersion, true, ts.ScriptKind.TS); + }; + return host; +} + +function mappedPosition( + virtual: VirtualTypeScriptModule, + line: number, + column: number, +): { line: number; column: number } { + const mapping = virtual.mappings.find( + (entry) => line >= entry.virtualStartLine && line <= entry.virtualEndLine, + ); + if (!mapping) return { line: 1, column: 1 }; + const offset = line - mapping.virtualStartLine; + return { + line: mapping.sourceStartLine + offset, + column: offset === 0 ? mapping.sourceStartColumn + Math.max(column - 1, 0) : column, + }; +} + +function runtimeDiagnostics(source: string, ast: PageAst, filePath: string): WrnTypeDiagnostic[] { + const diagnostics: WrnTypeDiagnostic[] = []; + const duplicateKeys = new Map(); + for (const fn of ast.runtimeFunctions) { + const key = `${fn.runtime}:${fn.name}`; + const previous = duplicateKeys.get(key); + if (previous) { + const position = lineAt(source, fn.source); + const related = lineAt(source, previous.source); + diagnostics.push({ + code: "WRN-FUNCTION-DUPLICATE", + category: "error", + message: `Duplicate ${fn.runtime} implementation for '${fn.name}'.`, + file: filePath, + line: position.line, + column: position.column, + length: fn.name.length, + hint: "Keep only one implementation for each function name and runtime.", + related: { + file: filePath, + line: related.line, + column: related.column, + message: "First implementation is here.", + }, + }); + } else duplicateKeys.set(key, fn); + + const position = lineAt(source, fn.source); + const parameterNames = new Set(fn.parameters.map((parameter) => parameter.name)); + for (const prop of ast.props) { + if (containsReadonlyPropMutation(fn.body, prop.name, parameterNames)) { + diagnostics.push({ + code: "WRN-PROP-READONLY", + category: "error", + message: `Function '${fn.name}' attempts to mutate readonly prop '${prop.name}'.`, + file: filePath, + line: position.line, + column: position.column, + length: fn.name.length, + hint: "Copy the prop into state or call a component output instead.", + }); + } + } + if (fn.runtime === "server" && /\boutput\s*\./.test(fn.body)) { + diagnostics.push({ + code: "WRN-OUTPUT-SERVER-CALL", + category: "error", + message: `Server function '${fn.name}' cannot call a component output.`, + file: filePath, + line: position.line, + column: position.column, + length: fn.name.length, + hint: "Return a typed value to the client function and call output.name(payload) there.", + }); + } + if ( + fn.runtime === "client" && + /\b(?:Bun|process|Deno|ctx\.(?:db|request|req))\b/.test(fn.body) + ) { + diagnostics.push({ + code: "WRN-CLIENT-SERVER-API", + category: "error", + message: `Client function '${fn.name}' references a server-only API.`, + file: filePath, + line: position.line, + column: position.column, + length: fn.name.length, + hint: "Move server work to a server function and call it through server.name(...).", + }); + } + if ( + fn.runtime === "server" && + /\b(?:window|document|localStorage|sessionStorage|navigator)\b/.test(fn.body) + ) { + diagnostics.push({ + code: "WRN-SERVER-BROWSER-API", + category: "error", + message: `Server function '${fn.name}' references a browser-only API.`, + file: filePath, + line: position.line, + column: position.column, + length: fn.name.length, + hint: "Move browser work to a client function.", + }); + } + } + return diagnostics; +} + +export function checkWrnSource( + source: string, + options: TypecheckOptions = {}, +): WrnTypeDiagnostic[] { + const filePath = resolve(options.filePath ?? "component.wrn"); + const appRoot = options.appRoot ?? findAppRoot(filePath); + let virtual: VirtualTypeScriptModule; + try { + virtual = virtualTypeScriptModule(source, filePath, appRoot); + } catch (error) { + return [ + { + code: "WRN-TYPE-PARSE", + category: "error", + message: error instanceof Error ? error.message : String(error), + file: filePath, + line: 1, + column: 1, + length: 1, + }, + ]; + } + + const appTypes = loadApplicationTypes(appRoot); + const files = new Map(); + files.set(normalize(virtual.fileName), virtual.code); + for (const [name, text] of appTypes.files) files.set(normalize(name), text); + + const compilerOptions: ts.CompilerOptions = { + target: ts.ScriptTarget.ESNext, + module: ts.ModuleKind.ESNext, + moduleResolution: ts.ModuleResolutionKind.Bundler, + strict: options.strict ?? true, + noImplicitAny: options.noImplicitAny ?? true, + strictNullChecks: options.strictNullChecks ?? true, + skipLibCheck: true, + allowImportingTsExtensions: true, + allowArbitraryExtensions: true, + noEmit: true, + baseUrl: appRoot, + paths: { "@/*": ["app/*"] }, + lib: ["lib.esnext.d.ts", "lib.dom.d.ts"], + }; + const rootNames = [virtual.fileName, ...appTypes.files.keys()]; + const program = ts.createProgram( + rootNames, + compilerOptions, + hostWithVirtualFiles(files, compilerOptions), + ); + const tsDiagnostics = ts.getPreEmitDiagnostics(program).map((diagnostic): WrnTypeDiagnostic => { + const file = diagnostic.file; + const start = diagnostic.start ?? 0; + const virtualPosition = file?.getLineAndCharacterOfPosition(start) ?? { line: 0, character: 0 }; + const isVirtual = normalize(file?.fileName ?? "") === normalize(virtual.fileName); + const sourcePosition = isVirtual + ? mappedPosition(virtual, virtualPosition.line + 1, virtualPosition.character + 1) + : { line: virtualPosition.line + 1, column: virtualPosition.character + 1 }; + return { + code: `WRN-TYPE-${diagnostic.code}`, + category: category(diagnostic.category), + message: ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"), + file: isVirtual ? filePath : (file?.fileName ?? filePath), + line: sourcePosition.line, + column: sourcePosition.column, + length: diagnostic.length ?? 1, + hint: "Fix the TypeScript contract or expression in the related .wrn declaration.", + }; + }); + return [ + ...(options.checkRuntimeBoundaries === false + ? [] + : runtimeDiagnostics(source, virtual.ast, filePath)), + ...componentUsageDiagnostics(source, virtual.ast, filePath, appRoot), + ...tsDiagnostics, + ]; +} + +export function checkWrnFile( + filePath: string, + options: Omit = {}, +): WrnTypeDiagnostic[] { + return checkWrnSource(readFileSync(filePath, "utf8"), { ...options, filePath }); +} diff --git a/packages/typecheck/src/project.ts b/packages/typecheck/src/project.ts new file mode 100644 index 00000000..e77a6d7d --- /dev/null +++ b/packages/typecheck/src/project.ts @@ -0,0 +1,37 @@ +import { existsSync, readdirSync, readFileSync, statSync } from "node:fs"; +import { dirname, join, resolve } from "node:path"; + +export interface ApplicationTypes { + root: string; + globalFile?: string; + files: Map; +} + +function walk(dir: string, out: string[]): void { + if (!existsSync(dir)) return; + for (const name of readdirSync(dir)) { + const path = join(dir, name); + const stat = statSync(path); + if (stat.isDirectory()) walk(path, out); + else if (/\.(?:ts|d\.ts)$/.test(name)) out.push(path); + } +} + +export function findAppRoot(filePath: string): string { + let current = resolve(dirname(filePath)); + while (true) { + if (existsSync(join(current, "app"))) return current; + const parent = dirname(current); + if (parent === current) return resolve(dirname(filePath)); + current = parent; + } +} + +export function loadApplicationTypes(appRoot: string): ApplicationTypes { + const typesRoot = join(appRoot, "app", "types"); + const paths: string[] = []; + walk(typesRoot, paths); + const files = new Map(paths.map((path) => [path, readFileSync(path, "utf8")])); + const globalFile = join(typesRoot, "global.d.ts"); + return { root: typesRoot, ...(files.has(globalFile) ? { globalFile } : {}), files }; +} diff --git a/packages/typecheck/test/imports-and-components.test.ts b/packages/typecheck/test/imports-and-components.test.ts new file mode 100644 index 00000000..c8bcd0e0 --- /dev/null +++ b/packages/typecheck/test/imports-and-components.test.ts @@ -0,0 +1,62 @@ +import { expect, test } from "bun:test"; +import { mkdirSync, mkdtempSync, writeFileSync } from "node:fs"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import { checkWrnSource } from "../src/index.ts"; + +function fixture(): string { + const root = mkdtempSync(join(tmpdir(), "wrn-v060-contracts-")); + mkdirSync(join(root, "app", "components"), { recursive: true }); + mkdirSync(join(root, "app", "stores", "global"), { recursive: true }); + mkdirSync(join(root, "app", "types"), { recursive: true }); + writeFileSync( + join(root, "app", "types", "global.d.ts"), + "declare interface AppMarker { ready: boolean }\n", + ); + writeFileSync( + join(root, "app", "components", "UserCard.wrn"), + `component UserCard { + props { name: string role: "admin" | "member" = "member" } + outputs { select(payload: string) } + view { } + }`, + ); + writeFileSync( + join(root, "app", "stores", "global", "counter.wrn"), + `global store CounterStore { + state { count: number = 0 } + functions { client function increment(amount: number): void { count += amount } } + }`, + ); + return root; +} + +test("checks imported component props and output names", () => { + const root = fixture(); + const filePath = join(root, "app", "pages", "home.wrn"); + const diagnostics = checkWrnSource( + `import UserCard from "@/components/UserCard.wrn" +page Home { + view { } +}`, + { appRoot: root, filePath }, + ); + expect(diagnostics.some((item) => item.code === "WRN-COMPONENT-MISSING-PROP")).toBe(true); + expect(diagnostics.some((item) => item.code === "WRN-COMPONENT-UNKNOWN-PROP")).toBe(true); + expect(diagnostics.some((item) => item.code === "WRN-COMPONENT-PROP-LITERAL")).toBe(true); + expect(diagnostics.some((item) => item.code === "WRN-OUTPUT-UNKNOWN-HANDLER")).toBe(true); +}); + +test("types imported store actions", () => { + const root = fixture(); + const filePath = join(root, "app", "pages", "home.wrn"); + const diagnostics = checkWrnSource( + `import counterStore from "@/stores/global/counter.wrn" +page Home { + functions { client function update(): void { counterStore.increment("wrong") } } + view { } +}`, + { appRoot: root, filePath }, + ); + expect(diagnostics.some((item) => item.code === "WRN-TYPE-2345")).toBe(true); +}); diff --git a/packages/typecheck/test/typecheck.test.ts b/packages/typecheck/test/typecheck.test.ts new file mode 100644 index 00000000..8deb2b7e --- /dev/null +++ b/packages/typecheck/test/typecheck.test.ts @@ -0,0 +1,57 @@ +import { expect, test } from "bun:test"; +import { mkdirSync, mkdtempSync, writeFileSync } from "node:fs"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import { checkWrnSource } from "../src/index.ts"; + +function app(): string { + const root = mkdtempSync(join(tmpdir(), "wrn-typecheck-")); + mkdirSync(join(root, "app", "types"), { recursive: true }); + writeFileSync( + join(root, "app", "types", "user.ts"), + "export interface User { id: string; name: string }\n", + ); + writeFileSync( + join(root, "app", "types", "global.d.ts"), + "declare interface RequestError { message: string }\n", + ); + return root; +} + +test("loads app types and maps output payload errors back to WRN source", () => { + const root = app(); + const source = `import type { User } from "@/types/user.ts" +component Demo { + props { user: User } + outputs { confirm(payload: User) } + functions { + client function save(value: User): void { + output.confirm({ id: 1, name: value.name }) + } + } + view { } +}`; + const diagnostics = checkWrnSource(source, { + appRoot: root, + filePath: join(root, "app", "components", "Demo.wrn"), + }); + expect(diagnostics.some((diagnostic) => diagnostic.code === "WRN-TYPE-2322")).toBe(true); + expect(diagnostics.find((diagnostic) => diagnostic.code === "WRN-TYPE-2322")?.line).toBe(7); +}); + +test("allows the same function name in client and server runtimes", () => { + const root = app(); + const diagnostics = checkWrnSource( + `component Demo { + functions { + client async function save(value: string): Promise { await server.save(value) } + server async function save(value: string): Promise {} + } + view {
} + }`, + { appRoot: root, filePath: join(root, "app", "components", "Demo.wrn") }, + ); + expect( + diagnostics.filter((diagnostic) => diagnostic.code === "WRN-FUNCTION-DUPLICATE"), + ).toHaveLength(0); +}); diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md index 53a2f9ab..a4f489bd 100644 --- a/packages/ui/COMPONENTS.md +++ b/packages/ui/COMPONENTS.md @@ -9,18 +9,18 @@ This reference is generated from the 108 packaged `.wrn` component sources. Prop Theme-aware, responsive advanced select component. - Mount: `data-component="AdvancedSelect"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: string = []`, `options: string = []`, `groups: string = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: unknown[] = []`, `options: unknown[] = []`, `groups: unknown[] = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""` - Slots: None -- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` +- Outputs: `search({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### ComboBox Editable autocomplete combobox with local and remote suggestions. - Mount: `data-component="ComboBox"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `groups: string = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: unknown[] = []`, `groups: unknown[] = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""` - Slots: None -- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error` +- Outputs: `search({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### CopyMarkup @@ -29,7 +29,7 @@ Theme-aware, responsive copy markup component. - Mount: `data-component="CopyMarkup"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `copy`, `success`, `error` +- Outputs: `copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### InputNumber @@ -38,7 +38,7 @@ Theme-aware, responsive input number component. - Mount: `data-component="InputNumber"` - Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = ""`, `name: string = "quantity"`, `value: number = 0`, `min: string = ""`, `max: string = ""`, `step: number = 1`, `precision: string = "auto"`, `label: string = ""`, `description: string = ""`, `helpText: string = ""`, `error: string = ""`, `invalid: boolean = false`, `prefix: string = ""`, `suffix: string = ""`, `placeholder: string = ""`, `autocomplete: string = "off"`, `inputMode: string = "decimal"`, `ariaLabel: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `inputDisabled: boolean = false`, `buttonsDisabled: boolean = false`, `readonly: boolean = false`, `allowInput: boolean = true`, `keyboard: boolean = true`, `wheel: boolean = false`, `clamp: boolean = true`, `fullWidth: boolean = false`, `showButtons: boolean = true`, `showValidationMessage: boolean = true`, `decrementLabel: string = "Decrease value"`, `incrementLabel: string = "Increase value"`, `controlsLabel: string = "Quantity controls"`, `requiredMessage: string = "A value is required."`, `minMessage: string = "Value is below the minimum."`, `maxMessage: string = "Value is above the maximum."` - Slots: None -- Events: `input`, `change`, `increment`, `decrement` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `increment({ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `decrement({ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### PinInput @@ -47,7 +47,7 @@ Secure multi-cell PIN and verification-code input with regex and paste support. - Mount: `data-component="PinInput"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Verification code"`, `name: string = "pin"`, `value: string = ""`, `length: number = 4`, `pattern: string = "[0-9]"`, `type: string = "text"`, `inputMode: string = "numeric"`, `placeholder: string = "○"`, `autocomplete: string = "one-time-code"`, `masked: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `autoFocus: boolean = false`, `autoSubmit: boolean = false`, `allowPaste: boolean = true`, `clearable: boolean = true`, `clearLabel: string = "Clear code"`, `separator: string = ""`, `groupSize: number = 0`, `helpText: string = ""`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `complete`, `paste`, `clear`, `error` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `paste({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### StrongPassword @@ -56,25 +56,25 @@ Theme-aware, responsive strong password component. - Mount: `data-component="StrongPassword"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `strength` +- Outputs: `input({ value: string; score: number; maximumScore: number; percent: number; level: string })`, `change({ value: string; score: number; maximumScore: number; percent: number; level: string })`, `strength({ value: string; score: number; maximumScore: number; percent: number; level: string })` ### ToggleCount Theme-aware, responsive toggle count component. - Mount: `data-component="ToggleCount"` -- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "segmented"`, `class: string = ""`, `name: string = "billing-cycle"`, `value: string = "monthly"`, `firstValue: string = "monthly"`, `firstLabel: string = "Monthly"`, `secondValue: string = "annual"`, `secondLabel: string = "Annual"`, `ariaLabel: string = "Billing frequency"`, `items: string = []`, `currency: string = "$"`, `suffix: string = ""`, `firstValueKey: string = "monthly"`, `secondValueKey: string = "annual"`, `emptyValue: string = "—"`, `align: string = "end"`, `fullWidth: boolean = true`, `disabled: boolean = false`, `animate: boolean = true`, `animationDuration: number = 450`, `animationSteps: number = 18` +- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "segmented"`, `class: string = ""`, `name: string = "billing-cycle"`, `value: string = "monthly"`, `firstValue: string = "monthly"`, `firstLabel: string = "Monthly"`, `secondValue: string = "annual"`, `secondLabel: string = "Annual"`, `ariaLabel: string = "Billing frequency"`, `items: unknown[] = []`, `currency: string = "$"`, `suffix: string = ""`, `firstValueKey: string = "monthly"`, `secondValueKey: string = "annual"`, `emptyValue: string = "—"`, `align: string = "end"`, `fullWidth: boolean = true`, `disabled: boolean = false`, `animate: boolean = true`, `animationDuration: number = 450`, `animationSteps: number = 18` - Slots: None -- Events: `change`, `toggle` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### TogglePassword Accessible password field with optional show and hide controls. - Mount: `data-component="TogglePassword"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: string = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: unknown[] = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `toggle` +- Outputs: `input({ name?: string; value: string | number | boolean | null | object; visible: boolean })`, `change({ name?: string; value: string | number | boolean | null | object; visible: boolean })`, `toggle({ visible: boolean })` ## Base @@ -83,18 +83,18 @@ Accessible password field with optional show and hide controls. Theme-aware, responsive accordion component. - Mount: `data-component="Accordion"` -- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = "accordion"`, `items: string = []`, `defaultOpen: string = []`, `multiple: boolean = false`, `alwaysOpen: boolean = false`, `disabled: boolean = false`, `indicator: string = "plus"`, `indicatorPosition: string = "start"`, `showIndicator: boolean = true`, `bordered: boolean = false`, `separated: boolean = false`, `flush: boolean = false`, `contentItalic: boolean = false` +- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = "accordion"`, `items: unknown[] = []`, `defaultOpen: unknown[] = []`, `multiple: boolean = false`, `alwaysOpen: boolean = false`, `disabled: boolean = false`, `indicator: string = "plus"`, `indicatorPosition: string = "start"`, `showIndicator: boolean = true`, `bordered: boolean = false`, `separated: boolean = false`, `flush: boolean = false`, `contentItalic: boolean = false` - Slots: None -- Events: `change`, `open`, `close` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Alert Theme-aware, responsive alert component. - Mount: `data-component="Alert"` -- Props: `size: string = "default"`, `color: string = "info"`, `variant: string = "soft"`, `class: string = ""`, `radius: string = "md"`, `shadow: string = "sm"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `actions: string = []`, `showIcon: boolean = false`, `icon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss alert"`, `role: string = "alert"`, `live: string = "polite"`, `linkLabel: string = ""`, `linkHref: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `compact: boolean = false` +- Props: `size: string = "default"`, `color: string = "info"`, `variant: string = "soft"`, `class: string = ""`, `radius: string = "md"`, `shadow: string = "sm"`, `title: string = "Alert"`, `description: string = ""`, `items: unknown[] = []`, `actions: unknown[] = []`, `showIcon: boolean = false`, `icon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss alert"`, `role: string = "alert"`, `live: string = "polite"`, `linkLabel: string = ""`, `linkHref: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `compact: boolean = false` - Slots: None -- Events: `dismiss`, `action` +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Avatar @@ -103,16 +103,16 @@ Theme-aware, responsive avatar component. - Mount: `data-component="Avatar"` - Props: `src: string = ""`, `alt: string = ""`, `initials: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `status: string = ""`, `statusLabel: string = ""`, `statusPosition: string = "bottom"`, `badge: string = ""`, `badgeIcon: string = ""`, `badgeLabel: string = ""`, `tooltip: string = ""`, `name: string = ""`, `description: string = ""`, `loading: string = "lazy"`, `class: string = ""` - Slots: None -- Events: `load`, `error`, `click` +- Outputs: `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)`, `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### AvatarGroup Theme-aware, responsive avatar group component. - Mount: `data-component="AvatarGroup"` -- Props: `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `layout: string = "stack"`, `maxVisible: number = 4`, `columns: number = 3`, `borderColor: string = ""`, `showTooltips: boolean = true`, `overflowLabel: string = "Show remaining members"`, `class: string = ""` +- Props: `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `layout: string = "stack"`, `maxVisible: number = 4`, `columns: number = 3`, `borderColor: string = ""`, `showTooltips: boolean = true`, `overflowLabel: string = "Show remaining members"`, `class: string = ""` - Slots: None -- Events: `overflow` +- Outputs: `overflow({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Badge @@ -121,7 +121,7 @@ Theme-aware, responsive badge component. - Mount: `data-component="Badge"` - Props: `label: string = "Badge"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "pill"`, `class: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `dot: boolean = false`, `dotOnly: boolean = false`, `dotLabel: string = "Status"`, `animated: boolean = false`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Remove badge"`, `truncate: boolean = false`, `maxWidth: string = "12rem"`, `anchorLabel: string = ""`, `anchorIcon: string = ""`, `placement: string = "inline"`, `anchorLabelText: string = "Badge anchor"` - Slots: None -- Events: `dismiss` +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Blockquote @@ -130,7 +130,7 @@ Theme-aware, responsive blockquote component. - Mount: `data-component="Blockquote"` - Props: `quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."`, `citation: string = ""`, `citationTitle: string = ""`, `citationUrl: string = ""`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `size: string = "md"`, `color: string = "primary"`, `align: string = "left"`, `variant: string = "default"`, `quoteMark: boolean = true`, `italic: boolean = true`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Button @@ -139,52 +139,52 @@ Theme-aware, responsive button component. - Mount: `data-component="Button"` - Props: `label: string = "Button"`, `loadingLabel: string = "Loading…"`, `description: string = ""`, `as: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `type: string = "button"`, `variant: string = "default"`, `color: string = "primary"`, `size: string = "default"`, `disabled: boolean = false`, `loading: boolean = false`, `pill: boolean = false`, `fullWidth: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `ariaLabel: string = ""`, `ariaPressed: string = ""`, `ariaExpanded: string = ""`, `ariaControls: string = ""`, `title: string = ""`, `autofocus: boolean = false`, `controlClass: string = ""`, `class: string = ""` - Slots: `default` -- Events: `click`, `focus`, `blur` +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### ButtonGroup Theme-aware, responsive button group component. - Mount: `data-component="ButtonGroup"` -- Props: `items: string = []`, `value: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `orientation: string = "horizontal"`, `responsive: boolean = false`, `attached: boolean = true`, `selectable: boolean = false`, `toolbar: boolean = false`, `disabled: boolean = false`, `ariaLabel: string = "Button group"`, `class: string = ""` +- Props: `items: unknown[] = []`, `value: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `orientation: string = "horizontal"`, `responsive: boolean = false`, `attached: boolean = true`, `selectable: boolean = false`, `toolbar: boolean = false`, `disabled: boolean = false`, `ariaLabel: string = "Button group"`, `class: string = ""` - Slots: `default` -- Events: `click`, `select`, `change` +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })`, `change({ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })` ### Card Group related content in a responsive themed surface with title, description, content, and supporting slots. - Mount: `data-component="Card"` -- Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: string = []`, `navigation: string = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""` +- Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: unknown[] = []`, `navigation: unknown[] = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""` - Slots: `default` -- Events: `click`, `action`, `navigate`, `dismiss`, `load`, `error` +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `navigate({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### Carousel Theme-aware, responsive carousel component. - Mount: `data-component="Carousel"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `activeIndex: number = 0`, `slidesPerView: number = 1`, `gap: string = "0.75rem"`, `showPagination: boolean = false`, `isAutoPlay: boolean = false`, `autoplayInterval: number = 4000`, `isInfiniteLoop: boolean = false`, `isRTL: boolean = false`, `isCentered: boolean = false`, `isDraggable: boolean = false`, `isAutoHeight: boolean = false`, `isSnap: boolean = false`, `showCounter: boolean = false`, `thumbnails: string = "none"`, `ariaLabel: string = "Content carousel"`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: unknown[] = []`, `activeIndex: number = 0`, `slidesPerView: number = 1`, `gap: string = "0.75rem"`, `showPagination: boolean = false`, `isAutoPlay: boolean = false`, `autoplayInterval: number = 4000`, `isInfiniteLoop: boolean = false`, `isRTL: boolean = false`, `isCentered: boolean = false`, `isDraggable: boolean = false`, `isAutoHeight: boolean = false`, `isSnap: boolean = false`, `showCounter: boolean = false`, `thumbnails: string = "none"`, `ariaLabel: string = "Content carousel"`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `initialize`, `change`, `previous`, `next`, `play`, `pause`, `reachStart`, `reachEnd`, `dragStart`, `dragEnd` +- Outputs: `initialize({ index: number; count: number })`, `change({ index: number; previousIndex: number; item: string | number | boolean | null | object; reason: string | boolean })`, `previous({ index: number; previousIndex: number; item: string | number | boolean | null | object })`, `next({ index: number; previousIndex: number; item: string | number | boolean | null | object })`, `play({ index: number; interval: number })`, `pause({ index: number })`, `reachStart({ index: number })`, `reachEnd({ index: number })`, `dragStart({ index: number; x: null })`, `dragEnd({ index: number; distance: number })` ### ChatBubble Theme-aware, responsive chat bubble component. - Mount: `data-component="ChatBubble"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `oneSided: boolean = false`, `showAvatars: boolean = false`, `showMetadata: boolean = false`, `ariaLabel: string = "Conversation"`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: unknown[] = []`, `oneSided: boolean = false`, `showAvatars: boolean = false`, `showMetadata: boolean = false`, `ariaLabel: string = "Conversation"`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `action`, `messageClick`, `avatarClick`, `linkClick` +- Outputs: `action({ action: boolean; item: string | number | boolean | null | object; index: number })`, `messageClick({ item: string | number | boolean | null | object; index: number; direction: string })`, `avatarClick({ item: string | number | boolean | null | object; index: number; direction: string })`, `linkClick({ link: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })` ### Collapse Theme-aware, responsive collapse component. - Mount: `data-component="Collapse"` -- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `mode: string = "panel"`, `initialOpenIndexes: string = []`, `ariaLabel: string = "Collapsible content"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: unknown[] = []`, `multiple: boolean = false`, `mode: string = "panel"`, `initialOpenIndexes: unknown[] = []`, `ariaLabel: string = "Collapsible content"`, `class: string = ""` - Slots: `default` -- Events: `toggle`, `open`, `close` +- Outputs: `toggle({ index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] })`, `open({ index: number; item: string | number | boolean | null | object })`, `close({ index: number; item: string | number | boolean | null | object })` ### DatePicker @@ -193,16 +193,16 @@ Theme-aware, responsive date picker component. - Mount: `data-component="DatePicker"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `id: string = ""`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `locale: string = "en-US"`, `firstDayOfWeek: number = 0`, `months: string = [{ 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" }]`, `days: string = [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]`, `years: string = [2024, 2025, 2026, 2027, 2028, 2029, 2030]`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `variant: string = "normal"`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `open`, `close`, `focus`, `blur`, `invalid` +- Outputs: `input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `open({ value: string; name: string; sourceEvent: Event })`, `close({ value: string; name: string; sourceEvent: Event })`, `focus({ value: string; name: string; sourceEvent: Event })`, `blur({ value: string; name: string; sourceEvent: Event })`, `invalid({ name: string; message: string; sourceEvent: Event })` ### DeviceFrame Theme-aware, responsive device frame component. - Mount: `data-component="DeviceFrame"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `device: string = "phone"`, `orientation: string = "portrait"`, `src: string = ""`, `srcdoc: string = ""`, `frameTitle: string = "Device preview"`, `showToolbar: boolean = true`, `allow: string = ""`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `device: string = "phone"`, `orientation: string = "portrait"`, `src: string = ""`, `srcdoc: string = ""`, `frameTitle: string = "Device preview"`, `showToolbar: boolean = true`, `allow: string = ""`, `class: string = ""` - Slots: `default` -- Events: `change`, `rotate` +- Outputs: `change({ device: string; orientation: string; sourceEvent: Event })`, `rotate({ device: string; orientation: string; sourceEvent: Event })` ### FileUploadProgress @@ -211,43 +211,43 @@ Theme-aware, responsive file upload progress component. - Mount: `data-component="FileUploadProgress"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `fileName: string = ""`, `fileSize: string = ""`, `uploadedSize: string = ""`, `status: string = "uploading"`, `cancelLabel: string = "Cancel upload"`, `retryLabel: string = "Retry upload"`, `class: string = ""` - Slots: None -- Events: `cancel`, `retry`, `complete` +- Outputs: `cancel({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `retry({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `complete({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### LegendIndicator Theme-aware, responsive legend indicator component. - Mount: `data-component="LegendIndicator"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `toggle`, `select` +- Outputs: `toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### List Present structured responsive linked or status items with icons, descriptions, actions, and selection events. - Mount: `data-component="List"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### ListGroup Theme-aware, responsive list group component. - Mount: `data-component="ListGroup"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `change` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Marquee Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior. - Mount: `data-component="Marquee"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Progress @@ -256,16 +256,16 @@ Theme-aware, responsive progress component. - Mount: `data-component="Progress"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### Rating Theme-aware, responsive rating component. - Mount: `data-component="Rating"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Skeleton @@ -274,7 +274,7 @@ Theme-aware, responsive skeleton component. - Mount: `data-component="Skeleton"` - Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### Spinner @@ -283,43 +283,43 @@ Theme-aware, responsive spinner component. - Mount: `data-component="Spinner"` - Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### StyledIcon Theme-aware, responsive styled icon component. - Mount: `data-component="StyledIcon"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Timeline Present responsive chronological activity, milestones, or workflow status with rich item metadata. - Mount: `data-component="Timeline"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Toast Theme-aware, responsive toast component. - Mount: `data-component="Toast"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `dismiss`, `action` +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### TreeView Theme-aware, responsive tree view component. - Mount: `data-component="TreeView"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `toggle`, `expand`, `collapse` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `expand({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `collapse({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ## Core @@ -330,25 +330,25 @@ Reusable auth form component. - Mount: `data-component="AuthForm"` - Props: `size: string = "default"`, `color: string = "primary"`, `mode: string = "sign-in"`, `action: string = "/api/auth/login"`, `method: string = "post"`, `title: string = "Sign in"`, `description: string = ""`, `returnTo: string = ""`, `schema: string = ""`, `showRemember: boolean = true`, `showName: boolean = true`, `submitLabel: string = "Continue"`, `class: string = ""` - Slots: `default` -- Events: `submit`, `change`, `input`, `focus`, `blur` +- Outputs: `submit({ event: Event; mode: string; action: string })`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### AuthSplitLayout Reusable auth split layout component. - Mount: `data-component="AuthSplitLayout"` -- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Secure identity"`, `title: string = "Welcome back"`, `description: string = ""`, `brand: string = "Police Management System"`, `features: string = []`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Secure identity"`, `title: string = "Welcome back"`, `description: string = ""`, `brand: string = "Police Management System"`, `features: unknown[] = []`, `class: string = ""` - Slots: `aside-extra`, `form` -- Events: None +- Outputs: None ### PortalDashboard Reusable portal dashboard component. - Mount: `data-component="PortalDashboard"` -- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Overview"`, `eyebrowKey: string = ""`, `title: string = "Dashboard"`, `titleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `userName: string = ""`, `metrics: string = []`, `actions: string = []`, `updates: string = []`, `tasks: string = []`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Overview"`, `eyebrowKey: string = ""`, `title: string = "Dashboard"`, `titleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `userName: string = ""`, `metrics: unknown[] = []`, `actions: unknown[] = []`, `updates: unknown[] = []`, `tasks: unknown[] = []`, `class: string = ""` - Slots: `hero-action` -- Events: `action`, `navigate` +- Outputs: `action({ item: string | number | boolean | null | object; value: string | number | boolean; index: number })`, `navigate({ item: string | number | boolean | null | object; value: string | number | boolean; index: number })` ### PreferenceSwitcher @@ -357,7 +357,7 @@ Reusable preference switcher component. - Mount: `data-component="PreferenceSwitcher"` - Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `class: string = ""` - Slots: None -- Events: `theme`, `color`, `language` +- Outputs: `theme({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `color({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `language({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ## Data @@ -368,25 +368,25 @@ Display one operational metric with value, suffix, description, icon, trend, pro - Mount: `data-component="MetricCard"` - Props: `label: string = "Metric"`, `value: string = "0"`, `description: string = ""`, `icon: string = ""`, `iconStyle: string = "soft"`, `prefix: string = ""`, `suffix: string = ""`, `badge: string = ""`, `trend: string = ""`, `trendLabel: string = ""`, `trendDirection: string = "neutral"`, `progress: number = -1`, `progressLabel: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `actionLabel: string = ""`, `actionIcon: string = ""`, `showArrow: boolean = true`, `selectable: boolean = false`, `disabled: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `class: string = ""` - Slots: `default`, `footer` -- Events: `select`, `action` +- Outputs: `select({ label: string; value: string; href: string; sourceEvent: Event })`, `action({ label: string; value: string; href: string; sourceEvent: Event })` ### MetricGrid Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid. - Mount: `data-component="MetricGrid"` -- Props: `items: string = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "full"`, `minItemWidth: string = ""`, `class: string = ""` +- Props: `items: unknown[] = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "full"`, `minItemWidth: string = ""`, `class: string = ""` - Slots: `default` -- Events: `select`, `action` +- Outputs: `select({ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event })`, `action({ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event })` ### StatsBar Present a compact responsive strip of key facts, counts, performance indicators, or trust signals. - Mount: `data-component="StatsBar"` -- Props: `items: string = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""` +- Props: `items: unknown[] = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ## Forms @@ -395,9 +395,9 @@ Present a compact responsive strip of key facts, counts, performance indicators, Theme-aware, responsive checkbox component. - Mount: `data-component="Checkbox"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `values: string = []`, `options: string = []`, `checked: boolean = false`, `indeterminate: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `values: unknown[] = []`, `options: unknown[] = []`, `checked: boolean = false`, `indeterminate: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `focus`, `blur`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### ColorPicker @@ -406,7 +406,7 @@ Theme-aware, responsive color picker component. - Mount: `data-component="ColorPicker"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Color"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = "#2563eb"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### FileInput @@ -415,7 +415,7 @@ Theme-aware, responsive file input component. - Mount: `data-component="FileInput"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "File"`, `hiddenLabel: boolean = false`, `placeholder: string = "Choose a file"`, `value: string = ""`, `icon: string = "icon-[lucide--upload]"`, `iconPosition: string = "start"`, `accept: string = ""`, `multiple: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `select`, `clear`, `invalid` +- Outputs: `input({ files: File[]; name: string; sourceEvent: Event })`, `change({ files: File[]; name: string; sourceEvent: Event })`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ files: File[]; name: string; sourceEvent: Event })`, `clear({ name: string; sourceEvent: Event })`, `invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Input @@ -424,7 +424,7 @@ Theme-aware, responsive input component. - Mount: `data-component="Input"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `type: string = "text"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `autocomplete: string = ""`, `inputmode: string = ""`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = ""`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `invalid`, `keydown`, `keyup` +- Outputs: `input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `focus({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `blur({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `invalid({ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event })`, `keydown({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })`, `keyup({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })` ### InputGroup @@ -433,25 +433,25 @@ Theme-aware, responsive input group component. - Mount: `data-component="InputGroup"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input group"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `startText: string = ""`, `endText: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `actionLabel: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `submit`, `action` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `submit({ value: string | number | boolean | null | object; name: string; sourceEvent: Event })`, `action({ name: string; sourceEvent: Event })` ### Radio Theme-aware, responsive radio component. - Mount: `data-component="Radio"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Radio"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `options: string = []`, `checked: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Radio"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `options: unknown[] = []`, `checked: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### RangeSlider Theme-aware, responsive range slider component. - Mount: `data-component="RangeSlider"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Range"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: number = 50`, `min: number = 0`, `max: number = 100`, `step: number = 1`, `showValue: boolean = true`, `showBounds: boolean = true`, `showSteps: boolean = false`, `marks: string = []`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Range"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: number = 50`, `min: number = 0`, `max: number = 100`, `step: number = 1`, `showValue: boolean = true`, `showBounds: boolean = true`, `showSteps: boolean = false`, `marks: unknown[] = []`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input(({ 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[]))`, `change(({ 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[]))`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### SearchBox @@ -460,16 +460,16 @@ Provide an accessible responsive search field with labels, validation states, si - Mount: `data-component="SearchBox"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### Select Theme-aware, responsive select component. - Mount: `data-component="Select"` -- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `hiddenLabel: boolean = false`, `value: string = ""`, `values: string = []`, `options: string = []`, `placeholder: string = "Select an option"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `multiple: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `hiddenLabel: boolean = false`, `value: string = ""`, `values: unknown[] = []`, `options: unknown[] = []`, `placeholder: string = "Select an option"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `multiple: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `open({ name: string; sourceEvent: Event })`, `close({ name: string; sourceEvent: Event })`, `invalid({ name: string; message: string; sourceEvent: Event })` ### Switch @@ -478,7 +478,7 @@ Theme-aware, responsive switch component. - Mount: `data-component="Switch"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `checked: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Textarea @@ -487,7 +487,7 @@ Theme-aware, responsive textarea component. - Mount: `data-component="Textarea"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Textarea"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `rows: number = 5`, `resize: string = "vertical"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `minlength: string = ""`, `maxlength: string = ""`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `invalid` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `invalid({ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event })` ### TimePicker @@ -496,7 +496,7 @@ Theme-aware, responsive time picker component. - Mount: `data-component="TimePicker"` - Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Time"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = "icon-[lucide--clock-3]"`, `iconPosition: string = "end"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `format: string = "24"`, `minuteStep: number = 5`, `hours: string = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]`, `minutes: string = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` - Slots: None -- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid` +- Outputs: `input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `focus({ value: string; name: string; sourceEvent: Event })`, `blur({ value: string; name: string; sourceEvent: Event })`, `open({ value: string; name: string; sourceEvent: Event })`, `close({ value: string; name: string; sourceEvent: Event })`, `invalid({ name: string; message: string; sourceEvent: Event })` ## Integrations @@ -505,108 +505,108 @@ Theme-aware, responsive time picker component. Theme-aware, responsive advanced date picker component. - Mount: `data-component="AdvancedDatePicker"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `open`, `close`, `clear` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### AdvancedRangeSlider Theme-aware, responsive advanced range slider component. - Mount: `data-component="AdvancedRangeSlider"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `start`, `end` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `end({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Chart Theme-aware, responsive chart component. - Mount: `data-component="Chart"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `dataPointClick`, `legendToggle` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `dataPointClick({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `legendToggle({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Clipboard Theme-aware, responsive clipboard component. - Mount: `data-component="Clipboard"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `copy`, `success`, `error` +- Outputs: `copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` ### Confetti Theme-aware, responsive confetti component. - Mount: `data-component="Confetti"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `start`, `complete` +- Outputs: `start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### DataMap Theme-aware, responsive data map component. - Mount: `data-component="DataMap"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `change` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### DataTable Theme-aware, responsive data table component. - Mount: `data-component="DataTable"` -- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: unknown[] = []`, `rows: unknown[] = []`, `striped: boolean = true`, `class: string = ""` - Slots: `default` -- Events: `sort`, `select`, `change`, `rowClick`, `pageChange` +- Outputs: `sort({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `rowClick({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `pageChange({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### DragAndDrop Theme-aware, responsive drag and drop component. - Mount: `data-component="DragAndDrop"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `dragStart`, `dragEnd`, `dragEnter`, `dragLeave`, `drop`, `change` +- Outputs: `dragStart({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragEnd({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragEnter({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragLeave({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `drop({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### FileUpload Theme-aware, responsive file upload component. - Mount: `data-component="FileUpload"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `select`, `upload`, `progress`, `success`, `error`, `cancel`, `remove` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `upload({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `progress({ progress: number; [key: string]: string | number | boolean | null | object } | number)`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)`, `cancel({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `remove({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Map Present responsive location information and markers with map-ready metadata and movement or marker events. - Mount: `data-component="Map"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### ToastNotifications Theme-aware, responsive toast notifications component. - Mount: `data-component="ToastNotifications"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `add`, `dismiss`, `clear`, `action` +- Outputs: `add({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### WysiwygEditor Theme-aware, responsive wysiwyg editor component. - Mount: `data-component="WysiwygEditor"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` - Slots: `default` -- Events: `input`, `change`, `focus`, `blur` +- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ## Layout @@ -617,7 +617,7 @@ Create responsive balanced content columns with configurable count, gap, density - Mount: `data-component="Columns"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Container @@ -626,7 +626,7 @@ Constrain and align page content with responsive gutters and compact, wide, or f - Mount: `data-component="Container"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### CustomScrollbar @@ -635,7 +635,7 @@ Theme-aware, responsive custom scrollbar component. - Mount: `data-component="CustomScrollbar"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: `scroll` +- Outputs: `scroll({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Divider @@ -644,25 +644,25 @@ Separate related horizontal or vertical content with optional labels, sizes, and - Mount: `data-component="Divider"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### FeatureGrid Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid. - Mount: `data-component="FeatureGrid"` -- Props: `items: string = []`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `variant: string = "default"`, `label: string = "Features"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `items: unknown[] = []`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `variant: string = "default"`, `label: string = "Features"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Footer Render structured responsive footer navigation, pre and post content, copyright content, links, and public events. - Mount: `data-component="Footer"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: string = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: unknown[] = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""` - Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right` -- Events: `select`, `action` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Grid @@ -671,7 +671,7 @@ Arrange arbitrary content in a responsive configurable CSS grid with stable colu - Mount: `data-component="Grid"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Image @@ -680,7 +680,7 @@ Render a responsive image with explicit dimensions, loading behavior, alternativ - Mount: `data-component="Image"` - Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### Kbd @@ -689,7 +689,7 @@ Theme-aware, responsive kbd component. - Mount: `data-component="Kbd"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "⌘ K"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### LayoutSplitter @@ -698,7 +698,7 @@ Theme-aware, responsive layout splitter component. - Mount: `data-component="LayoutSplitter"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: `resizeStart`, `resize`, `resizeEnd` +- Outputs: `resizeStart({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `resize({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `resizeEnd({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` ### Link @@ -707,7 +707,7 @@ Render an accessible internal or external link with target, relation, size, colo - Mount: `data-component="Link"` - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### PublicPageShell @@ -716,7 +716,7 @@ Provide the outer responsive structure, width, background, slots, overflow, and - Mount: `data-component="PublicPageShell"` - Props: `maxWidth: string = "full"`, `fullWidth: boolean = true`, `headerOffset: string = "none"`, `background: string = "default"`, `overflow: string = "clip"`, `minHeight: string = "screen"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""` - Slots: `before`, `default`, `after` -- Events: None +- Outputs: None ### Section @@ -725,7 +725,7 @@ Create a responsive themed page section with controlled spacing, width, borders, - Mount: `data-component="Section"` - Props: `id: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `spacing: string = "lg"`, `maxWidth: string = "xl"`, `fullWidth: boolean = false`, `borderTop: boolean = false`, `borderBottom: boolean = false`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### SectionHeader @@ -734,7 +734,7 @@ Introduce a section with an eyebrow, title, description, alignment, and responsi - Mount: `data-component="SectionHeader"` - Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `headingLevel: number = 2`, `maxWidth: string = "3xl"`, `class: string = ""` - Slots: `icon`, `default`, `actions` -- Events: None +- Outputs: None ### Typography @@ -743,7 +743,7 @@ Apply consistent readable responsive typography, widths, columns, spacing, and e - Mount: `data-component="Typography"` - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ## Marketing @@ -754,16 +754,16 @@ Publish a responsive notice with badge, icon, supporting copy, action, dismiss b - Mount: `data-component="AnnouncementBar"` - Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `width: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""` - Slots: None -- Events: `dismiss` +- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### CTASection Close a page or major section with conversion-focused copy, actions, and optional supporting visual content. - Mount: `data-component="CTASection"` -- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: string = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""` +- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""` - Slots: `default`, `actions`, `visual`, `footer` -- Events: None +- Outputs: None ### FeatureCard @@ -772,7 +772,7 @@ Present one linked feature or service with media, icon, badge, description, and - Mount: `data-component="FeatureCard"` - Props: `icon: string = ""`, `iconStyle: string = "soft"`, `iconSize: string = "default"`, `eyebrow: string = ""`, `title: string = "Feature"`, `description: string = ""`, `image: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `imageAspect: string = "wide"`, `imageLoading: string = "lazy"`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `actionLabel: string = "Learn more"`, `actionIcon: string = ""`, `showArrow: boolean = true`, `stretchedLink: boolean = true`, `badge: string = ""`, `badgeColor: string = "primary"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `disabled: boolean = false`, `class: string = ""` - Slots: `media`, `icon`, `default`, `footer` -- Events: None +- Outputs: None ### FeatureIconCard @@ -781,25 +781,25 @@ Present a compact feature or benefit with a styled icon, title, description, bad - Mount: `data-component="FeatureIconCard"` - Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""` - Slots: `default`, `footer` -- Events: None +- Outputs: None ### Hero Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel. - Mount: `data-component="Hero"` -- Props: `eyebrow: string = ""`, `eyebrowIcon: string = ""`, `icon: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "split"`, `visualPosition: string = "right"`, `visualStyle: string = "plain"`, `showDecorations: boolean = true`, `fullBleed: boolean = true`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualIcon: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualItems: string = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `primaryTarget: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `secondaryTarget: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `tertiaryIcon: string = ""`, `tertiaryTarget: string = ""`, `badges: string = []`, `trustItems: string = []`, `maxWidth: string = "xl"`, `class: string = ""` +- Props: `eyebrow: string = ""`, `eyebrowIcon: string = ""`, `icon: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "split"`, `visualPosition: string = "right"`, `visualStyle: string = "plain"`, `showDecorations: boolean = true`, `fullBleed: boolean = true`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualIcon: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualItems: unknown[] = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `primaryTarget: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `secondaryTarget: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `tertiaryIcon: string = ""`, `tertiaryTarget: string = ""`, `badges: unknown[] = []`, `trustItems: unknown[] = []`, `maxWidth: string = "xl"`, `class: string = ""` - Slots: `eyebrow`, `actions`, `trust`, `default`, `visual`, `footer` -- Events: None +- Outputs: None ### HeroActions Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking. - Mount: `data-component="HeroActions"` -- Props: `actions: string = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""` +- Props: `actions: unknown[] = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ### MarketingSectionHeader @@ -808,25 +808,25 @@ Introduce marketing content with an eyebrow, title, description, and optional li - Mount: `data-component="MarketingSectionHeader"` - Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "split"`, `size: string = "default"`, `color: string = "primary"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `actionExternal: boolean = false`, `class: string = ""` - Slots: `icon`, `actions`, `default` -- Events: None +- Outputs: None ### PageHeader Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions. - Mount: `data-component="PageHeader"` -- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `id: string = "page-title"`, `align: string = "left"`, `centered: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `maxWidth: string = "xl"`, `showBreadcrumbs: boolean = false`, `breadcrumbs: string = []`, `breadcrumbParent: string = ""`, `breadcrumbParentHref: string = ""`, `breadcrumbCurrent: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `borderBottom: boolean = true`, `class: string = ""` +- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `id: string = "page-title"`, `align: string = "left"`, `centered: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `maxWidth: string = "xl"`, `showBreadcrumbs: boolean = false`, `breadcrumbs: unknown[] = []`, `breadcrumbParent: string = ""`, `breadcrumbParentHref: string = ""`, `breadcrumbCurrent: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `borderBottom: boolean = true`, `class: string = ""` - Slots: `meta`, `actions`, `default` -- Events: None +- Outputs: None ### SplitHero Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel. - Mount: `data-component="SplitHero"` -- Props: `eyebrow: string = ""`, `eyebrowIcon: string = "icon-[lucide--sparkles]"`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "xl"`, `fullBleed: boolean = true`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: string = []`, `visualStyle: string = "panel"`, `trustItems: string = []`, `class: string = ""` +- Props: `eyebrow: string = ""`, `eyebrowIcon: string = "icon-[lucide--sparkles]"`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "xl"`, `fullBleed: boolean = true`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualStyle: string = "panel"`, `trustItems: unknown[] = []`, `class: string = ""` - Slots: `default`, `actions`, `trust`, `visual` -- Events: None +- Outputs: None ### TextLink @@ -835,7 +835,7 @@ Render an accessible text action with optional icon, arrow, underline, external - Mount: `data-component="TextLink"` - Props: `label: string = "Learn more"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `showArrow: boolean = true`, `underline: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `disabled: boolean = false`, `class: string = ""` - Slots: None -- Events: `click`, `focus`, `blur` +- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ## Navigation @@ -846,88 +846,88 @@ Provide a responsive floating control that returns long pages to the top and can - Mount: `data-component="BackToTop"` - Props: `threshold: number = 500`, `label: string = "Back to top"`, `ariaLabel: string = "Scroll back to top"`, `icon: string = "icon-[lucide--arrow-up]"`, `position: string = "right"`, `offset: string = "md"`, `behavior: string = "smooth"`, `showProgress: boolean = false`, `showLabel: boolean = false`, `alwaysVisible: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "round"`, `class: string = ""` - Slots: None -- Events: None +- Outputs: None ### Breadcrumb Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events. - Mount: `data-component="Breadcrumb"` -- Props: `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""` +- Props: `label: string = "Breadcrumb"`, `items: unknown[] = []`, `active: string = ""`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""` - Slots: None -- Events: `select` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### MegaMenu Theme-aware, responsive mega menu component. - Mount: `data-component="MegaMenu"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `open`, `close`, `select` +- Outputs: `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Nav Theme-aware, responsive nav component. - Mount: `data-component="Nav"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `select`, `change` +- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Navbar Theme-aware, responsive navbar component. - Mount: `data-component="Navbar"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: string = {}`, `items: string = []`, `actions: string = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: Record = {}`, `items: unknown[] = []`, `actions: unknown[] = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `class: string = ""` - Slots: `topbar`, `actions` -- Events: `toggle`, `open`, `close`, `select`, `action` +- Outputs: `toggle({ open: boolean })`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string })`, `action({ item: string | number | boolean | null | object; value: string | number | boolean })` ### Pagination Theme-aware, responsive pagination component. - Mount: `data-component="Pagination"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `change`, `previous`, `next` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `previous({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `next({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Scrollspy Theme-aware, responsive scrollspy component. - Mount: `data-component="Scrollspy"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `change` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` ### Sidebar Theme-aware, responsive sidebar component. - Mount: `data-component="Sidebar"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `mobileLabel: string = "Open navigation"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `mobileLabel: string = "Open navigation"`, `class: string = ""` - Slots: `default` -- Events: `toggle`, `open`, `close`, `select` +- Outputs: `toggle({ open: boolean })`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ source: string })`, `select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string })` ### Stepper Theme-aware, responsive stepper component. - Mount: `data-component="Stepper"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: `change`, `previous`, `next`, `complete` +- Outputs: `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `previous({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `next({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` ### Tabs Switch between related responsive content panels with horizontal or vertical orientation and selection events. - Mount: `data-component="Tabs"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: unknown[] = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""` - Slots: `default` -- Events: None +- Outputs: None ## Overlays @@ -936,9 +936,9 @@ Switch between related responsive content panels with horizontal or vertical ori Open an accessible keyboard-aware action menu from pointer or keyboard context interactions. - Mount: `data-component="ContextMenu"` -- Props: `items: string = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `trigger: string = "contextmenu"`, `placement: string = "pointer"`, `align: string = "start"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `title: string = ""`, `description: string = ""`, `label: string = "Context menu"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `minWidth: string = "14rem"`, `maxWidth: string = "20rem"`, `class: string = ""` +- Props: `items: unknown[] = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `trigger: string = "contextmenu"`, `placement: string = "pointer"`, `align: string = "start"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `title: string = ""`, `description: string = ""`, `label: string = "Context menu"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `minWidth: string = "14rem"`, `maxWidth: string = "20rem"`, `class: string = ""` - Slots: `trigger`, `header`, `default`, `footer` -- Events: `open`, `close`, `select`, `action` +- Outputs: `open({ x: number; y: number; trigger: string; sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `select({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })`, `action({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })` ### Drawer @@ -947,16 +947,16 @@ Present responsive modal side or bottom content with focus management, backdrop - Mount: `data-component="Drawer"` - Props: `open: boolean = false`, `defaultOpen: boolean = false`, `placement: string = "right"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `title: string = "Drawer"`, `description: string = ""`, `icon: string = ""`, `label: string = "Drawer"`, `closeLabel: string = "Close drawer"`, `showClose: boolean = true`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `overlay: boolean = true`, `scrollable: boolean = true`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `class: string = ""` - Slots: `trigger`, `header`, `default`, `footer` -- Events: `open`, `close`, `cancel` +- Outputs: `open({ placement: string; sourceEvent: Event })`, `close({ reason: string; placement: string; sourceEvent: Event })`, `cancel({ placement: string; sourceEvent: Event })` ### Dropdown Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement. - Mount: `data-component="Dropdown"` -- Props: `items: string = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `label: string = "Open menu"`, `icon: string = ""`, `showChevron: boolean = true`, `menuLabel: string = "Dropdown menu"`, `placement: string = "bottom-start"`, `width: string = "md"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `emptyLabel: string = "No menu items"`, `class: string = ""` +- Props: `items: unknown[] = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `label: string = "Open menu"`, `icon: string = ""`, `showChevron: boolean = true`, `menuLabel: string = "Dropdown menu"`, `placement: string = "bottom-start"`, `width: string = "md"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `emptyLabel: string = "No menu items"`, `class: string = ""` - Slots: `trigger`, `header`, `default`, `footer` -- Events: `toggle`, `open`, `close`, `select`, `action` +- Outputs: `toggle({ open: boolean; sourceEvent: Event; reason?: object })`, `open({ sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `select({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })`, `action({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })` ### Modal @@ -965,7 +965,7 @@ Present an accessible modal dialog with focus management, confirmation, cancella - Mount: `data-component="Modal"` - Props: `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = "Modal"`, `description: string = ""`, `icon: string = ""`, `label: string = "Modal dialog"`, `size: string = "md"`, `placement: string = "center"`, `color: string = "primary"`, `variant: string = "default"`, `showClose: boolean = true`, `closeLabel: string = "Close modal"`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `closeOnCancel: boolean = true`, `closeOnConfirm: boolean = false`, `showFooter: boolean = true`, `cancelLabel: string = "Cancel"`, `cancelIcon: string = ""`, `confirmLabel: string = "Confirm"`, `confirmIcon: string = ""`, `confirmDisabled: boolean = false`, `confirmLoading: boolean = false`, `destructive: boolean = false`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `scrollable: boolean = true`, `class: string = ""` - Slots: `trigger`, `header`, `default`, `footer` -- Events: `open`, `close`, `cancel`, `confirm` +- Outputs: `open({ sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `cancel({ sourceEvent: Event })`, `confirm({ sourceEvent: Event })` ### Popover @@ -974,7 +974,7 @@ Display anchored supporting content with configurable trigger, placement, respon - Mount: `data-component="Popover"` - Props: `open: boolean = false`, `defaultOpen: boolean = false`, `triggerLabel: string = "Open popover"`, `triggerIcon: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `placement: string = "bottom-start"`, `width: string = "md"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `showArrow: boolean = true`, `showClose: boolean = false`, `closeLabel: string = "Close popover"`, `closeOnOutside: boolean = true`, `closeOnEscape: boolean = true`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `closeOnAction: boolean = true`, `disabled: boolean = false`, `class: string = ""` - Slots: `trigger`, `header`, `default`, `footer` -- Events: `toggle`, `open`, `close`, `action` +- Outputs: `toggle({ open: boolean; sourceEvent: Event; reason?: object })`, `open({ sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `action({ href: string; sourceEvent: Event })` ### Tooltip @@ -983,7 +983,7 @@ Show concise accessible contextual help on hover, focus, click, or controlled op - Mount: `data-component="Tooltip"` - Props: `id: string = ""`, `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = ""`, `description: string = ""`, `content: string = "Tooltip"`, `trigger: string = "hover"`, `placement: string = "top"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "dark"`, `maxWidth: string = "18rem"`, `offset: number = 10`, `showArrow: boolean = true`, `interactive: boolean = false`, `disabled: boolean = false`, `class: string = ""` - Slots: `trigger`, `default` -- Events: `toggle`, `open`, `close` +- Outputs: `toggle({ open: boolean; reason: string; sourceEvent: Event })`, `open({ reason: string; sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })` ## Tables @@ -992,6 +992,6 @@ Show concise accessible contextual help on hover, focus, click, or controlled op Theme-aware, responsive table component. - Mount: `data-component="Table"` -- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""` +- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: unknown[] = []`, `rows: unknown[] = []`, `striped: boolean = true`, `class: string = ""` - Slots: `default` -- Events: `sort`, `select`, `rowClick` +- Outputs: `sort({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `rowClick({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` diff --git a/packages/ui/component-catalog.json b/packages/ui/component-catalog.json index 66e20a54..0c82d960 100644 --- a/packages/ui/component-catalog.json +++ b/packages/ui/component-catalog.json @@ -1,91 +1,46 @@ { - "sourceDocuments": [ - "Screenshot-directed WRNexus UI catalog reset" - ], + "sourceDocuments": ["Screenshot-directed WRNexus UI catalog reset"], "components": [ - { - "name": "AdvancedSelect", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive advanced select component.", - "events": [ - "search", - "select", - "change", - "clear", - "open", - "close", - "load", - "error" - ] - }, - { - "name": "ComboBox", - "category": "advanced-forms", - "purpose": "Editable autocomplete combobox with local and remote suggestions.", - "events": [ - "search", - "select", - "change", - "clear", - "open", - "close", - "load", - "error" - ] - }, - { - "name": "CopyMarkup", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive copy markup component." - }, - { - "name": "InputNumber", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive input number component." - }, - { - "name": "PinInput", - "category": "advanced-forms", - "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.", - "events": [ - "input", - "change", - "complete", - "paste", - "clear", - "error" - ] - }, - { - "name": "StrongPassword", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive strong password component." - }, - { - "name": "ToggleCount", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive toggle count component." - }, - { - "name": "TogglePassword", - "category": "advanced-forms", - "purpose": "Accessible password field with optional show and hide controls.", - "events": [ - "input", - "change", - "toggle" - ] - }, { "name": "Accordion", "category": "base", "purpose": "Theme-aware, responsive accordion component." }, + { + "name": "AdvancedDatePicker", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced date picker component." + }, + { + "name": "AdvancedRangeSlider", + "category": "integrations", + "purpose": "Theme-aware, responsive advanced range slider component." + }, + { + "name": "AdvancedSelect", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive advanced select component." + }, { "name": "Alert", "category": "base", "purpose": "Theme-aware, responsive alert component." }, + { + "name": "AnnouncementBar", + "category": "marketing", + "purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls." + }, + { + "name": "AuthForm", + "category": "core", + "purpose": "Reusable auth form component." + }, + { + "name": "AuthSplitLayout", + "category": "core", + "purpose": "Reusable auth split layout component." + }, { "name": "Avatar", "category": "base", @@ -96,6 +51,11 @@ "category": "base", "purpose": "Theme-aware, responsive avatar group component." }, + { + "name": "BackToTop", + "category": "navigation", + "purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress." + }, { "name": "Badge", "category": "base", @@ -106,6 +66,11 @@ "category": "base", "purpose": "Theme-aware, responsive blockquote component." }, + { + "name": "Breadcrumb", + "category": "navigation", + "purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events." + }, { "name": "Button", "category": "base", @@ -126,191 +91,76 @@ "category": "base", "purpose": "Theme-aware, responsive carousel component." }, + { + "name": "Chart", + "category": "integrations", + "purpose": "Theme-aware, responsive chart component." + }, { "name": "ChatBubble", "category": "base", "purpose": "Theme-aware, responsive chat bubble component." }, - { - "name": "Collapse", - "category": "base", - "purpose": "Theme-aware, responsive collapse component." - }, - { - "name": "DatePicker", - "category": "base", - "purpose": "Theme-aware, responsive date picker component." - }, - { - "name": "DeviceFrame", - "category": "base", - "purpose": "Theme-aware, responsive device frame component." - }, - { - "name": "FileUploadProgress", - "category": "base", - "purpose": "Theme-aware, responsive file upload progress component." - }, - { - "name": "LegendIndicator", - "category": "base", - "purpose": "Theme-aware, responsive legend indicator component." - }, - { - "name": "List", - "category": "base", - "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events." - }, - { - "name": "ListGroup", - "category": "base", - "purpose": "Theme-aware, responsive list group component." - }, - { - "name": "Marquee", - "category": "base", - "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior." - }, - { - "name": "Progress", - "category": "base", - "purpose": "Theme-aware, responsive progress component." - }, - { - "name": "Rating", - "category": "base", - "purpose": "Theme-aware, responsive rating component." - }, - { - "name": "Skeleton", - "category": "base", - "purpose": "Theme-aware, responsive skeleton component." - }, - { - "name": "Spinner", - "category": "base", - "purpose": "Theme-aware, responsive spinner component." - }, - { - "name": "StyledIcon", - "category": "base", - "purpose": "Theme-aware, responsive styled icon component." - }, - { - "name": "Timeline", - "category": "base", - "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata." - }, - { - "name": "Toast", - "category": "base", - "purpose": "Theme-aware, responsive toast component." - }, - { - "name": "TreeView", - "category": "base", - "purpose": "Theme-aware, responsive tree view component." - }, - { - "name": "MetricCard", - "category": "data", - "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action." - }, - { - "name": "MetricGrid", - "category": "data", - "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid." - }, - { - "name": "StatsBar", - "category": "data", - "purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals." - }, { "name": "Checkbox", "category": "forms", "purpose": "Theme-aware, responsive checkbox component." }, - { - "name": "ColorPicker", - "category": "forms", - "purpose": "Theme-aware, responsive color picker component." - }, - { - "name": "FileInput", - "category": "forms", - "purpose": "Theme-aware, responsive file input component." - }, - { - "name": "Input", - "category": "forms", - "purpose": "Theme-aware, responsive input component." - }, - { - "name": "InputGroup", - "category": "forms", - "purpose": "Theme-aware, responsive input group component." - }, - { - "name": "Radio", - "category": "forms", - "purpose": "Theme-aware, responsive radio component." - }, - { - "name": "RangeSlider", - "category": "forms", - "purpose": "Theme-aware, responsive range slider component." - }, - { - "name": "SearchBox", - "category": "forms", - "purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events." - }, - { - "name": "Select", - "category": "forms", - "purpose": "Theme-aware, responsive select component." - }, - { - "name": "Switch", - "category": "forms", - "purpose": "Theme-aware, responsive switch component." - }, - { - "name": "Textarea", - "category": "forms", - "purpose": "Theme-aware, responsive textarea component." - }, - { - "name": "TimePicker", - "category": "forms", - "purpose": "Theme-aware, responsive time picker component." - }, - { - "name": "AdvancedDatePicker", - "category": "integrations", - "purpose": "Theme-aware, responsive advanced date picker component." - }, - { - "name": "AdvancedRangeSlider", - "category": "integrations", - "purpose": "Theme-aware, responsive advanced range slider component." - }, - { - "name": "Chart", - "category": "integrations", - "purpose": "Theme-aware, responsive chart component." - }, { "name": "Clipboard", "category": "integrations", "purpose": "Theme-aware, responsive clipboard component." }, + { + "name": "Collapse", + "category": "base", + "purpose": "Theme-aware, responsive collapse component." + }, + { + "name": "ColorPicker", + "category": "forms", + "purpose": "Theme-aware, responsive color picker component." + }, + { + "name": "Columns", + "category": "layout", + "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width." + }, + { + "name": "ComboBox", + "category": "advanced-forms", + "purpose": "Editable autocomplete combobox with local and remote suggestions." + }, { "name": "Confetti", "category": "integrations", "purpose": "Theme-aware, responsive confetti component." }, + { + "name": "Container", + "category": "layout", + "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options." + }, + { + "name": "ContextMenu", + "category": "overlays", + "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions." + }, + { + "name": "CopyMarkup", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive copy markup component." + }, + { + "name": "CTASection", + "category": "marketing", + "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content." + }, + { + "name": "CustomScrollbar", + "category": "layout", + "purpose": "Theme-aware, responsive custom scrollbar component." + }, { "name": "DataMap", "category": "integrations", @@ -322,44 +172,14 @@ "purpose": "Theme-aware, responsive data table component." }, { - "name": "DragAndDrop", - "category": "integrations", - "purpose": "Theme-aware, responsive drag and drop component." + "name": "DatePicker", + "category": "base", + "purpose": "Theme-aware, responsive date picker component." }, { - "name": "FileUpload", - "category": "integrations", - "purpose": "Theme-aware, responsive file upload component." - }, - { - "name": "Map", - "category": "integrations", - "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events." - }, - { - "name": "ToastNotifications", - "category": "integrations", - "purpose": "Theme-aware, responsive toast notifications component." - }, - { - "name": "WysiwygEditor", - "category": "integrations", - "purpose": "Theme-aware, responsive wysiwyg editor component." - }, - { - "name": "Columns", - "category": "layout", - "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width." - }, - { - "name": "Container", - "category": "layout", - "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options." - }, - { - "name": "CustomScrollbar", - "category": "layout", - "purpose": "Theme-aware, responsive custom scrollbar component." + "name": "DeviceFrame", + "category": "base", + "purpose": "Theme-aware, responsive device frame component." }, { "name": "Divider", @@ -367,164 +187,9 @@ "purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors." }, { - "name": "FeatureGrid", - "category": "layout", - "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid." - }, - { - "name": "Footer", - "category": "layout", - "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events." - }, - { - "name": "Grid", - "category": "layout", - "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width." - }, - { - "name": "Image", - "category": "layout", - "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment." - }, - { - "name": "Kbd", - "category": "layout", - "purpose": "Theme-aware, responsive kbd component." - }, - { - "name": "LayoutSplitter", - "category": "layout", - "purpose": "Theme-aware, responsive layout splitter component." - }, - { - "name": "Link", - "category": "layout", - "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events." - }, - { - "name": "PublicPageShell", - "category": "layout", - "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages." - }, - { - "name": "Section", - "category": "layout", - "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment." - }, - { - "name": "SectionHeader", - "category": "layout", - "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy." - }, - { - "name": "Typography", - "category": "layout", - "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy." - }, - { - "name": "AnnouncementBar", - "category": "marketing", - "purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls." - }, - { - "name": "CTASection", - "category": "marketing", - "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content." - }, - { - "name": "FeatureCard", - "category": "marketing", - "purpose": "Present one linked feature or service with media, icon, badge, description, and action." - }, - { - "name": "FeatureIconCard", - "category": "marketing", - "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link." - }, - { - "name": "Hero", - "category": "marketing", - "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel." - }, - { - "name": "HeroActions", - "category": "marketing", - "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking." - }, - { - "name": "MarketingSectionHeader", - "category": "marketing", - "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action." - }, - { - "name": "PageHeader", - "category": "marketing", - "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions." - }, - { - "name": "SplitHero", - "category": "marketing", - "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel." - }, - { - "name": "TextLink", - "category": "marketing", - "purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling." - }, - { - "name": "BackToTop", - "category": "navigation", - "purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress." - }, - { - "name": "Breadcrumb", - "category": "navigation", - "purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events." - }, - { - "name": "MegaMenu", - "category": "navigation", - "purpose": "Theme-aware, responsive mega menu component." - }, - { - "name": "Nav", - "category": "navigation", - "purpose": "Theme-aware, responsive nav component." - }, - { - "name": "Navbar", - "category": "navigation", - "purpose": "Theme-aware, responsive navbar component." - }, - { - "name": "Pagination", - "category": "navigation", - "purpose": "Theme-aware, responsive pagination component." - }, - { - "name": "Scrollspy", - "category": "navigation", - "purpose": "Theme-aware, responsive scrollspy component." - }, - { - "name": "Sidebar", - "category": "navigation", - "purpose": "Theme-aware, responsive sidebar component." - }, - { - "name": "Stepper", - "category": "navigation", - "purpose": "Theme-aware, responsive stepper component." - }, - { - "name": "Tabs", - "category": "navigation", - "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events." - }, - { - "name": "ContextMenu", - "category": "overlays", - "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions." + "name": "DragAndDrop", + "category": "integrations", + "purpose": "Theme-aware, responsive drag and drop component." }, { "name": "Drawer", @@ -536,25 +201,345 @@ "category": "overlays", "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement." }, + { + "name": "FeatureCard", + "category": "marketing", + "purpose": "Present one linked feature or service with media, icon, badge, description, and action." + }, + { + "name": "FeatureGrid", + "category": "layout", + "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid." + }, + { + "name": "FeatureIconCard", + "category": "marketing", + "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link." + }, + { + "name": "FileInput", + "category": "forms", + "purpose": "Theme-aware, responsive file input component." + }, + { + "name": "FileUpload", + "category": "integrations", + "purpose": "Theme-aware, responsive file upload component." + }, + { + "name": "FileUploadProgress", + "category": "base", + "purpose": "Theme-aware, responsive file upload progress component." + }, + { + "name": "Footer", + "category": "layout", + "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events." + }, + { + "name": "Grid", + "category": "layout", + "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width." + }, + { + "name": "Hero", + "category": "marketing", + "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel." + }, + { + "name": "HeroActions", + "category": "marketing", + "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking." + }, + { + "name": "Image", + "category": "layout", + "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment." + }, + { + "name": "Input", + "category": "forms", + "purpose": "Theme-aware, responsive input component." + }, + { + "name": "InputGroup", + "category": "forms", + "purpose": "Theme-aware, responsive input group component." + }, + { + "name": "InputNumber", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive input number component." + }, + { + "name": "Kbd", + "category": "layout", + "purpose": "Theme-aware, responsive kbd component." + }, + { + "name": "LayoutSplitter", + "category": "layout", + "purpose": "Theme-aware, responsive layout splitter component." + }, + { + "name": "LegendIndicator", + "category": "base", + "purpose": "Theme-aware, responsive legend indicator component." + }, + { + "name": "Link", + "category": "layout", + "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events." + }, + { + "name": "List", + "category": "base", + "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events." + }, + { + "name": "ListGroup", + "category": "base", + "purpose": "Theme-aware, responsive list group component." + }, + { + "name": "Map", + "category": "integrations", + "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events." + }, + { + "name": "MarketingSectionHeader", + "category": "marketing", + "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action." + }, + { + "name": "Marquee", + "category": "base", + "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior." + }, + { + "name": "MegaMenu", + "category": "navigation", + "purpose": "Theme-aware, responsive mega menu component." + }, + { + "name": "MetricCard", + "category": "data", + "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action." + }, + { + "name": "MetricGrid", + "category": "data", + "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid." + }, { "name": "Modal", "category": "overlays", "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing." }, + { + "name": "Nav", + "category": "navigation", + "purpose": "Theme-aware, responsive nav component." + }, + { + "name": "Navbar", + "category": "navigation", + "purpose": "Theme-aware, responsive navbar component." + }, + { + "name": "PageHeader", + "category": "marketing", + "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions." + }, + { + "name": "Pagination", + "category": "navigation", + "purpose": "Theme-aware, responsive pagination component." + }, + { + "name": "PinInput", + "category": "advanced-forms", + "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support." + }, { "name": "Popover", "category": "overlays", "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events." }, { - "name": "Tooltip", - "category": "overlays", - "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state." + "name": "PortalDashboard", + "category": "core", + "purpose": "Reusable portal dashboard component." + }, + { + "name": "PreferenceSwitcher", + "category": "core", + "purpose": "Reusable preference switcher component." + }, + { + "name": "Progress", + "category": "base", + "purpose": "Theme-aware, responsive progress component." + }, + { + "name": "PublicPageShell", + "category": "layout", + "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages." + }, + { + "name": "Radio", + "category": "forms", + "purpose": "Theme-aware, responsive radio component." + }, + { + "name": "RangeSlider", + "category": "forms", + "purpose": "Theme-aware, responsive range slider component." + }, + { + "name": "Rating", + "category": "base", + "purpose": "Theme-aware, responsive rating component." + }, + { + "name": "Scrollspy", + "category": "navigation", + "purpose": "Theme-aware, responsive scrollspy component." + }, + { + "name": "SearchBox", + "category": "forms", + "purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events." + }, + { + "name": "Section", + "category": "layout", + "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment." + }, + { + "name": "SectionHeader", + "category": "layout", + "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy." + }, + { + "name": "Select", + "category": "forms", + "purpose": "Theme-aware, responsive select component." + }, + { + "name": "Sidebar", + "category": "navigation", + "purpose": "Theme-aware, responsive sidebar component." + }, + { + "name": "Skeleton", + "category": "base", + "purpose": "Theme-aware, responsive skeleton component." + }, + { + "name": "Spinner", + "category": "base", + "purpose": "Theme-aware, responsive spinner component." + }, + { + "name": "SplitHero", + "category": "marketing", + "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel." + }, + { + "name": "StatsBar", + "category": "data", + "purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals." + }, + { + "name": "Stepper", + "category": "navigation", + "purpose": "Theme-aware, responsive stepper component." + }, + { + "name": "StrongPassword", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive strong password component." + }, + { + "name": "StyledIcon", + "category": "base", + "purpose": "Theme-aware, responsive styled icon component." + }, + { + "name": "Switch", + "category": "forms", + "purpose": "Theme-aware, responsive switch component." }, { "name": "Table", "category": "tables", "purpose": "Theme-aware, responsive table component." + }, + { + "name": "Tabs", + "category": "navigation", + "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events." + }, + { + "name": "Textarea", + "category": "forms", + "purpose": "Theme-aware, responsive textarea component." + }, + { + "name": "TextLink", + "category": "marketing", + "purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling." + }, + { + "name": "Timeline", + "category": "base", + "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata." + }, + { + "name": "TimePicker", + "category": "forms", + "purpose": "Theme-aware, responsive time picker component." + }, + { + "name": "Toast", + "category": "base", + "purpose": "Theme-aware, responsive toast component." + }, + { + "name": "ToastNotifications", + "category": "integrations", + "purpose": "Theme-aware, responsive toast notifications component." + }, + { + "name": "ToggleCount", + "category": "advanced-forms", + "purpose": "Theme-aware, responsive toggle count component." + }, + { + "name": "TogglePassword", + "category": "advanced-forms", + "purpose": "Accessible password field with optional show and hide controls." + }, + { + "name": "Tooltip", + "category": "overlays", + "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state." + }, + { + "name": "TreeView", + "category": "base", + "purpose": "Theme-aware, responsive tree view component." + }, + { + "name": "Typography", + "category": "layout", + "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy." + }, + { + "name": "WysiwygEditor", + "category": "integrations", + "purpose": "Theme-aware, responsive wysiwyg editor component." } ] } diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json index 98e76b5d..d85433a7 100644 --- a/packages/ui/component-reference.json +++ b/packages/ui/component-reference.json @@ -12,106 +12,137 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"accordion\"" + "default": "\"accordion\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "defaultOpen", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "alwaysOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "indicator", "type": "string", "required": false, - "default": "\"plus\"" + "default": "\"plus\"", + "options": [] }, { "name": "indicatorPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "showIndicator", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "bordered", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "separated", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "flush", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "contentItalic", "type": "boolean", "required": false, - "default": "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" }, @@ -125,46 +156,75 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Advanced Date Picker\"" + "default": "\"Advanced Date Picker\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "open", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "close", + "payloadType": "{ sourceEvent?: Event; [key: string]: 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" + } + ], "events": ["input", "change", "open", "close", "clear"], "source": "components/AdvancedDatePicker.wrn" }, @@ -178,46 +238,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Advanced Range Slider\"" + "default": "\"Advanced Range Slider\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "start", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "end", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["input", "change", "start", "end"], "source": "components/AdvancedRangeSlider.wrn" }, @@ -231,310 +316,395 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Advanced Select\"" + "default": "\"Advanced Select\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "values", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "groups", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Select an option\"" + "default": "\"Select an option\"", + "options": [] }, { "name": "placeholderIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "searchPlaceholder", "type": "string", "required": false, - "default": "\"Search options…\"" + "default": "\"Search options…\"", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "searchable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "clearable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "allowEmpty", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "tags", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "loadingLabel", "type": "string", "required": false, - "default": "\"Loading options…\"" + "default": "\"Loading options…\"", + "options": [] }, { "name": "emptyLabel", "type": "string", "required": false, - "default": "\"No options found\"" + "default": "\"No options found\"", + "options": [] }, { "name": "selectedOptionsLabel", "type": "string", "required": false, - "default": "\"Selected options\"" + "default": "\"Selected options\"", + "options": [] }, { "name": "clearLabel", "type": "string", "required": false, - "default": "\"Clear selection\"" + "default": "\"Clear selection\"", + "options": [] }, { "name": "createLabel", "type": "string", "required": false, - "default": "\"Create\"" + "default": "\"Create\"", + "options": [] }, { "name": "loadMoreLabel", "type": "string", "required": false, - "default": "\"Load more\"" + "default": "\"Load more\"", + "options": [] }, { "name": "searchMode", "type": "string", "required": false, - "default": "\"contains\"" + "default": "\"contains\"", + "options": [] }, { "name": "searchFields", "type": "string", "required": false, - "default": "\"label,description\"" + "default": "\"label,description\"", + "options": [] }, { "name": "minSearchLength", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "searchResultLimit", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "maxSelections", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "showCounter", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "counterTemplate", "type": "string", "required": false, - "default": "\"{selected} selected\"" + "default": "\"{selected} selected\"", + "options": [] }, { "name": "optionTemplate", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "selectedTemplate", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "closeOnSelect", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "scrollToSelected", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fixed", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom\"" + "default": "\"bottom\"", + "options": [] }, { "name": "remote", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "remoteUrl", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "remoteQueryParam", "type": "string", "required": false, - "default": "\"q\"" + "default": "\"q\"", + "options": [] }, { "name": "remoteDebounce", "type": "number", "required": false, - "default": "250" + "default": "250", + "options": [] }, { "name": "remoteAutoLoad", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "infinite", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "hasMore", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "page", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -548,130 +718,161 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"info\"" + "default": "\"info\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "radius", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "shadow", "type": "string", "required": false, - "default": "\"sm\"" + "default": "\"sm\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Alert\"" + "default": "\"Alert\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "actions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "showIcon", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dismissLabel", "type": "string", "required": false, - "default": "\"Dismiss alert\"" + "default": "\"Dismiss alert\"", + "options": [] }, { "name": "role", "type": "string", "required": false, - "default": "\"alert\"" + "default": "\"alert\"", + "options": [] }, { "name": "live", "type": "string", "required": false, - "default": "\"polite\"" + "default": "\"polite\"", + "options": [] }, { "name": "linkLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "linkHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "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" }, @@ -685,118 +886,143 @@ "name": "badge", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badgeIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "message", "type": "string", "required": false, - "default": "\"Announcement\"" + "default": "\"Announcement\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--megaphone]\"" + "default": "\"icon-[lucide--megaphone]\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dismissLabel", "type": "string", "required": false, - "default": "\"Dismiss announcement\"" + "default": "\"Dismiss announcement\"", + "options": [] }, { "name": "sticky", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "width", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "role", "type": "string", "required": false, - "default": "\"status\"" + "default": "\"status\"", + "options": [] }, { "name": "live", "type": "string", "required": false, - "default": "\"polite\"" + "default": "\"polite\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [ + { + "name": "dismiss", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["dismiss"], "source": "components/AnnouncementBar.wrn" }, @@ -810,82 +1036,117 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "mode", "type": "string", "required": false, - "default": "\"sign-in\"" + "default": "\"sign-in\"", + "options": [] }, { "name": "action", "type": "string", "required": false, - "default": "\"/api/auth/login\"" + "default": "\"/api/auth/login\"", + "options": [] }, { "name": "method", "type": "string", "required": false, - "default": "\"post\"" + "default": "\"post\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Sign in\"" + "default": "\"Sign in\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "returnTo", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "schema", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "showRemember", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showName", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "submitLabel", "type": "string", "required": false, - "default": "\"Continue\"" + "default": "\"Continue\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -899,52 +1160,61 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"Secure identity\"" + "default": "\"Secure identity\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Welcome back\"" + "default": "\"Welcome back\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "brand", "type": "string", "required": false, - "default": "\"Police Management System\"" + "default": "\"Police Management System\"", + "options": [] }, { "name": "features", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["aside-extra", "form"], + "outputs": [], "events": [], "source": "components/AuthSplitLayout.wrn" }, @@ -958,112 +1228,144 @@ "name": "src", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "alt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "initials", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "shape", "type": "string", "required": false, - "default": "\"circle\"" + "default": "\"circle\"", + "options": [] }, { "name": "status", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "statusLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "statusPosition", "type": "string", "required": false, - "default": "\"bottom\"" + "default": "\"bottom\"", + "options": [] }, { "name": "badge", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badgeIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badgeLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "tooltip", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "string", "required": false, - "default": "\"lazy\"" + "default": "\"lazy\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1075,78 +1377,96 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "shape", "type": "string", "required": false, - "default": "\"circle\"" + "default": "\"circle\"", + "options": [] }, { "name": "layout", "type": "string", "required": false, - "default": "\"stack\"" + "default": "\"stack\"", + "options": [] }, { "name": "maxVisible", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "borderColor", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "showTooltips", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "overflowLabel", "type": "string", "required": false, - "default": "\"Show remaining members\"" + "default": "\"Show remaining members\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1160,94 +1480,110 @@ "name": "threshold", "type": "number", "required": false, - "default": "500" + "default": "500", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Back to top\"" + "default": "\"Back to top\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Scroll back to top\"" + "default": "\"Scroll back to top\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--arrow-up]\"" + "default": "\"icon-[lucide--arrow-up]\"", + "options": [] }, { "name": "position", "type": "string", "required": false, - "default": "\"right\"" + "default": "\"right\"", + "options": [] }, { "name": "offset", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "behavior", "type": "string", "required": false, - "default": "\"smooth\"" + "default": "\"smooth\"", + "options": [] }, { "name": "showProgress", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "alwaysVisible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "shape", "type": "string", "required": false, - "default": "\"round\"" + "default": "\"round\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/BackToTop.wrn" }, @@ -1261,136 +1597,164 @@ "name": "label", "type": "string", "required": false, - "default": "\"Badge\"" + "default": "\"Badge\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "shape", "type": "string", "required": false, - "default": "\"pill\"" + "default": "\"pill\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "dot", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dotOnly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dotLabel", "type": "string", "required": false, - "default": "\"Status\"" + "default": "\"Status\"", + "options": [] }, { "name": "animated", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "avatarSrc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "avatarAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "dismissLabel", "type": "string", "required": false, - "default": "\"Remove badge\"" + "default": "\"Remove badge\"", + "options": [] }, { "name": "truncate", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"12rem\"" + "default": "\"12rem\"", + "options": [] }, { "name": "anchorLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "anchorIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"inline\"" + "default": "\"inline\"", + "options": [] }, { "name": "anchorLabelText", "type": "string", "required": false, - "default": "\"Badge anchor\"" + "default": "\"Badge anchor\"", + "options": [] } ], "slots": [], + "outputs": [ + { + "name": "dismiss", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["dismiss"], "source": "components/Badge.wrn" }, @@ -1404,82 +1768,96 @@ "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.\"" + "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": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "citationTitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "citationUrl", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "avatarSrc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "avatarAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "quoteMark", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "italic", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Blockquote.wrn" }, @@ -1493,76 +1871,94 @@ "name": "label", "type": "string", "required": false, - "default": "\"Breadcrumb\"" + "default": "\"Breadcrumb\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "separator", "type": "string", "required": false, - "default": "\"chevron\"" + "default": "\"chevron\"", + "options": [] }, { "name": "showHome", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "homeLabel", "type": "string", "required": false, - "default": "\"Home\"" + "default": "\"Home\"", + "options": [] }, { "name": "homeHref", "type": "string", "required": false, - "default": "\"/\"" + "default": "\"/\"", + "options": [] }, { "name": "homeIcon", "type": "string", "required": false, - "default": "\"icon-[lucide--house]\"" + "default": "\"icon-[lucide--house]\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"minimal\"" + "default": "\"minimal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1576,154 +1972,193 @@ "name": "label", "type": "string", "required": false, - "default": "\"Button\"" + "default": "\"Button\"", + "options": [] }, { "name": "loadingLabel", "type": "string", "required": false, - "default": "\"Loading…\"" + "default": "\"Loading…\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "as", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"button\"" + "default": "\"button\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "loading", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "pill", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "ariaPressed", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "ariaExpanded", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "ariaControls", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "autofocus", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "controlClass", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1735,84 +2170,111 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "responsive", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "attached", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "selectable", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "toolbar", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Button group\"" + "default": "\"Button group\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -1826,190 +2288,247 @@ "name": "title", "type": "string", "required": false, - "default": "\"Card title\"" + "default": "\"Card title\"", + "options": [] }, { "name": "subtitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "header", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "footer", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imageSrc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imageAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imagePosition", "type": "string", "required": false, - "default": "\"top\"" + "default": "\"top\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "headerActions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "navigation", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "activeNav", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "mobileNavigation", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "alertTitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "alertDescription", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "empty", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "emptyTitle", "type": "string", "required": false, - "default": "\"No data to show\"" + "default": "\"No data to show\"", + "options": [] }, { "name": "emptyIcon", "type": "string", "required": false, - "default": "\"icon-[lucide--inbox]\"" + "default": "\"icon-[lucide--inbox]\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "layout", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "hover", "type": "string", "required": false, - "default": "\"none\"" + "default": "\"none\"", + "options": [] }, { "name": "scrollable", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "maxHeight", "type": "string", "required": false, - "default": "\"18rem\"" + "default": "\"18rem\"", + "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2023,136 +2542,200 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "activeIndex", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "slidesPerView", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"0.75rem\"" + "default": "\"0.75rem\"", + "options": [] }, { "name": "showPagination", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isAutoPlay", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autoplayInterval", "type": "number", "required": false, - "default": "4000" + "default": "4000", + "options": [] }, { "name": "isInfiniteLoop", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isRTL", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isCentered", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isDraggable", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isAutoHeight", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "isSnap", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showCounter", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "thumbnails", "type": "string", "required": false, - "default": "\"none\"" + "default": "\"none\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Content carousel\"" + "default": "\"Content carousel\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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", @@ -2177,46 +2760,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Chart\"" + "default": "\"Chart\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "dataPointClick", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "legendToggle", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + } + ], "events": ["select", "dataPointClick", "legendToggle"], "source": "components/Chart.wrn" }, @@ -2230,70 +2834,99 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "oneSided", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showAvatars", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showMetadata", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Conversation\"" + "default": "\"Conversation\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2307,166 +2940,215 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Checkbox\"" + "default": "\"Checkbox\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"on\"" + "default": "\"on\"", + "options": [] }, { "name": "values", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "checked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "indeterminate", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "card", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "rightAligned", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "list", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2480,46 +3162,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Clipboard\"" + "default": "\"Clipboard\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "copy", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "success", + "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": ["copy", "success", "error"], "source": "components/Clipboard.wrn" }, @@ -2533,52 +3236,74 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "mode", "type": "string", "required": false, - "default": "\"panel\"" + "default": "\"panel\"", + "options": [] }, { "name": "initialOpenIndexes", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Collapsible content\"" + "default": "\"Collapsible content\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2592,118 +3317,155 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Color\"" + "default": "\"Color\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"#2563eb\"" + "default": "\"#2563eb\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -2717,40 +3479,47 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Columns.wrn" }, @@ -2764,250 +3533,325 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"ComboBox\"" + "default": "\"ComboBox\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "groups", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Search or select an option\"" + "default": "\"Search or select an option\"", + "options": [] }, { "name": "searchPlaceholder", "type": "string", "required": false, - "default": "\"Start typing…\"" + "default": "\"Start typing…\"", + "options": [] }, { "name": "clearable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "allowCustomValue", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "loadingLabel", "type": "string", "required": false, - "default": "\"Loading suggestions…\"" + "default": "\"Loading suggestions…\"", + "options": [] }, { "name": "emptyLabel", "type": "string", "required": false, - "default": "\"No matching options\"" + "default": "\"No matching options\"", + "options": [] }, { "name": "clearLabel", "type": "string", "required": false, - "default": "\"Clear value\"" + "default": "\"Clear value\"", + "options": [] }, { "name": "toggleLabel", "type": "string", "required": false, - "default": "\"Toggle suggestions\"" + "default": "\"Toggle suggestions\"", + "options": [] }, { "name": "searchMode", "type": "string", "required": false, - "default": "\"contains\"" + "default": "\"contains\"", + "options": [] }, { "name": "searchFields", "type": "string", "required": false, - "default": "\"label,description\"" + "default": "\"label,description\"", + "options": [] }, { "name": "minSearchLength", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "searchResultLimit", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "optionTemplate", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "closeOnSelect", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fixed", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom\"" + "default": "\"bottom\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"off\"" + "default": "\"off\"", + "options": [] }, { "name": "remote", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "remoteUrl", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "remoteQueryParam", "type": "string", "required": false, - "default": "\"q\"" + "default": "\"q\"", + "options": [] }, { "name": "remoteDebounce", "type": "number", "required": false, - "default": "250" + "default": "250", + "options": [] }, { "name": "remoteAutoLoad", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "infinite", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "hasMore", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "page", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "loadMoreLabel", "type": "string", "required": false, - "default": "\"Load more\"" + "default": "\"Load more\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3021,46 +3865,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Confetti\"" + "default": "\"Confetti\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "start", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "complete", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["start", "complete"], "source": "components/Confetti.wrn" }, @@ -3074,40 +3935,47 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Container.wrn" }, @@ -3119,114 +3987,150 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "open", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "trigger", "type": "string", "required": false, - "default": "\"contextmenu\"" + "default": "\"contextmenu\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"pointer\"" + "default": "\"pointer\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"raised\"" + "default": "\"raised\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Context menu\"" + "default": "\"Context menu\"", + "options": [] }, { "name": "closeOnSelect", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnOutside", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "minWidth", "type": "string", "required": false, - "default": "\"14rem\"" + "default": "\"14rem\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"20rem\"" + "default": "\"20rem\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3240,82 +4144,109 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Copy Markup\"" + "default": "\"Copy Markup\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [ + { + "name": "copy", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "success", + "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": ["copy", "success", "error"], "source": "components/CopyMarkup.wrn" }, @@ -3329,154 +4260,180 @@ "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Ready to get started?\"" + "default": "\"Ready to get started?\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"center\"" + "default": "\"center\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"solid\"" + "default": "\"solid\"", + "options": [] }, { "name": "primaryLabel", "type": "string", "required": false, - "default": "\"Get started\"" + "default": "\"Get started\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"#\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "backgroundImage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualImage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualTitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualDescription", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualItems", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "visualPosition", "type": "string", "required": false, - "default": "\"right\"" + "default": "\"right\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "fullBleed", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default", "actions", "visual", "footer"], + "outputs": [], "events": [], "source": "components/CTASection.wrn" }, @@ -3490,40 +4447,52 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "scroll", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + } + ], "events": ["scroll"], "source": "components/CustomScrollbar.wrn" }, @@ -3537,46 +4506,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Data Map\"" + "default": "\"Data Map\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3590,46 +4576,75 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "caption", "type": "string", "required": false, - "default": "\"Data Table\"" + "default": "\"Data Table\"", + "options": [] }, { "name": "columns", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "rows", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "striped", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "sort", + "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": "rowClick", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + }, + { + "name": "pageChange", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["sort", "select", "change", "rowClick", "pageChange"], "source": "components/DataTable.wrn" }, @@ -3643,154 +4658,209 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Date Picker\"" + "default": "\"Date Picker\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"date\"" + "default": "\"date\"", + "options": [] }, { "name": "locale", "type": "string", "required": false, - "default": "\"en-US\"" + "default": "\"en-US\"", + "options": [] }, { "name": "firstDayOfWeek", "type": "number", "required": false, - "default": "0" + "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\" }]" + "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]" + "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]" + "default": "[2024, 2025, 2026, 2027, 2028, 2029, 2030]", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3804,88 +4874,112 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Device Frame\"" + "default": "\"Device Frame\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "device", "type": "string", "required": false, - "default": "\"phone\"" + "default": "\"phone\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"portrait\"" + "default": "\"portrait\"", + "options": [] }, { "name": "src", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "srcdoc", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "frameTitle", "type": "string", "required": false, - "default": "\"Device preview\"" + "default": "\"Device preview\"", + "options": [] }, { "name": "showToolbar", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "allow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3899,34 +4993,40 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/Divider.wrn" }, @@ -3940,46 +5040,79 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Drag And Drop\"" + "default": "\"Drag And Drop\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -3993,118 +5126,151 @@ "name": "open", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"right\"" + "default": "\"right\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Drawer\"" + "default": "\"Drawer\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Drawer\"" + "default": "\"Drawer\"", + "options": [] }, { "name": "closeLabel", "type": "string", "required": false, - "default": "\"Close drawer\"" + "default": "\"Close drawer\"", + "options": [] }, { "name": "showClose", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnBackdrop", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnEscape", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "overlay", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "scrollable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "triggerLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "triggerIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -4116,108 +5282,147 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "open", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Open menu\"" + "default": "\"Open menu\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "showChevron", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "menuLabel", "type": "string", "required": false, - "default": "\"Dropdown menu\"" + "default": "\"Dropdown menu\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom-start\"" + "default": "\"bottom-start\"", + "options": [] }, { "name": "width", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"raised\"" + "default": "\"raised\"", + "options": [] }, { "name": "closeOnSelect", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnOutside", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "emptyLabel", "type": "string", "required": false, - "default": "\"No menu items\"" + "default": "\"No menu items\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -4231,172 +5436,201 @@ "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconStyle", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "iconSize", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Feature\"" + "default": "\"Feature\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "image", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imageAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "imagePosition", "type": "string", "required": false, - "default": "\"top\"" + "default": "\"top\"", + "options": [] }, { "name": "imageAspect", "type": "string", "required": false, - "default": "\"wide\"" + "default": "\"wide\"", + "options": [] }, { "name": "imageLoading", "type": "string", "required": false, - "default": "\"lazy\"" + "default": "\"lazy\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "external", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"Learn more\"" + "default": "\"Learn more\"", + "options": [] }, { "name": "actionIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "showArrow", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "stretchedLink", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "badge", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badgeColor", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "hover", "type": "string", "required": false, - "default": "\"lift\"" + "default": "\"lift\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["media", "icon", "default", "footer"], + "outputs": [], "events": [], "source": "components/FeatureCard.wrn" }, @@ -4407,79 +5641,106 @@ "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.", "props": [ { - "name": "items", + "name": "size", "type": "string", "required": false, - "default": "[]" + "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" + "default": "3", + "options": [] }, { "name": "tabletColumns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "mobileColumns", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "minItemWidth", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "equalHeight", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"stretch\"" + "default": "\"stretch\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"full\"" + "default": "\"full\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Features\"" + "default": "\"Features\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/FeatureGrid.wrn" }, @@ -4493,88 +5754,103 @@ "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--sparkles]\"" + "default": "\"icon-[lucide--sparkles]\"", + "options": [] }, { "name": "iconSize", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "iconVariant", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Feature\"" + "default": "\"Feature\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"Explore\"" + "default": "\"Explore\"", + "options": [] }, { "name": "badge", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "hover", "type": "string", "required": false, - "default": "\"lift\"" + "default": "\"lift\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default", "footer"], + "outputs": [], "events": [], "source": "components/FeatureIconCard.wrn" }, @@ -4588,130 +5864,181 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"File\"" + "default": "\"File\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Choose a file\"" + "default": "\"Choose a file\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--upload]\"" + "default": "\"icon-[lucide--upload]\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "accept", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -4725,46 +6052,83 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"File Upload\"" + "default": "\"File Upload\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "upload", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "progress", + "payloadType": "{ progress: number; [key: string]: string | number | boolean | null | object } | number" + }, + { + "name": "success", + "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": "cancel", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "remove", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["select", "upload", "progress", "success", "error", "cancel", "remove"], "source": "components/FileUpload.wrn" }, @@ -4778,82 +6142,109 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Progress\"" + "default": "\"Progress\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "50" + "default": "50", + "options": [] }, { "name": "max", "type": "number", "required": false, - "default": "100" + "default": "100", + "options": [] }, { "name": "showValue", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fileName", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "fileSize", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "uploadedSize", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "status", "type": "string", "required": false, - "default": "\"uploading\"" + "default": "\"uploading\"", + "options": [] }, { "name": "cancelLabel", "type": "string", "required": false, - "default": "\"Cancel upload\"" + "default": "\"Cancel upload\"", + "options": [] }, { "name": "retryLabel", "type": "string", "required": false, - "default": "\"Retry upload\"" + "default": "\"Retry upload\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -4867,52 +6258,70 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Footer navigation\"" + "default": "\"Footer navigation\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"compact\"" + "default": "\"compact\"", + "options": [] }, { "name": "copyright", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -4926,40 +6335,47 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Grid.wrn" }, @@ -4973,232 +6389,271 @@ "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "eyebrowIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Build something remarkable\"" + "default": "\"Build something remarkable\"", + "options": [] }, { "name": "highlight", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "layout", "type": "string", "required": false, - "default": "\"split\"" + "default": "\"split\"", + "options": [] }, { "name": "visualPosition", "type": "string", "required": false, - "default": "\"right\"" + "default": "\"right\"", + "options": [] }, { "name": "visualStyle", "type": "string", "required": false, - "default": "\"plain\"" + "default": "\"plain\"", + "options": [] }, { "name": "showDecorations", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fullBleed", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "visualEyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualTitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualDescription", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualImage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualItems", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "primaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryTarget", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryTarget", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "tertiaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "tertiaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "tertiaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "tertiaryTarget", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badges", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "trustItems", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"], + "outputs": [], "events": [], "source": "components/Hero.wrn" }, @@ -5210,54 +6665,63 @@ "props": [ { "name": "actions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "stackOnMobile", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fullWidthMobile", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/HeroActions.wrn" }, @@ -5271,58 +6735,68 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "src", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "alt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "width", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "height", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "loading", "type": "string", "required": false, - "default": "\"lazy\"" + "default": "\"lazy\"", + "options": [] }, { "name": "rounded", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Image.wrn" }, @@ -5336,172 +6810,230 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Input\"" + "default": "\"Input\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inputmode", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "minlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "maxlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "pattern", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -5515,142 +7047,191 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Input group\"" + "default": "\"Input group\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "startText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "endText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -5664,244 +7245,302 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"quantity\"" + "default": "\"quantity\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "precision", "type": "string", "required": false, - "default": "\"auto\"" + "default": "\"auto\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "prefix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "suffix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"off\"" + "default": "\"off\"", + "options": [] }, { "name": "inputMode", "type": "string", "required": false, - "default": "\"decimal\"" + "default": "\"decimal\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "inputDisabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "buttonsDisabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "allowInput", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "keyboard", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "wheel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "clamp", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showButtons", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showValidationMessage", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "decrementLabel", "type": "string", "required": false, - "default": "\"Decrease value\"" + "default": "\"Decrease value\"", + "options": [] }, { "name": "incrementLabel", "type": "string", "required": false, - "default": "\"Increase value\"" + "default": "\"Increase value\"", + "options": [] }, { "name": "controlsLabel", "type": "string", "required": false, - "default": "\"Quantity controls\"" + "default": "\"Quantity controls\"", + "options": [] }, { "name": "requiredMessage", "type": "string", "required": false, - "default": "\"A value is required.\"" + "default": "\"A value is required.\"", + "options": [] }, { "name": "minMessage", "type": "string", "required": false, - "default": "\"Value is below the minimum.\"" + "default": "\"Value is below the minimum.\"", + "options": [] }, { "name": "maxMessage", "type": "string", "required": false, - "default": "\"Value is above the maximum.\"" + "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" }, @@ -5915,28 +7554,33 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"⌘ K\"" + "default": "\"⌘ K\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Kbd.wrn" }, @@ -5950,40 +7594,60 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "resizeStart", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "resize", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "resizeEnd", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + } + ], "events": ["resizeStart", "resize", "resizeEnd"], "source": "components/LayoutSplitter.wrn" }, @@ -5997,46 +7661,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Legend Indicator\"" + "default": "\"Legend Indicator\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -6050,52 +7731,61 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Link\"" + "default": "\"Link\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"#\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "external", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Link.wrn" }, @@ -6109,46 +7799,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"List\"" + "default": "\"List\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/List.wrn" }, @@ -6162,46 +7860,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"List Group\"" + "default": "\"List Group\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -6215,46 +7930,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Map\"" + "default": "\"Map\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Map.wrn" }, @@ -6268,76 +7991,89 @@ "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"split\"" + "default": "\"split\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionExternal", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["icon", "actions", "default"], + "outputs": [], "events": [], "source": "components/MarketingSectionHeader.wrn" }, @@ -6351,46 +8087,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Marquee\"" + "default": "\"Marquee\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Marquee.wrn" }, @@ -6404,46 +8148,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Mega Menu\"" + "default": "\"Mega Menu\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "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": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["open", "close", "select"], "source": "components/MegaMenu.wrn" }, @@ -6457,172 +8222,210 @@ "name": "label", "type": "string", "required": false, - "default": "\"Metric\"" + "default": "\"Metric\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"0\"" + "default": "\"0\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconStyle", "type": "string", "required": false, - "default": "\"soft\"" + "default": "\"soft\"", + "options": [] }, { "name": "prefix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "suffix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "badge", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "trend", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "trendLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "trendDirection", "type": "string", "required": false, - "default": "\"neutral\"" + "default": "\"neutral\"", + "options": [] }, { "name": "progress", "type": "number", "required": false, - "default": "-1" + "default": "-1", + "options": [] }, { "name": "progressLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "external", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "showArrow", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "selectable", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "hover", "type": "string", "required": false, - "default": "\"lift\"" + "default": "\"lift\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -6634,84 +8437,107 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "tabletColumns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "mobileColumns", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "equalHeight", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "dividers", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"full\"" + "default": "\"full\"", + "options": [] }, { "name": "minItemWidth", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -6725,172 +8551,218 @@ "name": "open", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Modal\"" + "default": "\"Modal\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Modal dialog\"" + "default": "\"Modal dialog\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"center\"" + "default": "\"center\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "showClose", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeLabel", "type": "string", "required": false, - "default": "\"Close modal\"" + "default": "\"Close modal\"", + "options": [] }, { "name": "closeOnBackdrop", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnEscape", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnCancel", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnConfirm", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "showFooter", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "cancelLabel", "type": "string", "required": false, - "default": "\"Cancel\"" + "default": "\"Cancel\"", + "options": [] }, { "name": "cancelIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "confirmLabel", "type": "string", "required": false, - "default": "\"Confirm\"" + "default": "\"Confirm\"", + "options": [] }, { "name": "confirmIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "confirmDisabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "confirmLoading", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "destructive", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "triggerLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "triggerIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "scrollable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -6904,46 +8776,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Nav\"" + "default": "\"Nav\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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/Nav.wrn" }, @@ -6957,82 +8846,117 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Primary navigation\"" + "default": "\"Primary navigation\"", + "options": [] }, { "name": "topbarLabel", "type": "string", "required": false, - "default": "\"Utility navigation\"" + "default": "\"Utility navigation\"", + "options": [] }, { "name": "brand", - "type": "string", + "type": "Record", "required": false, - "default": "{}" + "default": "{}", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "actions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "sticky", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "openOnHover", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"full\"" + "default": "\"full\"", + "options": [] }, { "name": "mobileLabel", "type": "string", "required": false, - "default": "\"Toggle navigation\"" + "default": "\"Toggle navigation\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7046,154 +8970,180 @@ "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"page-title\"" + "default": "\"page-title\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "centered", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "showBreadcrumbs", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "breadcrumbs", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "breadcrumbParent", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "breadcrumbParentHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "breadcrumbCurrent", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "borderBottom", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["meta", "actions", "default"], + "outputs": [], "events": [], "source": "components/PageHeader.wrn" }, @@ -7207,46 +9157,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Pagination\"" + "default": "\"Pagination\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "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": "previous", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "next", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["change", "previous", "next"], "source": "components/Pagination.wrn" }, @@ -7260,160 +9231,212 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Verification code\"" + "default": "\"Verification code\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"pin\"" + "default": "\"pin\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "length", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "pattern", "type": "string", "required": false, - "default": "\"[0-9]\"" + "default": "\"[0-9]\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"text\"" + "default": "\"text\"", + "options": [] }, { "name": "inputMode", "type": "string", "required": false, - "default": "\"numeric\"" + "default": "\"numeric\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"○\"" + "default": "\"○\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"one-time-code\"" + "default": "\"one-time-code\"", + "options": [] }, { "name": "masked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autoFocus", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "autoSubmit", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "allowPaste", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "clearable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "clearLabel", "type": "string", "required": false, - "default": "\"Clear code\"" + "default": "\"Clear code\"", + "options": [] }, { "name": "separator", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "groupSize", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7427,142 +9450,183 @@ "name": "open", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "triggerLabel", "type": "string", "required": false, - "default": "\"Open popover\"" + "default": "\"Open popover\"", + "options": [] }, { "name": "triggerIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"bottom-start\"" + "default": "\"bottom-start\"", + "options": [] }, { "name": "width", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"raised\"" + "default": "\"raised\"", + "options": [] }, { "name": "showArrow", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showClose", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "closeLabel", "type": "string", "required": false, - "default": "\"Close popover\"" + "default": "\"Close popover\"", + "options": [] }, { "name": "closeOnOutside", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "closeOnEscape", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "actionLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "actionIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "closeOnAction", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7576,88 +9640,112 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"Overview\"" + "default": "\"Overview\"", + "options": [] }, { "name": "eyebrowKey", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Dashboard\"" + "default": "\"Dashboard\"", + "options": [] }, { "name": "titleKey", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "descriptionKey", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "userName", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "metrics", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "actions", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "updates", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "tasks", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7671,58 +9759,81 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "themeLabel", "type": "string", "required": false, - "default": "\"Theme\"" + "default": "\"Theme\"", + "options": [] }, { "name": "colorLabel", "type": "string", "required": false, - "default": "\"Accent color\"" + "default": "\"Accent color\"", + "options": [] }, { "name": "languageLabel", "type": "string", "required": false, - "default": "\"Language\"" + "default": "\"Language\"", + "options": [] }, { "name": "languages", "type": "string", "required": false, - "default": "[" + "default": "[", + "options": [] }, { "name": "colors", "type": "string", "required": false, - "default": "[" + "default": "[", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -7736,46 +9847,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Progress\"" + "default": "\"Progress\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "50" + "default": "50", + "options": [] }, { "name": "max", "type": "number", "required": false, - "default": "100" + "default": "100", + "options": [] }, { "name": "showValue", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/progress.wrn" }, @@ -7789,64 +9908,75 @@ "name": "maxWidth", "type": "string", "required": false, - "default": "\"full\"" + "default": "\"full\"", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "headerOffset", "type": "string", "required": false, - "default": "\"none\"" + "default": "\"none\"", + "options": [] }, { "name": "background", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "overflow", "type": "string", "required": false, - "default": "\"clip\"" + "default": "\"clip\"", + "options": [] }, { "name": "minHeight", "type": "string", "required": false, - "default": "\"screen\"" + "default": "\"screen\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["before", "default", "after"], + "outputs": [], "events": [], "source": "components/PublicPageShell.wrn" }, @@ -7860,154 +9990,201 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Radio\"" + "default": "\"Radio\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"on\"" + "default": "\"on\"", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "checked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "card", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "rightAligned", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "list", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -8021,160 +10198,204 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Range\"" + "default": "\"Range\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "number", "required": false, - "default": "50" + "default": "50", + "options": [] }, { "name": "min", "type": "number", "required": false, - "default": "0" + "default": "0", + "options": [] }, { "name": "max", "type": "number", "required": false, - "default": "100" + "default": "100", + "options": [] }, { "name": "step", "type": "number", "required": false, - "default": "1" + "default": "1", + "options": [] }, { "name": "showValue", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showBounds", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showSteps", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "marks", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -8188,46 +10409,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Rating\"" + "default": "\"Rating\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -8241,46 +10479,59 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Scrollspy\"" + "default": "\"Scrollspy\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "change", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["change"], "source": "components/Scrollspy.wrn" }, @@ -8294,82 +10545,96 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Search Box\"" + "default": "\"Search Box\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "type", "type": "string", "required": false, - "default": "\"search\"" + "default": "\"search\"", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/SearchBox.wrn" }, @@ -8383,64 +10648,75 @@ "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "spacing", "type": "string", "required": false, - "default": "\"lg\"" + "default": "\"lg\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "borderTop", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "borderBottom", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Section.wrn" }, @@ -8454,64 +10730,75 @@ "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "headingLevel", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"3xl\"" + "default": "\"3xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["icon", "default", "actions"], + "outputs": [], "events": [], "source": "components/SectionHeader.wrn" }, @@ -8525,136 +10812,188 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Select\"" + "default": "\"Select\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "values", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "options", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Select an option\"" + "default": "\"Select an option\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "multiple", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -8668,52 +11007,78 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Sidebar\"" + "default": "\"Sidebar\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "mobileLabel", "type": "string", "required": false, - "default": "\"Open navigation\"" + "default": "\"Open navigation\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "toggle", + "payloadType": "{ open: boolean }" + }, + { + "name": "open", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "close", + "payloadType": "{ source: string }" + }, + { + "name": "select", + "payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean; level: string }" + } + ], "events": ["toggle", "open", "close", "select"], "source": "components/Sidebar.wrn" }, @@ -8727,34 +11092,40 @@ "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Loading\"" + "default": "\"Loading\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "lines", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/skeleton.wrn" }, @@ -8768,34 +11139,40 @@ "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Loading\"" + "default": "\"Loading\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "lines", "type": "number", "required": false, - "default": "3" + "default": "3", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/spinner.wrn" }, @@ -8809,190 +11186,222 @@ "name": "eyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "eyebrowIcon", "type": "string", "required": false, - "default": "\"icon-[lucide--sparkles]\"" + "default": "\"icon-[lucide--sparkles]\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"A better digital experience\"" + "default": "\"A better digital experience\"", + "options": [] }, { "name": "highlight", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualPosition", "type": "string", "required": false, - "default": "\"right\"" + "default": "\"right\"", + "options": [] }, { "name": "reverse", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "ratio", "type": "string", "required": false, - "default": "\"balanced\"" + "default": "\"balanced\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"left\"" + "default": "\"left\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "fullBleed", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "backgroundImage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualImage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualAlt", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualIcon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualEyebrow", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualTitle", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualDescription", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "visualItems", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "visualStyle", "type": "string", "required": false, - "default": "\"panel\"" + "default": "\"panel\"", + "options": [] }, { "name": "trustItems", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default", "actions", "trust", "visual"], + "outputs": [], "events": [], "source": "components/SplitHero.wrn" }, @@ -9004,66 +11413,77 @@ "props": [ { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "4" + "default": "4", + "options": [] }, { "name": "compact", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "dividers", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "icons", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"raised\"" + "default": "\"raised\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": [], + "outputs": [], "events": [], "source": "components/StatsBar.wrn" }, @@ -9077,46 +11497,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Stepper\"" + "default": "\"Stepper\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "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": "previous", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "next", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "complete", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["change", "previous", "next", "complete"], "source": "components/Stepper.wrn" }, @@ -9130,166 +11575,207 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Password\"" + "default": "\"Password\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"password\"" + "default": "\"password\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Create a strong password\"" + "default": "\"Create a strong password\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"new-password\"" + "default": "\"new-password\"", + "options": [] }, { "name": "minLength", "type": "number", "required": false, - "default": "8" + "default": "8", + "options": [] }, { "name": "specialCharactersSet", "type": "string", "required": false, - "default": "\"!@#$%^&*()_+-=[]{}|;:,.<>?\"" + "default": "\"!@#$%^&*()_+-=[]{}|;:,.<>?\"", + "options": [] }, { "name": "requireLowercase", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "requireUppercase", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "requireNumber", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "requireSpecialCharacter", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "showRequirements", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "presentation", "type": "string", "required": false, - "default": "\"inline\"" + "default": "\"inline\"", + "options": [] }, { "name": "hintText", "type": "string", "required": false, - "default": "\"Use a unique password you do not use elsewhere.\"" + "default": "\"Use a unique password you do not use elsewhere.\"", + "options": [] }, { "name": "emptyLabel", "type": "string", "required": false, - "default": "\"Enter a password\"" + "default": "\"Enter a password\"", + "options": [] }, { "name": "weakLabel", "type": "string", "required": false, - "default": "\"Weak\"" + "default": "\"Weak\"", + "options": [] }, { "name": "fairLabel", "type": "string", "required": false, - "default": "\"Fair\"" + "default": "\"Fair\"", + "options": [] }, { "name": "goodLabel", "type": "string", "required": false, - "default": "\"Good\"" + "default": "\"Good\"", + "options": [] }, { "name": "strongLabel", "type": "string", "required": false, - "default": "\"Strong\"" + "default": "\"Strong\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -9303,46 +11789,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Styled Icon\"" + "default": "\"Styled Icon\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/StyledIcon.wrn" }, @@ -9356,124 +11850,162 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Switch\"" + "default": "\"Switch\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"on\"" + "default": "\"on\"", + "options": [] }, { "name": "checked", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -9487,46 +12019,67 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "caption", "type": "string", "required": false, - "default": "\"Table\"" + "default": "\"Table\"", + "options": [] }, { "name": "columns", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "rows", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "striped", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "sort", + "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": "rowClick", + "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + } + ], "events": ["sort", "select", "rowClick"], "source": "components/table.wrn" }, @@ -9540,46 +12093,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Tabs\"" + "default": "\"Tabs\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "active", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "orientation", "type": "string", "required": false, - "default": "\"horizontal\"" + "default": "\"horizontal\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Tabs.wrn" }, @@ -9593,142 +12154,187 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Textarea\"" + "default": "\"Textarea\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "rows", "type": "number", "required": false, - "default": "5" + "default": "5", + "options": [] }, { "name": "resize", "type": "string", "required": false, - "default": "\"vertical\"" + "default": "\"vertical\"", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "minlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "maxlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -9742,88 +12348,116 @@ "name": "label", "type": "string", "required": false, - "default": "\"Learn more\"" + "default": "\"Learn more\"", + "options": [] }, { "name": "href", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"#\"", + "options": [] }, { "name": "target", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "rel", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "external", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"start\"" + "default": "\"start\"", + "options": [] }, { "name": "showArrow", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "underline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -9837,46 +12471,54 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Timeline\"" + "default": "\"Timeline\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Timeline.wrn" }, @@ -9890,160 +12532,216 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Time\"" + "default": "\"Time\"", + "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"normal\"" + "default": "\"normal\"", + "options": [] }, { "name": "icon", "type": "string", "required": false, - "default": "\"icon-[lucide--clock-3]\"" + "default": "\"icon-[lucide--clock-3]\"", + "options": [] }, { "name": "iconPosition", "type": "string", "required": false, - "default": "\"end\"" + "default": "\"end\"", + "options": [] }, { "name": "helperText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "cornerHint", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "error", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "inline", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "min", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "max", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "step", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "format", "type": "string", "required": false, - "default": "\"24\"" + "default": "\"24\"", + "options": [] }, { "name": "minuteStep", "type": "number", "required": false, - "default": "5" + "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\"]" + "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\"]" + "default": "[\"00\", \"05\", \"10\", \"15\", \"20\", \"25\", \"30\", \"35\", \"40\", \"45\", \"50\", \"55\"]", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -10057,46 +12755,63 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Toast\"" + "default": "\"Toast\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "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/Toast.wrn" }, @@ -10110,46 +12825,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Toast Notifications\"" + "default": "\"Toast Notifications\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [ + { + "name": "add", + "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + }, + { + "name": "dismiss", + "payloadType": "{ sourceEvent?: Event; [key: string]: 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": "action", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["add", "dismiss", "clear", "action"], "source": "components/ToastNotifications.wrn" }, @@ -10163,142 +12903,175 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"segmented\"" + "default": "\"segmented\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"billing-cycle\"" + "default": "\"billing-cycle\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"monthly\"" + "default": "\"monthly\"", + "options": [] }, { "name": "firstValue", "type": "string", "required": false, - "default": "\"monthly\"" + "default": "\"monthly\"", + "options": [] }, { "name": "firstLabel", "type": "string", "required": false, - "default": "\"Monthly\"" + "default": "\"Monthly\"", + "options": [] }, { "name": "secondValue", "type": "string", "required": false, - "default": "\"annual\"" + "default": "\"annual\"", + "options": [] }, { "name": "secondLabel", "type": "string", "required": false, - "default": "\"Annual\"" + "default": "\"Annual\"", + "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, - "default": "\"Billing frequency\"" + "default": "\"Billing frequency\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "currency", "type": "string", "required": false, - "default": "\"$\"" + "default": "\"$\"", + "options": [] }, { "name": "suffix", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "firstValueKey", "type": "string", "required": false, - "default": "\"monthly\"" + "default": "\"monthly\"", + "options": [] }, { "name": "secondValueKey", "type": "string", "required": false, - "default": "\"annual\"" + "default": "\"annual\"", + "options": [] }, { "name": "emptyValue", "type": "string", "required": false, - "default": "\"—\"" + "default": "\"—\"", + "options": [] }, { "name": "align", "type": "string", "required": false, - "default": "\"end\"" + "default": "\"end\"", + "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "animate", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "animationDuration", "type": "number", "required": false, - "default": "450" + "default": "450", + "options": [] }, { "name": "animationSteps", "type": "number", "required": false, - "default": "18" + "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" }, @@ -10312,148 +13085,186 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "label", "type": "string", "required": false, - "default": "\"Password\"" + "default": "\"Password\"", + "options": [] }, { "name": "name", "type": "string", "required": false, - "default": "\"password\"" + "default": "\"password\"", + "options": [] }, { "name": "value", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "placeholder", "type": "string", "required": false, - "default": "\"Enter your password\"" + "default": "\"Enter your password\"", + "options": [] }, { "name": "autocomplete", "type": "string", "required": false, - "default": "\"current-password\"" + "default": "\"current-password\"", + "options": [] }, { "name": "minlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "maxlength", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "pattern", "type": "string", "required": false, - "default": "\"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}\"" + "default": "\"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}\"", + "options": [] }, { "name": "fields", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "visible", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "toggleable", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "toggleMode", "type": "string", "required": false, - "default": "\"button\"" + "default": "\"button\"", + "options": [] }, { "name": "checkboxLabel", "type": "string", "required": false, - "default": "\"Show password\"" + "default": "\"Show password\"", + "options": [] }, { "name": "showLabel", "type": "string", "required": false, - "default": "\"Show password\"" + "default": "\"Show password\"", + "options": [] }, { "name": "hideLabel", "type": "string", "required": false, - "default": "\"Hide password\"" + "default": "\"Hide password\"", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "readonly", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "required", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "invalid", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "helpText", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "validationMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -10467,106 +13278,137 @@ "name": "id", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "open", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "defaultOpen", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "content", "type": "string", "required": false, - "default": "\"Tooltip\"" + "default": "\"Tooltip\"", + "options": [] }, { "name": "trigger", "type": "string", "required": false, - "default": "\"hover\"" + "default": "\"hover\"", + "options": [] }, { "name": "placement", "type": "string", "required": false, - "default": "\"top\"" + "default": "\"top\"", + "options": [] }, { "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"dark\"" + "default": "\"dark\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"18rem\"" + "default": "\"18rem\"", + "options": [] }, { "name": "offset", "type": "number", "required": false, - "default": "10" + "default": "10", + "options": [] }, { "name": "showArrow", "type": "boolean", "required": false, - "default": "true" + "default": "true", + "options": [] }, { "name": "interactive", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "disabled", "type": "boolean", "required": false, - "default": "false" + "default": "false", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" }, @@ -10580,46 +13422,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Tree View\"" + "default": "\"Tree View\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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": "toggle", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "expand", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + }, + { + "name": "collapse", + "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + } + ], "events": ["select", "toggle", "expand", "collapse"], "source": "components/TreeView.wrn" }, @@ -10633,40 +13500,47 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "columns", "type": "number", "required": false, - "default": "2" + "default": "2", + "options": [] }, { "name": "gap", "type": "string", "required": false, - "default": "\"md\"" + "default": "\"md\"", + "options": [] }, { "name": "maxWidth", "type": "string", "required": false, - "default": "\"xl\"" + "default": "\"xl\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] } ], "slots": ["default"], + "outputs": [], "events": [], "source": "components/Typography.wrn" }, @@ -10680,46 +13554,71 @@ "name": "size", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "color", "type": "string", "required": false, - "default": "\"primary\"" + "default": "\"primary\"", + "options": [] }, { "name": "title", "type": "string", "required": false, - "default": "\"Wysiwyg Editor\"" + "default": "\"Wysiwyg Editor\"", + "options": [] }, { "name": "description", "type": "string", "required": false, - "default": "\"\"" + "default": "\"\"", + "options": [] }, { "name": "items", - "type": "string", + "type": "unknown[]", "required": false, - "default": "[]" + "default": "[]", + "options": [] }, { "name": "variant", "type": "string", "required": false, - "default": "\"default\"" + "default": "\"default\"", + "options": [] }, { "name": "class", "type": "string", "required": false, - "default": "\"\"" + "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" } diff --git a/packages/ui/components/Accordion.wrn b/packages/ui/components/Accordion.wrn index 8e75cc66..b75e6df9 100644 --- a/packages/ui/components/Accordion.wrn +++ b/packages/ui/components/Accordion.wrn @@ -1,52 +1,55 @@ component Accordion { - props { - size = "default" - color = "primary" - variant = "default" - class = "" - - id = "accordion" - items = [] - defaultOpen = [] - multiple = false - alwaysOpen = false - disabled = false - - indicator = "plus" - indicatorPosition = "start" - showIndicator = true - bordered = false - separated = false - flush = false - contentItalic = false - - @event change = function - @event open = function - @event close = function + outputs { + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) } + props { + size: string = "default" + color: string = "primary" + variant: string = "default" + class: string = "" + + id: string = "accordion" + items: unknown[] = [] + defaultOpen: unknown[] = [] + multiple: boolean = false + alwaysOpen: boolean = false + disabled: boolean = false + + indicator: string = "plus" + indicatorPosition: string = "start" + showIndicator: boolean = true + bordered: boolean = false + separated: boolean = false + flush: boolean = false + contentItalic: boolean = false + +} + state openValues = defaultOpen functions { - function itemValue(item, index) { + shared function itemValue(item, index) { return item.value !== undefined && item.value !== "" ? String(item.value) : String(index) } - function nestedValue(parent, parentIndex, item, index) { + shared function nestedValue(parent, parentIndex, item, index) { return itemValue(parent, parentIndex) + "." + itemValue(item, index) } - function isOpen(value) { + shared function isOpen(value) { return openValues.includes(value) } - function allowsMultiple() { + shared function allowsMultiple() { return multiple || alwaysOpen } - function dispatchAccordionEvent(sourceEvent, eventName, value, item, root, customEvent) { + client function dispatchAccordionEvent(sourceEvent, eventName, value, item, root, customEvent) { root = sourceEvent.currentTarget.closest("[data-wrn-accordion]") if (!root) { @@ -64,7 +67,7 @@ component Accordion { root.dispatchEvent(customEvent) } - function toggleItem(sourceEvent, value, item, wasOpen) { + client function toggleItem(sourceEvent, value, item, wasOpen) { if (disabled || item.disabled) { return } diff --git a/packages/ui/components/AdvancedDatePicker.wrn b/packages/ui/components/AdvancedDatePicker.wrn index e9664362..c43ad8f1 100644 --- a/packages/ui/components/AdvancedDatePicker.wrn +++ b/packages/ui/components/AdvancedDatePicker.wrn @@ -1,17 +1,20 @@ component AdvancedDatePicker { + outputs { + input(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + clear(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + } + props { - @event input = function - @event change = function - @event open = function - @event close = function - @event clear = function - size = "default" - color = "primary" - title = "Advanced Date Picker" - description = "" - items = [] - variant = "default" - class = "" +size: string = "default" + color: string = "primary" + title: string = "Advanced Date Picker" + description: string = "" + items: unknown[] = [] + variant: string = "default" + class: string = "" } view {
diff --git a/packages/ui/components/AdvancedRangeSlider.wrn b/packages/ui/components/AdvancedRangeSlider.wrn index 51090087..463a9f3c 100644 --- a/packages/ui/components/AdvancedRangeSlider.wrn +++ b/packages/ui/components/AdvancedRangeSlider.wrn @@ -1,16 +1,19 @@ component AdvancedRangeSlider { + outputs { + input(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + start(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + end(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + } + props { - @event input = function - @event change = function - @event start = function - @event end = function - size = "default" - color = "primary" - title = "Advanced Range Slider" - description = "" - items = [] - variant = "default" - class = "" + size: string = "default" + color: string = "primary" + title: string = "Advanced Range Slider" + description: string = "" + items: unknown[] = [] + variant: string = "default" + class: string = "" } view {
diff --git a/packages/ui/components/AdvancedSelect.wrn b/packages/ui/components/AdvancedSelect.wrn index 6bd6fe16..c4629879 100644 --- a/packages/ui/components/AdvancedSelect.wrn +++ b/packages/ui/components/AdvancedSelect.wrn @@ -1,82 +1,85 @@ component AdvancedSelect { + outputs { + search(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + select(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + clear(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) + open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + load(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) + error(payload: { error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string) + } + props { - size = "default" - color = "primary" - label = "Advanced Select" - name = "" - value = "" - values = [] - options = [] - groups = [] - placeholder = "Select an option" - placeholderIcon = "" - searchPlaceholder = "Search options…" - multiple = false - searchable = true - defaultOpen = false - clearable = true - allowEmpty = true - tags = false - disabled = false - required = false - invalid = false - validationMessage = "" - helpText = "" - loading = false - loadingLabel = "Loading options…" - emptyLabel = "No options found" - selectedOptionsLabel = "Selected options" - clearLabel = "Clear selection" - createLabel = "Create" - loadMoreLabel = "Load more" - searchMode = "contains" - searchFields = "label,description" - minSearchLength = 0 - searchResultLimit = 0 - maxSelections = 0 - showCounter = false - counterTemplate = "{selected} selected" - optionTemplate = "default" - selectedTemplate = "default" - closeOnSelect = true - scrollToSelected = true - fixed = false - placement = "bottom" - remote = false - remoteUrl = "" - remoteQueryParam = "q" - remoteDebounce = 250 - remoteAutoLoad = true - infinite = false - hasMore = false - page = 1 - class = "" - @event search = function - @event select = function - @event change = function - @event clear = function - @event open = function - @event close = function - @event load = function - @event error = function + size: string = "default" + color: string = "primary" + label: string = "Advanced Select" + name: string = "" + value: string = "" + values: unknown[] = [] + options: unknown[] = [] + groups: unknown[] = [] + placeholder: string = "Select an option" + placeholderIcon: string = "" + searchPlaceholder: string = "Search options…" + multiple: boolean = false + searchable: boolean = true + defaultOpen: boolean = false + clearable: boolean = true + allowEmpty: boolean = true + tags: boolean = false + disabled: boolean = false + required: boolean = false + invalid: boolean = false + validationMessage: string = "" + helpText: string = "" + loading: boolean = false + loadingLabel: string = "Loading options…" + emptyLabel: string = "No options found" + selectedOptionsLabel: string = "Selected options" + clearLabel: string = "Clear selection" + createLabel: string = "Create" + loadMoreLabel: string = "Load more" + searchMode: string = "contains" + searchFields: string = "label,description" + minSearchLength: number = 0 + searchResultLimit: number = 0 + maxSelections: number = 0 + showCounter: boolean = false + counterTemplate: string = "{selected} selected" + optionTemplate: string = "default" + selectedTemplate: string = "default" + closeOnSelect: boolean = true + scrollToSelected: boolean = true + fixed: boolean = false + placement: string = "bottom" + remote: boolean = false + remoteUrl: string = "" + remoteQueryParam: string = "q" + remoteDebounce: number = 250 + remoteAutoLoad: boolean = true + infinite: boolean = false + hasMore: boolean = false + page: number = 1 + class: string = "" } state open = defaultOpen - state query = "" - state activeIndex = -1 + state query: string = "" + state activeIndex: number = -1 state selectedValue = value state selectedValues = values functions { - function allOptions() { + shared function allOptions() { return [...groups.flatMap((group) => group.options || []), ...options] } - function searchableText(option) { + shared function searchableText(option) { return ((option.label || "") + " " + (option.description || "")).toLowerCase() } - function matches(option) { + shared function matches(option) { if (!query || query.length < Number(minSearchLength || 0)) { return true } @@ -89,22 +92,22 @@ component AdvancedSelect { return searchableText(option).includes(query.toLowerCase()) } - function matchingOptions(list) { + shared function matchingOptions(list) { return list.filter((option) => matches(option)) } - function visibleOptions(list) { + shared function visibleOptions(list) { if (searchResultLimit > 0) { return matchingOptions(list).slice(0, Number(searchResultLimit)) } return matchingOptions(list) } - function flatVisibleOptions() { + shared function flatVisibleOptions() { return visibleOptions(allOptions()) } - function isSelected(option) { + shared function isSelected(option) { return ( multiple ? selectedValues.includes(option.value) @@ -112,15 +115,15 @@ component AdvancedSelect { ) } - function selectedOptions() { + shared function selectedOptions() { return allOptions().filter((option) => isSelected(option)) } - function selectedCount() { + shared function selectedCount() { return multiple ? selectedValues.length : selectedValue ? 1 : 0 } - function counterText() { + shared function counterText() { return ( maxSelections ? selectedCount() + " / " + maxSelections + " selected" @@ -128,7 +131,7 @@ component AdvancedSelect { ) } - function selectedText() { + shared function selectedText() { return ( multiple ? selectedValues.join(", ") @@ -138,11 +141,11 @@ component AdvancedSelect { ) } - function triggerText() { + shared function triggerText() { return selectedCount() ? selectedText() : placeholder } - function canSelect(option) { + shared function canSelect(option) { if (option.disabled) { return false } @@ -155,7 +158,7 @@ component AdvancedSelect { return selectedCount() < maxSelections } - function chooseSingle(option) { + shared function chooseSingle(option) { if (!canSelect(option)) { return } @@ -166,7 +169,7 @@ component AdvancedSelect { } } - function chooseMultiple(option) { + shared function chooseMultiple(option) { if (!canSelect(option)) { return } @@ -178,7 +181,7 @@ component AdvancedSelect { query = "" } - function chooseOption(option) { + shared function chooseOption(option) { if (multiple) { chooseMultiple(option) return @@ -186,7 +189,7 @@ component AdvancedSelect { chooseSingle(option) } - function clearSelection(event) { + client function clearSelection(event) { event.stopPropagation() selectedValue = "" selectedValues = [] @@ -194,7 +197,7 @@ component AdvancedSelect { open = false } - function toggle() { + shared function toggle() { if (disabled) { return; }; @@ -202,14 +205,14 @@ component AdvancedSelect { activeIndex = open && flatVisibleOptions().length ? 0 : -1; } - function moveActive(direction) { + shared function moveActive(direction) { if (!flatVisibleOptions().length) { return } activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length } - function handleKeydown(event) { + client function handleKeydown(event) { if (disabled) { return } @@ -243,7 +246,7 @@ component AdvancedSelect { } } - function optionIndex(option) { + shared function optionIndex(option) { return flatVisibleOptions().findIndex((item) => item.value === option.value) } } diff --git a/packages/ui/components/AnnouncementBar.wrn b/packages/ui/components/AnnouncementBar.wrn index 2c0119da..9a06236b 100644 --- a/packages/ui/components/AnnouncementBar.wrn +++ b/packages/ui/components/AnnouncementBar.wrn @@ -1,29 +1,31 @@ component AnnouncementBar { - props { - @event dismiss = function - - badge = "" - badgeIcon = "" - message = "Announcement" - description = "" - icon = "icon-[lucide--megaphone]" - actionLabel = "" - actionHref = "" - actionIcon = "" - dismissible = false - dismissLabel = "Dismiss announcement" - sticky = false - compact = false - size = "default" - width = "default" - color = "primary" - variant = "soft" - role = "status" - live = "polite" - class = "" + outputs { + dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object }) } - state dismissed = false + props { +badge: string = "" + badgeIcon: string = "" + message: string = "Announcement" + description: string = "" + icon: string = "icon-[lucide--megaphone]" + actionLabel: string = "" + actionHref: string = "" + actionIcon: string = "" + dismissible: boolean = false + dismissLabel: string = "Dismiss announcement" + sticky: boolean = false + compact: boolean = false + size: string = "default" + width: string = "default" + color: string = "primary" + variant: string = "soft" + role: string = "status" + live: string = "polite" + class: string = "" + } + + state dismissed: boolean = false view {