wavemaker-dev-mcp 0.1.1 → 1.0.0

package/skills/components/wm-composite.md

@@ -0,0 +1,30 @@
+---
+component: WmComposite
+category: input
+import: components/input/composite
+tags: [input, composite, form-field]
+summary: Composite input field.
+generated: true
+---
+
+# WmComposite
+
+Composite input field.
+
+## Usage
+
+```jsx
+<WmComposite
+  name="composite"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| captionposition | `"left" \| "right" \| "top" \| "floating"` | No | `"left"` | Position of the label relative to the input. |
+| required | `boolean` | No | — | Whether the contained input is required. |
+| id | `string` | No | — | The unique ID for the widget. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-confirm-dialog.md

@@ -0,0 +1,43 @@
+---
+component: WmConfirmDialog
+category: dialogs
+import: components/dialogs/confirm-dialog
+tags: [dialogs, confirm, dialog, icon]
+summary: Confirm Dialog — modal dialog.
+generated: true
+---
+
+# WmConfirmDialog
+
+Confirm Dialog — modal dialog.
+
+## Usage
+
+```jsx
+<WmConfirmDialog
+  name="confirmDialog"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| oktext | `string` | No | — | Text for the OK button. |
+| canceltext | `string` | No | — | Text for the Cancel button. |
+| title | `string` | No | — | Title text for the confirm dialog. |
+| message | `string \| ReactNode` | No | — | Message content for the confirm dialog. |
+| text | `string \| ReactNode` | No | — | Text content for the confirm dialog. |
+| iconclass | `string` | No | — | CSS class for the icon. |
+| onOk | `(event?: SyntheticEvent) => void` | No | — | Callback fired when the OK button is clicked. |
+| onCancel | `(event?: SyntheticEvent) => void` | No | — | Callback fired when the Cancel button is clicked. |
+| onClose | `(event?: SyntheticEvent) => void` | No | — | Callback fired when the dialog requests to be closed. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-confirm-dialog-*`
+
+See foundation-css: `src/tokens/web/components/modal-dialog/modal-dialog.json`

package/skills/components/wm-container.md

@@ -0,0 +1,100 @@
+---
+component: WmContainer
+category: container
+import: components/container
+tags: [container, flex, wrapper, section, panel, alignment, gap]
+summary: General-purpose flex container with alignment, gap, wrap, overflow, and z-index control.
+related: [WmLinearLayout, WmLayoutGrid, WmPanel]
+---
+
+# WmContainer
+
+General-purpose flex container. Use for sections, cards, and any area needing alignment control, overflow clipping, or z-index stacking. Unlike `WmLinearLayout`, it does not require `WmLinearLayoutItem` wrappers — children are placed directly.
+
+## Usage
+
+```jsx
+<WmContainer
+  name="profileCard"
+  direction="row"
+  alignment="middle-left"
+  gap={16}
+  width="100%"
+  padding="16px"
+>
+  <WmPicture name="avatar" />
+  <WmLabel name="userName" caption="Jane Doe" />
+</WmContainer>
+```
+
+## Key Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| direction | `"row" \| "column"` | `"column"` | Flex direction |
+| alignment | `ContainerAlignment` | `"top-left"` | Combined horizontal + vertical alignment (see table below) |
+| gap | `string \| number` | — | Gap between children in px |
+| columngap | `string \| number` | — | Column gap when `wrap` is true |
+| wrap | `boolean` | `false` | Allow children to wrap to next line |
+| clipcontent | `string \| boolean` | — | Clip overflowing content |
+| position | `string` | — | CSS position (`"relative"`, `"absolute"`, `"fixed"`) |
+| overflow | `string` | — | CSS overflow (`"auto"`, `"hidden"`, `"scroll"`) |
+| zindex | `string \| number` | — | CSS z-index |
+| content | `string` | — | Named partial for deferred rendering |
+| name | `string` | — | Required. Widget identifier |
+| width | `string` | — | CSS width |
+| height | `string` | — | CSS height |
+| padding | `string` | — | CSS padding shorthand |
+| className | `string` | — | Additional CSS class names |
+
+## Alignment Values
+
+| Value | Flex equivalent |
+|-------|----------------|
+| `"top-left"` | justify: start, align: start |
+| `"top-center"` | justify: center, align: start |
+| `"top-right"` | justify: end, align: start |
+| `"middle-left"` | justify: start, align: center |
+| `"middle-center"` | justify: center, align: center |
+| `"middle-right"` | justify: end, align: center |
+| `"bottom-left"` | justify: start, align: end |
+| `"bottom-center"` | justify: center, align: end |
+| `"bottom-right"` | justify: end, align: end |
+| `"center"` | both centered |
+
+## Patterns
+
+**Card with header and body:**
+```jsx
+<WmContainer name="card" direction="column" gap={0} padding="16px" className="app-card">
+  <WmLabel name="cardTitle" caption="Summary" />
+  <WmContainer name="cardBody" direction="column" gap={12}>
+    <WmLabel name="stat1" caption="42 users" />
+    <WmLabel name="stat2" caption="7 active" />
+  </WmContainer>
+</WmContainer>
+```
+
+**Sticky overlay (absolute positioned):**
+```jsx
+<WmContainer name="overlay" position="absolute" zindex={100} alignment="middle-center" width="100%" height="100%">
+  <WmLabel name="loadingMsg" caption="Loading..." />
+</WmContainer>
+```
+
+**Scrollable content area:**
+```jsx
+<WmContainer name="scrollArea" direction="column" overflow="auto" height="400px">
+  {/* long content */}
+</WmContainer>
+```
+
+## WmContainer vs WmLinearLayout
+
+| | WmContainer | WmLinearLayout |
+|---|---|---|
+| Child wrappers needed | No | Yes (`WmLinearLayoutItem`) |
+| Spacing control | `gap` prop (px) | `spacing` prop (token-based) |
+| Alignment | Single `alignment` prop | Separate `horizontalalign` / `verticalalign` |
+| Wrap support | Yes | No |
+| Use for | Sections, cards, panels | Item lists, toolbars, stacks |

package/skills/components/wm-currency.md

@@ -0,0 +1,69 @@
+---
+component: WmCurrency
+category: input
+import: components/input/currency
+tags: [input, currency, form-field]
+summary: Currency input field.
+generated: true
+---
+
+# WmCurrency
+
+Currency input field.
+
+## Usage
+
+```jsx
+<WmCurrency
+  name="currency"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| currency | `string` | No | `"USD"` | ISO 4217 currency code. |
+| currencySymbol | `string` | No | — | The symbol to display for the currency. |
+| currencySymbolPosition | `"left" \| "right"` | No | `"left"` | Position of the currency symbol relative to the input. |
+| currencySymbolWidth | `string` | No | — | Width of the currency symbol area. |
+| disabled | `boolean` | No | — | Whether the input is disabled. |
+| name | `string` | Yes | — | The unique name of the currency widget (required). |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the input. |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| inputProps | `Record<string, unknown>` | No | — | Props passed to the inner number input element. |
+| displayValue | `string` | No | — | Formatted display value for the currency. |
+| class | `string` | No | — | CSS class name override. |
+| readonly | `boolean` | No | — | Whether the currency input is read-only. |
+| required | `boolean` | No | — | Whether a value is required. |
+| placeholder | `string` | No | `"Enter value"` | Placeholder text shown when the input is empty. |
+| maxvalue | `number` | No | — | Maximum value allowed. |
+| minvalue | `number` | No | — | Minimum value allowed. |
+| step | `number` | No | `1` | Step increment for arrow key changes. |
+| textAlign | `string` | No | — | Text alignment within the input. |
+| trailingzero | `boolean` | No | — | Whether to display trailing zeros. |
+| inputmode | `"natural" \| "financial"` | No | `"natural"` | Input mode for the currency widget.
+- `"natural"`: Standard number input.
+- `"financial"`: Financial format. |
+| decimalplaces | `number` | No | `0` | Number of decimal places to display. |
+| updateon | `"blur" \| "keypress"` | No | `"blur"` | When the data value should be updated. |
+| updatedelay | `string` | No | `"0"` | Delay in milliseconds before updating the data value. |
+| datavalue | `number \| null` | No | — | The bound data value of the currency input. |
+| onChange | `( event: ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newV...` | No | — | Callback invoked when the currency value changes. |
+| onBlur | `(event: FocusEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void` | No | — | Callback invoked when the input loses focus. |
+| onFocus | `(event: FocusEvent<HTMLInputElement>) => void` | No | — | Callback invoked when the input receives focus. |
+| onClick | `(event: MouseEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void` | No | — | Callback invoked when the input is clicked. |
+| onMouseEnter | `( event: MouseEvent<HTMLInputElement>, widget?: Record<string, unknown> ) => ...` | No | — | Callback invoked when the mouse enters the input. |
+| onMouseLeave | `( event: MouseEvent<HTMLInputElement>, widget?: Record<string, unknown> ) => ...` | No | — | Callback invoked when the mouse leaves the input. |
+| onKeyDown | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Callback invoked on key down. |
+| onEnter | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Callback invoked when the Enter key is pressed. |
+| fieldName | `string` | No | — | Field name used by the form controller. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-currency-*`
+
+See foundation-css: `src/tokens/web/components/currency/currency.json`

package/skills/components/wm-datatable.md

@@ -0,0 +1,146 @@
+---
+component: WmDataTable
+category: data
+import: components/data/table
+tags: [table, grid, data, list, pagination, sort, filter, inline-edit, export, rows, columns]
+summary: Full-featured data table with sorting, filtering, pagination, inline/dialog editing, row selection, and export.
+related: [WmList, WmDataGrid, WmPagination]
+---
+
+# WmDataTable
+
+Full-featured data table. Handles pagination, sorting, multi-column filtering, inline/dialog row editing, multi-select, row expansion, export, and summary rows. Composed of `WmTableColumn`, `WmTableAction`, and `WmTableRowAction` children.
+
+## Minimal Usage
+
+```jsx
+<WmDataTable
+  name="usersTable"
+  dataset={users}
+  shownavigation="Basic"
+  pagesize={10}
+>
+  <WmTableColumn field="name" caption="Name" sortable={true} />
+  <WmTableColumn field="email" caption="Email" />
+  <WmTableColumn field="role" caption="Role" />
+</WmDataTable>
+```
+
+## Key Props — WmDataTable
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `string` | — | Required. Widget identifier |
+| dataset | `array \| string` | — | Data array or variable binding |
+| editmode | `"inline" \| "dialog" \| "form" \| "quickedit" \| "none"` | `"none"` | Row edit mode |
+| shownavigation | `"Basic" \| "Classic" \| "Advanced" \| "Pager" \| false` | — | Pagination style |
+| pagesize | `number` | — | Rows per page |
+| pagesizeoptions | `number[]` | — | Options for rows-per-page selector |
+| showheader | `boolean` | `true` | Show column header row |
+| showrowindex | `boolean` | `false` | Show row number column |
+| filtermode | `"multicolumn" \| "search"` | — | Filter UI type |
+| filteronkeypress | `boolean` | `false` | Filter as user types |
+| multiselect | `boolean` | `false` | Enable checkbox multi-select |
+| radioselect | `boolean` | `false` | Enable radio single-select |
+| gridfirstrowselect | `boolean` | `false` | Auto-select first row on load |
+| exportformat | `"EXCEL" \| "CSV"` | — | Enable export and set format |
+| exportdatasize | `number` | — | Max rows to export |
+| nodatamessage | `string` | — | Text shown when dataset is empty |
+| loadingdatamsg | `string` | — | Text shown while data loads |
+| onRowclick | `function` | — | `(event, widget, row) => void` |
+| onRowselect | `function` | — | `(event, widget, row) => void` |
+| onRowdeselect | `function` | — | `(event, widget, row) => void` |
+| onBeforedatarender | `function` | — | Fires before rows are rendered |
+| onDatarender | `function` | — | Fires after rows are rendered |
+| onSort | `function` | — | `(event, widget, sortInfo) => void` |
+| onRowDelete | `function` | — | `(event, widget, row) => void` |
+| onRowUpdate | `function` | — | `(event, widget, row) => void` |
+| onSuccess | `function` | — | CRUD success callback |
+| onError | `function` | — | CRUD error callback |
+
+## WmTableColumn Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| field | `string` | — | Data field name |
+| caption | `string` | — | Column header label |
+| sortable | `boolean` | `false` | Enable column sort |
+| searchable | `boolean` | `false` | Include in filter |
+| show | `boolean` | `true` | Column visibility |
+| width | `string` | — | Column width (e.g. `"150px"`, `"20%"`) |
+| textalignment | `string` | — | Text alignment (`"left"`, `"center"`, `"right"`) |
+| widgetType | `string` | — | Display widget type for read view |
+| editWidgetType | `string` | — | Widget type for inline edit cell |
+| required | `boolean` | `false` | Validation in edit mode |
+| readonly | `boolean` | `false` | Non-editable in edit mode |
+| renderCellContent | `function` | — | Custom cell renderer `(row, col) => ReactNode` |
+
+## WmTableAction Props (header/footer toolbar buttons)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| displayName | `string` | Button label |
+| iconclass | `string` | Icon class |
+| action | `function` | Click handler |
+| position | `"header" \| "footer"` | Where to show the button |
+| variant | `string` | Button variant class |
+| disabled | `boolean \| function` | Disable condition |
+
+## Patterns
+
+**Read-only table with pagination and sorting:**
+```jsx
+<WmDataTable name="ordersTable" dataset={orders} shownavigation="Basic" pagesize={20}>
+  <WmTableColumn field="orderId" caption="Order #" sortable={true} width="100px" />
+  <WmTableColumn field="customer" caption="Customer" sortable={true} />
+  <WmTableColumn field="total" caption="Total" textalignment="right" />
+  <WmTableColumn field="status" caption="Status" />
+</WmDataTable>
+```
+
+**Inline edit with delete row action:**
+```jsx
+<WmDataTable name="usersTable" dataset={users} editmode="inline" onRowUpdate={handleUpdate} onRowDelete={handleDelete}>
+  <WmTableColumn field="name" caption="Name" editWidgetType="text" required={true} />
+  <WmTableColumn field="email" caption="Email" editWidgetType="text" />
+  <WmTableRowAction displayName="Delete" iconclass="wm-sl-l sl-trash" action={(row) => handleDelete(row)} />
+</WmDataTable>
+```
+
+**Multi-select with header action:**
+```jsx
+<WmDataTable name="itemsTable" dataset={items} multiselect={true} onRowselect={handleSelect}>
+  <WmTableColumn field="name" caption="Name" />
+  <WmTableAction displayName="Delete Selected" iconclass="wm-sl-l sl-trash" position="header" action={handleBulkDelete} />
+</WmDataTable>
+```
+
+**Searchable/filterable table:**
+```jsx
+<WmDataTable name="productsTable" dataset={products} filtermode="multicolumn" filteronkeypress={true}>
+  <WmTableColumn field="name" caption="Name" searchable={true} sortable={true} />
+  <WmTableColumn field="category" caption="Category" searchable={true} />
+  <WmTableColumn field="price" caption="Price" textalignment="right" />
+</WmDataTable>
+```
+
+**Custom cell renderer:**
+```jsx
+<WmDataTable name="statusTable" dataset={tasks}>
+  <WmTableColumn field="status" caption="Status"
+    renderCellContent={(row) => (
+      <span className={`badge badge-${row.status === 'done' ? 'success' : 'warning'}`}>
+        {row.status}
+      </span>
+    )}
+  />
+</WmDataTable>
+```
+
+## Notes
+
+- `dataset` can be a WaveMaker variable binding string (e.g. `"Variables.getUserList.dataSet"`) or a JavaScript array.
+- `editmode="inline"` shows edit/save/cancel controls per row; `"dialog"` opens a modal form.
+- Export requires `exportformat` to be set; `exportdatasize` defaults to all rows if unset.
+- Use `nodatamessage` to show a meaningful empty-state message instead of a blank table.
+- `onBeforedatarender` is the right place to transform or sort data before it renders.

package/skills/components/wm-date-time.md

@@ -0,0 +1,80 @@
+---
+component: WmDateTime
+category: input
+import: components/input/epoch/datetime
+tags: [input, date, time, form-field]
+summary: Date Time input field.
+generated: true
+---
+
+# WmDateTime
+
+Date Time input field.
+
+## Usage
+
+```jsx
+<WmDateTime
+  name="dateTime"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| placeholder | `string` | No | — | Placeholder text shown when no datetime is selected. |
+| showampmbuttons | `boolean` | No | — | Whether to show AM/PM toggle buttons. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the datetime picker. |
+| datavalue | `string \| Date \| null` | No | — | The bound data value of the datetime input. |
+| datepattern | `string` | No | — | Date pattern for display formatting. |
+| hourstep | `number` | No | `1` | Step increment for hours. |
+| minutestep | `number` | No | `1` | Step increment for minutes. |
+| outputformat | `string` | No | — | Output format for the datetime value. |
+| required | `boolean` | No | — | Whether a datetime selection is required. |
+| mindate | `string \| Date` | No | — | The earliest selectable date. |
+| maxdate | `string \| Date` | No | — | The latest selectable date. |
+| excludedays | `string` | No | — | Comma-separated day indices to exclude (0=Sunday). |
+| excludedates | `string \| string[] \| Date[]` | No | — | Dates to exclude from selection. |
+| showweeks | `boolean` | No | — | Whether to show week numbers. |
+| showbuttonbar | `boolean` | No | — | Whether to show the button bar (today/clear buttons). |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| readonly | `boolean` | No | — | Whether the datetime picker is read-only. |
+| disabled | `boolean` | No | — | Whether the datetime picker is disabled. |
+| selectfromothermonth | `boolean` | No | — | Whether dates from other months can be selected. |
+| todaybutton | `boolean` | No | — | Whether to show a "Today" button. |
+| clearbutton | `boolean` | No | — | Whether to show a "Clear" button. |
+| todaybuttonlabel | `string` | No | — | Label for the "Today" button. |
+| clearbuttonlabel | `string` | No | — | Label for the "Clear" button. |
+| showcustompicker | `boolean` | No | — | Whether to show a custom picker UI. |
+| adaptiveposition | `boolean` | No | — | Whether to adaptively position the popover. |
+| showdropdownon | `string` | No | — | When to show the dropdown picker. |
+| dataentrymode | `string` | No | — | Data entry mode for the datetime input. |
+| onDateChange | `(date: Date \| null) => void` | No | — | Callback invoked when the date changes. |
+| isValidDate | `(date: Date) => boolean` | No | — | Checks whether a given value is a valid date. |
+| getDateObj | `(value: string \| Date \| null) => Date` | No | — | Converts a value to a Date object. |
+| minDateMaxDateValidationOnInput | `(date: Date) => boolean` | No | — | Validates a date against min/max constraints. |
+| formatValidation | `(date: Date, dateString: string) => boolean` | No | — | Validates the format of the input value. |
+| updatePrevDatavalue | `(date: Date \| null) => void` | No | — | Updates the previously bound data value. |
+| updateBoundVariable | `(date: Date \| null) => void` | No | — | Updates the bound variable with a new value. |
+| handleKeyDown | `(event: KeyboardEvent) => void` | No | — | Handles key down events on the datetime input. |
+| onChange | `( event: SyntheticEvent, widget: Record<string, unknown>, newValue: Date \| st...` | No | — | Callback invoked when the datetime value changes. |
+| onClick | `(event: MouseEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the datetime picker is clicked. |
+| onFocus | `(event: FocusEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the datetime picker receives focus. |
+| onBlur | `(event: FocusEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the datetime picker loses focus. |
+| onMouseEnter | `(event: MouseEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the mouse enters the datetime picker. |
+| onMouseLeave | `(event: MouseEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the mouse leaves the datetime picker. |
+| onBeforeload | `(event: SyntheticEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked before the datetime widget loads. |
+| floatinglabel | `string` | No | — | Whether to show a floating label. |
+| validators | `ValidatorConfig[]` | No | — | Array of validator functions or configurations. |
+| validationmessage | `string` | No | — | Custom validation error message. |
+| fieldName | `string` | No | — | Field name used by the form controller. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-date-time-*`
+
+See foundation-css: `src/tokens/web/components/date/date.json`

package/skills/components/wm-date.md

@@ -0,0 +1,78 @@
+---
+component: WmDate
+category: input
+import: components/input/epoch/date
+tags: [input, date, form-field]
+summary: Date input field.
+generated: true
+---
+
+# WmDate
+
+Date input field.
+
+## Usage
+
+```jsx
+<WmDate
+  name="date"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| placeholder | `string` | No | — | Placeholder text shown when no date is selected. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the date picker. |
+| datavalue | `string \| Date` | No | — | The bound data value of the date input. |
+| datepattern | `string` | No | — | Date pattern for display formatting. |
+| outputformat | `string` | No | — | Output format for the date value. |
+| required | `boolean` | No | — | Whether a date selection is required. |
+| mindate | `string \| Date` | No | — | The earliest selectable date. |
+| maxdate | `string \| Date` | No | — | The latest selectable date. |
+| excludedays | `string` | No | — | Comma-separated day indices to exclude (0=Sunday). |
+| excludedates | `string` | No | — | Comma-separated dates to exclude from selection. |
+| showweeks | `boolean` | No | — | Whether to show week numbers. |
+| showbuttonbar | `boolean` | No | — | Whether to show the button bar (today/clear buttons). |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| readonly | `boolean` | No | — | Whether the date picker is read-only. |
+| disabled | `boolean` | No | — | Whether the date picker is disabled. |
+| showdropdownon | `string` | No | — | When to show the dropdown picker. |
+| showindevices | `string` | No | — | Devices to show the widget on. |
+| adaptiveposition | `boolean` | No | — | Whether to adaptively position the popover. |
+| selectfromothermonth | `boolean` | No | — | Whether dates from other months can be selected. |
+| todaybutton | `boolean` | No | — | Whether to show a "Today" button. |
+| clearbutton | `boolean` | No | — | Whether to show a "Clear" button. |
+| todaybuttonlabel | `string` | No | `"Today"` | Label for the "Today" button. |
+| clearbuttonlabel | `string` | No | `"Clear"` | Label for the "Clear" button. |
+| showcustompicker | `boolean` | No | — | Whether to show a custom date picker UI. |
+| showdateformatasplaceholder | `boolean` | No | — | Whether to show the date format as placeholder. |
+| viewmode | `string` | No | — | Initial calendar view mode. |
+| dataentrymode | `string` | No | — | Data entry mode for the date input. |
+| onDateChange | `(date: Date \| null) => void` | No | — | Callback invoked when the date changes. |
+| getFormattedDate | `(date: Date \| null, pattern?: string) => string` | No | — | Formats a date to a display string. |
+| invokeOnChange | `(value: Date \| string \| null, event?: SyntheticEvent) => void` | No | — | Invokes the onChange callback (from form controller). |
+| datepickerRef | `RefObject<HTMLElement \| null>` | No | — | Ref to the date picker DOM element. |
+| customValidator | `(value: Date \| null) => boolean` | No | — | Custom validator function. |
+| updatePrevDatavalue | `(value: Date \| string \| null) => void` | No | — | Updates the previously bound data value. |
+| updateBoundVariable | `(value: Date \| string \| null) => void` | No | — | Updates the bound variable with a new value. |
+| handleKeyDown | `(event: KeyboardEvent) => void` | No | — | Handles key down events on the date input. |
+| getDateObj | `(date: string \| Date \| null) => Date \| null` | No | — | Converts a value to a Date object. |
+| isValidDate | `(date: string \| Date \| null) => boolean` | No | — | Checks whether a given value is a valid date. |
+| minDateMaxDateValidationOnInput | `(date: Date, displayValue?: string) => boolean` | No | — | Validates a date against min/max constraints. |
+| formatValidation | `(newVal: Date, inputVal: string) => boolean` | No | — | Validates the format of the input value. |
+| onChange | `( event: SyntheticEvent, widget: Record<string, unknown>, newValue: Date \| st...` | No | — | Callback invoked when the date value changes. |
+| onBeforeload | `(event: SyntheticEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked before the date widget loads. |
+| validationmessage | `string` | No | — | Custom validation error message. |
+| validators | `ValidatorConfig[]` | No | — | Array of validator functions or configurations. |
+| fieldName | `string` | No | — | Field name used by the form controller. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-date-*`
+
+See foundation-css: `src/tokens/web/components/date/date.json`

package/skills/components/wm-dialog-body.md

@@ -0,0 +1,28 @@
+---
+component: WmDialogBody
+category: dialogs
+import: components/dialogs/dialog-body
+tags: [dialogs, dialog, body]
+summary: Dialog Body — modal dialog.
+generated: true
+---
+
+# WmDialogBody
+
+Dialog Body — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogBody
+  name="dialogBody"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| children | `ReactNode` | No | — | Content to render inside the dialog body. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-dialog-container.md

@@ -0,0 +1,48 @@
+---
+component: WmDialogContainer
+category: dialogs
+import: components/dialogs/dialog
+tags: [dialogs, dialog, container, icon]
+summary: Dialog Container — modal dialog.
+generated: true
+---
+
+# WmDialogContainer
+
+Dialog Container — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogContainer
+  name="dialogContainer"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| modal | `boolean` | No | — | Whether the dialog is modal (blocks background). |
+| dialogtype | `"design-dialog" \| "login-dialog" \| "page-dialog" \| "iframe-dialog"` | No | — | The type of dialog being rendered. |
+| showheader | `boolean` | No | — | Whether to show the dialog header. |
+| title | `string` | No | — | Title text for the dialog. |
+| iconclass | `string` | No | — | CSS class for the header icon. |
+| iconurl | `string` | No | — | URL for the header icon. |
+| iconwidth | `string` | No | — | Width of the header icon. |
+| iconheight | `string` | No | — | Height of the header icon. |
+| iconmargin | `string` | No | — | Margin for the header icon. |
+| iconstyle | `string` | No | — | Inline style for the header icon. |
+| closable | `boolean` | No | — | Whether the dialog is closable by the user. |
+| sheetposition | `"top" \| "bottom" \| "left" \| "right"` | No | — | Position of the sheet (if sheet is true). |
+| sheet | `boolean` | No | — | Whether the dialog is a sheet. |
+| onClose | `(event?: any) => void` | No | — | Callback fired when the dialog requests to be closed. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-dialog-container-*`
+
+See foundation-css: `src/tokens/web/components/modal-dialog/modal-dialog.json`

package/skills/components/wm-dialog-content.md

@@ -0,0 +1,31 @@
+---
+component: WmDialogContent
+category: dialogs
+import: components/dialogs/dialog-content
+tags: [dialogs, dialog, content]
+summary: Dialog Content — modal dialog.
+generated: true
+---
+
+# WmDialogContent
+
+Dialog Content — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogContent
+  name="dialogContent"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| children | `ReactNode` | No | — | Content to render inside the dialog content area. |
+| sheet | `boolean` | No | — | Whether the parent dialog is a sheet. |
+| sheetposition | `"top" \| "bottom" \| "left" \| "right"` | No | — | Position of the sheet. |
+| isDialog | `boolean` | No | — | Whether the component is part of a dialog. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*