wavemaker-dev-mcp 0.1.3 → 1.0.0

package/skills/components/wm-search.md

@@ -0,0 +1,66 @@
+---
+component: WmSearch
+category: basic
+import: components/basic/search
+tags: [basic, search, input]
+summary: Search display widget.
+generated: true
+---
+
+# WmSearch
+
+Search display widget.
+
+## Usage
+
+```jsx
+<WmSearch
+  name="search"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| searchon | `SearchOn` | No | `"typing"` | When to trigger the search: 'typing' or 'onsearchiconclick'. |
+| showclear | `boolean \| string` | No | — | Whether to show the clear icon in the search bar. |
+| fieldName | `string` | No | — | The field name for the search component. |
+| debouncetime | `number` | No | `250` | The debounce time in milliseconds for the search. |
+| searchkey | `string` | No | — | The key to search for in the dataset. |
+| matchmode | `string` | No | — | The match mode for searching: 'startignorecase', 'anywhereignorecase', etc. |
+| minchars | `number` | No | `1` | The minimum characters required to trigger a search. |
+| limit | `number` | No | — | The maximum number of results to display. |
+| placeholder | `string` | No | — | The placeholder text for the search input. |
+| dropup | `boolean` | No | — | If true, the results dropdown will open upwards. |
+| type | `SearchType` | No | `"search"` | The type of search component: 'search' or 'autocomplete'. |
+| showsearchicon | `boolean` | No | `true` | Whether to show the search icon. |
+| showbackbutton | `boolean` | No | — | Whether to show the back button (relevant for mobile layouts). |
+| imagewidth | `string` | No | — | The width of images in the search results. |
+| datacompletemsg | `string` | No | — | Message to show when data loading is complete. |
+| loadingdatamsg | `string` | No | — | Message to show while data is loading. |
+| clearsearchiconclass | `string` | No | — | CSS class for the clear search icon. |
+| backsearchiconclass | `string` | No | — | CSS class for the back search icon. |
+| searchiconclass | `string` | No | — | CSS class for the search icon. |
+| navsearchbar | `boolean` | No | — | If true, the search bar will be integrated into the navigation bar. |
+| shortcutkey | `string` | No | — | Custom shortcut key to focus the search input. |
+| id | `string` | No | — | — |
+| onBeforeservicecall | `(widget: any, inputData: any) => void` | No | — | Callback fired before a service call is made for searching. |
+| onSelect | `(event: MouseEvent<HTMLLIElement>, widget: any, selectedValue: any) => void` | No | — | Callback fired when a search result is selected. |
+| onSubmit | `(event: MouseEvent<HTMLDivElement>, widget: any) => void` | No | — | Callback fired when the search is submitted. |
+| onClear | `(event: any, widget: any) => void` | No | — | Callback fired when search is cleared. |
+| onSearch | `(event: MouseEvent<HTMLButtonElement>, widget: any) => void` | No | — | Callback fired when a search is triggered via icon/button. |
+| onDatasetready | `(widget: any, data: any[]) => void` | No | — | Callback fired when the dataset is ready. |
+| onQuerySearch | `(params: any, success: (val: any) => void, error: (err: any) => void) => void` | No | — | Callback for custom query search logic. |
+| autofocus | `boolean` | No | — | Whether to auto-focus the search input on load. |
+| getDisplayExpression | `(data: any) => string` | No | — | Function to get the display expression for an item. |
+| isSearchInChips | `boolean` | No | — | Whether searching in chips is enabled. |
+| onChange | `(event: any, widget: any, newVal?: any, oldVal?: any) => void` | No | — | Callback fired when the search value changes. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-search-*`
+
+See foundation-css: `src/tokens/web/components/search/search.json`

package/skills/components/wm-select.md

@@ -0,0 +1,129 @@
+---
+component: WmSelect
+category: input
+import: components/input/select
+tags: [dropdown, select, options, form-field, single-select, multi-select, dataset, input]
+summary: Dropdown select field bound to a dataset with display/data field mapping. Supports single and multiple selection.
+related: [WmCombobox, WmCheckboxset, WmRadioset, WmChips]
+---
+
+# WmSelect
+
+Dropdown select input bound to a dataset. Supports single and multiple selection, grouping, ordering, and custom display expressions.
+
+## Usage
+
+```jsx
+<WmSelect
+  name="roleSelect"
+  datavalue={selectedRole}
+  dataset={roles}
+  displayfield="label"
+  datafield="id"
+  placeholder="Select a role"
+  onChange={(e, widget, value) => setSelectedRole(value)}
+/>
+```
+
+## Key Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| name | `string` | Yes | — | Widget identifier |
+| datavalue | `string \| number \| boolean \| null \| Array` | No | — | Currently selected value(s) |
+| dataset | `array \| string \| object` | No | — | Options source — pass an array or a variable binding string |
+| displayfield | `string` | No | — | Field from each dataset item to show as the option label |
+| datafield | `string` | No | — | Field from each dataset item to use as the value |
+| placeholder | `string` | No | — | Hint text shown when no option is selected |
+| multiple | `boolean` | No | `false` | Allow multiple selections |
+| required | `boolean` | No | `false` | Mark field as required for form validation |
+| disabled | `boolean` | No | `false` | Disable the field |
+| readonly | `boolean` | No | `false` | Prevent user changes |
+| groupby | `string` | No | — | Field to group options by |
+| orderby | `string` | No | — | Field to sort options by |
+| displayExpression | `string \| function` | No | — | Custom expression or fn to build the displayed label |
+| displaylabel | `string` | No | — | Label shown above the field |
+| error | `boolean` | No | `false` | Apply error styling |
+| onChange | `function` | No | — | `(event, widget, newValue, prevValue) => void` |
+| onFocus | `function` | No | — | Fires on focus |
+| onKeyDown | `function` | No | — | Fires on key down |
+
+## Patterns
+
+**Bound to a WaveMaker variable (service call result):**
+```jsx
+<WmSelect
+  name="countrySelect"
+  dataset="Variables.getCountries.dataSet"
+  displayfield="name"
+  datafield="code"
+  placeholder="Select country"
+/>
+```
+
+**Static options array:**
+```jsx
+<WmSelect
+  name="statusSelect"
+  dataset={[
+    { label: "Active", value: "active" },
+    { label: "Inactive", value: "inactive" },
+  ]}
+  displayfield="label"
+  datafield="value"
+  datavalue="active"
+/>
+```
+
+**Multi-select with grouping:**
+```jsx
+<WmSelect
+  name="tagSelect"
+  dataset={tags}
+  displayfield="name"
+  datafield="id"
+  multiple={true}
+  groupby="category"
+  orderby="name"
+/>
+```
+
+**Inside a form with validation:**
+```jsx
+<WmSelect
+  name="prioritySelect"
+  dataset={priorities}
+  displayfield="label"
+  datafield="id"
+  required={true}
+  displaylabel="Priority"
+  error={formErrors.priority}
+/>
+```
+
+**Custom display expression:**
+```jsx
+<WmSelect
+  name="userSelect"
+  dataset={users}
+  datafield="id"
+  displayExpression={(item) => `${item.firstName} ${item.lastName}`}
+/>
+```
+
+## CSS Tokens
+
+| Token | CSS Variable | Applied to |
+|-------|-------------|-----------|
+| Primary | `--wm-color-primary` | Focus border, selected state |
+| Surface | `--wm-color-surface` | Dropdown background |
+| On-surface | `--wm-color-on-surface` | Option text |
+| Error | `--wm-color-error` | Error border/icon |
+| Label large | `--wm-label-large-font-size` | Option text size |
+
+## Notes
+
+- If `dataset` is a string, it is treated as a WaveMaker variable binding path.
+- When `multiple={true}`, `datavalue` will be an array of selected values.
+- `displayfield` and `datafield` both default to the full item if omitted (works for primitive arrays).
+- Use `error={true}` to show error styling; combine with a `WmLabel` for the validation message.

package/skills/components/wm-slider.md

@@ -0,0 +1,53 @@
+---
+component: WmSlider
+category: input
+import: components/input/slider
+tags: [input, slider]
+summary: Slider input field.
+generated: true
+---
+
+# WmSlider
+
+Slider input field.
+
+## Usage
+
+```jsx
+<WmSlider
+  name="slider"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| disabled | `boolean` | No | — | Whether the slider is disabled. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the slider. |
+| readonly | `boolean` | No | — | Whether the slider is read-only. |
+| datavalue | `number` | No | — | The bound data value of the slider. |
+| minvalue | `number` | No | `0` | Minimum value of the slider. |
+| maxvalue | `number` | No | `100` | Maximum value of the slider. |
+| step | `number` | No | `1` | Step increment for the slider. |
+| onChange | `( event: ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newD...` | No | — | Callback invoked when the slider value changes. |
+| invokeOnChange | `(newValue: number, $event?: ChangeEvent<HTMLInputElement>) => void` | No | — | Invokes the onChange callback propagated from form controller. |
+| invokeOnTouched | `() => void` | No | — | Invokes the onTouched callback propagated from form controller. |
+| invokeOnFocus | `(event: FocusEvent<HTMLElement>) => void` | No | — | Invokes the onFocus callback propagated from form controller. |
+| invokeOnBlur | `(event: FocusEvent<HTMLElement>) => void` | No | — | Invokes the onBlur callback propagated from form controller. |
+| displayValue | `string` | No | — | Formatted display value of the slider. |
+| showmarkers | `boolean` | No | — | Whether to show markers on the slider track. |
+| markerlabeltext | `string \| string[]` | No | — | Custom label text for each marker. |
+| showicons | `boolean` | No | — | Whether to show start/end icons. |
+| starticon | `string` | No | — | CSS class for the icon at the start of the slider. |
+| endicon | `string` | No | — | CSS class for the icon at the end of the slider. |
+| rangelabelposition | `"top" \| "bottom" \| "side"` | No | `"top"` | Position of range labels (min/max). |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-slider-*`
+
+See foundation-css: `src/tokens/web/components/slider/slider.json`

package/skills/components/wm-spinner.md

@@ -0,0 +1,43 @@
+---
+component: WmSpinner
+category: basic
+import: components/basic/spinner
+tags: [basic, spinner, caption, icon]
+summary: Spinner display widget.
+generated: true
+---
+
+# WmSpinner
+
+Spinner display widget.
+
+## Usage
+
+```jsx
+<WmSpinner
+  name="spinner"
+  caption="My Spinner"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| caption | `string` | No | — | The message to be displayed along with the spinner. |
+| type | `string` | No | `"icon"` | The type of spinner to display: 'icon', 'image', or any other value for a default circular progress. |
+| servicevariabletotrack | `string` | No | — | Comma-separated names of service variables to track for loading state. |
+| iconclass | `string` | No | `"fa fa-circle-o-notch fa-spin"` | The CSS class for the icon (effective only when type is 'icon'). |
+| iconsize | `string` | No | — | The font size for the icon (effective only when type is 'icon'). |
+| image | `string` | No | — | The URL of the image to use as a spinner (effective only when type is 'image'). |
+| imagewidth | `string` | No | `"20px"` | The width of the spinner image. |
+| imageheight | `string` | No | — | The height of the spinner image. |
+| id | `string` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-spinner-*`
+
+See foundation-css: `src/tokens/web/components/spinner/spinner.json`

package/skills/components/wm-tab-pane.md

@@ -0,0 +1,45 @@
+---
+component: WmTabPane
+category: container
+import: components/container/tabs/tab-pane
+tags: [container, tab, pane, caption, panel, badge]
+summary: Tab Pane layout container.
+generated: true
+---
+
+# WmTabPane
+
+Tab Pane layout container.
+
+## Usage
+
+```jsx
+<WmTabPane
+  name="tabPane"
+  caption="My Tab Pane"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| caption | `string` | No | — | Tab caption/title (alternative to title). |
+| smoothscroll | `boolean` | No | — | Enable smooth scroll when tab is selected. |
+| content | `string` | No | — | Tab content (legacy). |
+| heading | `string` | No | — | Tab heading (alternative to title). |
+| title | `string` | No | — | Tab title displayed in the tab header. |
+| disabled | `boolean` | No | `false` | Whether the tab is disabled. |
+| badgevalue | `string \| number` | No | — | Badge value displayed in the tab header. |
+| badgetype | `string` | No | — | Badge style variant. |
+| paneicon | `string` | No | — | Icon class for the tab header. |
+| isdynamic | `boolean` | No | — | Whether this pane is from dynamic tabs (injected). |
+| index | `number` | No | — | Tab index (injected by parent). |
+| item | `Record<string, unknown>` | No | — | Dynamic tab item data (injected for dynamic tabs). |
+| onSelect | `( event: SyntheticEvent \| null, widgetOrProps: Record<string, unknown>, paneI...` | No | — | Called when tab is selected. |
+| onDeselect | `( event: SyntheticEvent \| null, widgetOrProps: Record<string, unknown>, paneI...` | No | — | Called when tab is deselected. |
+| onLoad | `(event: SyntheticEvent \| null, widgetOrProps: Record<string, unknown>) => void` | No | — | Called when tab content loads. |
+| onHeaderClick | `(event: SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void` | No | — | Called when tab header is clicked. |
+| renderPartial | `(props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => ReactNode` | No | — | Custom render function for tab content. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-table.md

@@ -0,0 +1,113 @@
+---
+component: WmTable
+category: data
+import: components/data/table
+tags: [data, table, data-binding, pagination, editable, icon, filter]
+summary: Table — data-bound data widget with pagination, sorting, and filtering.
+generated: true
+---
+
+# WmTable
+
+Table — data-bound data widget with pagination, sorting, and filtering.
+
+## Usage
+
+```jsx
+<WmTable
+  name="table"
+  dataset={items}
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| editmode | `TableEditMode` | No | `"none"` | Mode for editing table data. |
+| statehandler | `StorageType` | No | — | Storage type for persisting table state. |
+| showrowindex | `boolean` | No | `false` | Whether to show the row index column. |
+| showheader | `boolean` | No | `true` | Whether to show the table header. |
+| enablesort | `boolean` | No | `true` | Whether to enable sorting on columns. |
+| enablecolumnselection | `boolean` | No | `false` | When true, clicking column header selects/deselects the column instead of sorting. |
+| shownavigation | `boolean` | No | `true` | Whether to show navigation controls. |
+| showrecordcount | `boolean` | No | `false` | Whether to show the total record count. |
+| radioselect | `boolean` | No | `false` | Whether to enable radio button selection. |
+| radioselecttitle | `string` | No | — | Title for the radio selection column. |
+| radioselectarialabel | `string` | No | — | Accessible label for the radio selection column. |
+| multiselect | `boolean` | No | `false` | Whether to enable multi-selection using checkboxes. |
+| multiselecttitle | `string` | No | — | Title for the multi-selection column. |
+| multiselectarialabel | `string` | No | — | Accessible label for the multi-selection column. |
+| gridfirstrowselect | `boolean` | No | `false` | Whether to select the first row by default. |
+| isrowselectable | `boolean` | No | `true` | When true (default), clicking anywhere on row selects it. When false, only radio/checkbox column click selects. |
+| isrowexpansionenabled | `boolean` | No | `false` | Whether row expansion is enabled. |
+| formposition | `TableFormPosition` | No | — | Position of the form when editing. |
+| rowClass | `string` | No | — | CSS class to apply to rows. |
+| spacing | `TablePanelSpacing` | No | `"normal"` | Spacing between table panels. |
+| title | `string` | No | — | Title of the table. |
+| subheading | `string` | No | — | Subheading text for the table. |
+| iconclass | `string` | No | — | CSS class for the table icon. |
+| dataset | `any[]` | No | — | The collection of data items to display in the table. |
+| navigation | `INavigation` | No | — | The type of navigation to use. |
+| isdynamictable | `boolean` | No | — | Whether the table is dynamic. |
+| table_reference | `string` | No | — | Reference key for the table. |
+| formName | `string` | No | — | Name of the form associated with the table. |
+| parentForm | `string` | No | — | Name of the parent form. |
+| pagesize | `number` | No | `10` | Number of items per page. |
+| navigationalign | `IAlignment` | No | — | Alignment of navigation controls. |
+| maxsize | `number` | No | — | Maximum number of page links to show. |
+| boundarylinks | `boolean` | No | — | Whether to show first/last page links. |
+| allowpagesizechange | `boolean` | No | — | Whether to allow changing the page size. |
+| pagesizeoptions | `string` | No | — | Available options for page size. |
+| onDemandLoad | `boolean` | No | — | Whether to load data on demand. |
+| filtermode | `TableFilterMode` | No | — | Mode for filtering table data. |
+| searchlabel | `string` | No | — | Label for the search box. |
+| filteronkeypress | `boolean` | No | — | Whether to filter data on every key press in the search box. |
+| exportformat | `any[]` | No | — | Available formats for exporting data. |
+| exportOptions | `any[]` | No | — | Options for exporting data. |
+| exportdatasize | `number` | No | — | Maximum dataset size for export. |
+| onBeforeexport | `(data: any) => boolean \| void` | No | — | Callback fired before exporting data. |
+| onAfterexport | `(data: any) => void` | No | — | Callback fired after exporting data. |
+| confirmdelete | `string` | No | — | Message to confirm record deletion. |
+| deleteoktext | `string` | No | — | Text for the delete confirm button. |
+| deletecanceltext | `string` | No | — | Text for the delete cancel button. |
+| errormessage | `string` | No | — | Error message to display. |
+| nodatamessage | `string` | No | — | Message to display when no data is available. |
+| loadingdatamsg | `string` | No | — | Message to display while loading data. |
+| insertmessage | `string` | No | — | Message to display after successful record insertion. |
+| updatemessage | `string` | No | — | Message to display after successful record update. |
+| deletemessage | `string` | No | — | Message to display after successful record deletion. |
+| ondemandmessage | `string` | No | — | Message for on-demand loading button. |
+| viewlessmessage | `string` | No | — | Message for view-less button. |
+| showviewlessbutton | `boolean` | No | — | Whether to show the view-less button. |
+| onRowDelete | `(deletedRowData: any, deletedRowIndex: number, updatedDataset: any[]) => void` | No | — | Callback fired when a row is deleted. |
+| onRowUpdate | `(updatedRowData: any, rowIndex: number, updatedDataset: any[]) => void` | No | — | Callback fired when a row is updated. |
+| onRowclick | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is clicked. |
+| onBeforedatarender | `(widget: any, data: any, columns: any) => void` | No | — | Callback fired before data is rendered. |
+| onDatarender | `(widget: any, data: any) => void` | No | — | Callback fired after data is rendered. |
+| onColumnselect | `( event: MouseEvent, data: { field: string; colDef: any; data: any[] } ) => void` | No | — | Callback fired when a column is selected. |
+| onColumndeselect | `( event: MouseEvent, data: { field: string; colDef: any; data: any[] } ) => void` | No | — | Callback fired when a column is deselected. |
+| onSort | `(event: any, widget: any, data: any) => void` | No | — | Callback fired when data is sorted. |
+| onBeforerowdelete | `( event: any, widget: any, row: any, options: any ) => void \| boolean \| Promi...` | No | — | Callback fired before a row is deleted. |
+| onBeforefilter | `(widget: any, filterFields: any) => void \| boolean \| Promise<void \| boolean>` | No | — | Callback fired before filtering data. |
+| onHeaderclick | `(event: any, widget: any, column: any) => void` | No | — | Callback fired when a header is clicked. |
+| onRowselect | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is selected. |
+| onRowdeselect | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is deselected. |
+| onSetrecord | `(event: SyntheticEvent, widget: unknown, data: any, pageInfo: any) => void` | No | — | Callback fired when a record is set. |
+| children | `ReactNode` | Yes | — | Children components (columns, actions, etc.). |
+| onRowinsert | `(event: any, widget: any, data: any) => void` | No | — | Callback fired when a row is inserted. |
+| onRowupdate | `(event: any, widget: any, data: any) => void` | No | — | Callback fired when a row is updated. |
+| onRowdelete | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is deleted. |
+| datasource | `LiveVariableConfig` | No | — | Data source for the table. |
+| binddataset | `string` | No | — | Binding path for the dataset. |
+| onSuccess | `(operation: string, data: any) => void` | No | — | Callback fired on successful operation. |
+| onError | `(event: any, widget: any, data: any, operation: string) => void` | No | — | Callback fired on operation error. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-table-*`
+
+See foundation-css: `src/tokens/web/components/data-table/data-table.json`

package/skills/components/wm-tabs.md

@@ -0,0 +1,48 @@
+---
+component: WmTabs
+category: container
+import: components/container/tabs
+tags: [container, tabs, data-binding, input]
+summary: Tabs layout container.
+generated: true
+---
+
+# WmTabs
+
+Tabs layout container.
+
+## Usage
+
+```jsx
+<WmTabs
+  name="tabs"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| dataset | `Record<string, unknown>[]` | No | `[]` | Data source for dynamic tabs. Each item renders a tab. |
+| defaultpaneindex | `number` | No | `0` | Index of the tab to show by default (0-based). |
+| justified | `boolean` | No | `false` | Whether tabs are justified (equal width). |
+| tabsposition | `TabsPosition` | No | `"top"` | Tab list position. |
+| nodatamessage | `string` | No | `"No Data Found"` | Message shown when dataset is empty in dynamic mode. |
+| statehandler | `StateHandler` | No | `"none"` | Where to persist selected tab index. |
+| autotabactivation | `boolean` | No | `true` | Whether tab content activates on focus. |
+| transition | `TabTransition` | No | `"none"` | Transition effect when switching tabs. |
+| type | `"static" \| "dynamic"` | No | `"static"` | Tabs type: static (children) or dynamic (dataset). |
+| iconposition | `TabIconPosition` | No | `"left"` | Icon position relative to tab label. |
+| enablescroll | `boolean` | No | `false` | Whether to enable scroll for many tabs. |
+| render | `( item: Record<string, unknown>, index: number, dataset: Record<string, unkno...` | No | — | Render function for dynamic tabs. Receives item, index, dataset, and isActive. |
+| selectedindex | `number` | No | — | Controlled selected tab index (optional). |
+| onChange | `( event: SyntheticEvent \| null, props: WmTabsProps, newPaneIndex: number, old...` | No | — | Called when the active tab changes. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-tabs-*`
+
+See foundation-css: `src/tokens/web/components/tabs/tabs.json`

package/skills/components/wm-text.md

@@ -0,0 +1,65 @@
+---
+component: WmText
+category: input
+import: components/input/text
+tags: [input, text, form-field]
+summary: Text input field.
+generated: true
+---
+
+# WmText
+
+Text input field.
+
+## Usage
+
+```jsx
+<WmText
+  name="text"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| datavaluesource | `Record<string, unknown>` | No | — | Source for binding data values. |
+| floatinglabel | `boolean` | No | — | Whether to show a floating label on the input. |
+| autocomplete | `string` | No | `"true"` | Controls browser autocomplete behavior. |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| autotrim | `boolean` | No | — | Whether to automatically trim whitespace from input. |
+| disabled | `boolean` | No | — | Whether the input is disabled. |
+| readonly | `boolean` | No | — | Whether the input is read-only. |
+| placeholder | `string` | No | — | Placeholder text shown when the input is empty. |
+| type | `"text" \| "password" \| "number" \| "email" \| "tel" \| "url" \| "color" \| "search"` | No | `"text"` | The HTML input type. |
+| maxchars | `number` | No | — | Maximum number of characters allowed. |
+| minvalue | `number` | No | — | Minimum value constraint (for number type). |
+| maxvalue | `number` | No | — | Maximum value constraint (for number type). |
+| step | `number` | No | — | Step increment value (for number type). |
+| displayformat | `string` | No | — | Display format applied to the input value. |
+| showdisplayformaton | `"keypress" \| "blur"` | No | `"keypress"` | When to apply the display format. |
+| regexp | `string` | No | — | Regular expression pattern for input validation. |
+| required | `boolean` | No | — | Whether the input is required. |
+| datavalue | `string` | No | — | The bound data value of the input. |
+| updateon | `"keypress" \| "blur"` | No | `"blur"` | When the data value should be updated. |
+| updatedelay | `string` | No | `"0"` | Delay in milliseconds before updating the data value. |
+| autocapitalize | `"none" \| "sentences" \| "words" \| "characters"` | No | `"none"` | Auto-capitalization mode for the input. |
+| onChange | `( event: ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newV...` | No | — | Callback invoked when the input value changes. |
+| leadingiconclass | `string` | No | — | CSS class for the leading icon. |
+| trailingiconclass | `string` | No | — | CSS class for the trailing icon. |
+| supportingtext | `string` | No | — | Supporting text displayed below the input. |
+| onLeadingiconclick | `( event: MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown> ) =>...` | No | — | Callback invoked when the leading icon is clicked. |
+| onTrailingiconclick | `( event: MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown> ) =>...` | No | — | Callback invoked when the trailing icon is clicked. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the input. |
+| error | `boolean` | No | — | Whether the input has a validation error (typically injected by form controller). |
+| id | `string` | No | — | The unique ID for the widget. |
+| 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-text-*`
+
+See foundation-css: `src/tokens/web/components/form-controls/form-controls.json`

package/skills/components/wm-textarea.md

@@ -0,0 +1,47 @@
+---
+component: WmTextarea
+category: input
+import: components/input/textarea
+tags: [input, textarea, form-field]
+summary: Textarea input field.
+generated: true
+---
+
+# WmTextarea
+
+Textarea input field.
+
+## Usage
+
+```jsx
+<WmTextarea
+  name="textarea"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| readonly | `boolean` | No | — | Whether the textarea is read-only. |
+| required | `boolean` | No | — | Whether the textarea is required. |
+| disabled | `boolean` | No | — | Whether the textarea is disabled. |
+| maxchars | `number` | No | — | Maximum number of characters allowed. |
+| placeholder | `string` | No | — | Placeholder text shown when the textarea is empty. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the textarea. |
+| autofocus | `boolean` | No | — | Whether the textarea should be focused on mount. |
+| limitdisplaytext | `string` | No | — | Display text for the character limit indicator. |
+| datavalue | `string` | No | — | The bound data value of the textarea. |
+| regexp | `string` | No | — | Regular expression pattern for input validation. |
+| updatedelay | `string` | No | `"0"` | Delay in milliseconds before updating the data value. |
+| updateon | `"keypress" \| "blur"` | No | `"blur"` | When the data value should be updated. |
+| autocapitalize | `boolean` | No | — | Auto-capitalization mode for the textarea. |
+| onChange | `( event: ChangeEvent<HTMLTextAreaElement>, widget: Record<string, unknown>, n...` | No | — | Callback invoked when the textarea value changes. |
+| onKeypress | `( event: ChangeEvent<HTMLTextAreaElement> \| KeyboardEvent<HTMLElement>, widge...` | No | — | Callback invoked on keypress or input change events.
+Overrides BaseProps because the textarea fires this from the change handler. |
+| error | `boolean` | No | — | Whether the textarea has a validation error (typically injected by form controller). |
+| id | `string` | No | — | The unique ID for the widget. |
+| fieldName | `string` | No | — | Field name used by the form controller. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-tile.md

@@ -0,0 +1,34 @@
+---
+component: WmTile
+category: basic
+import: components/basic/tile
+tags: [basic, tile]
+summary: Tile display widget.
+generated: true
+---
+
+# WmTile
+
+Tile display widget.
+
+## Usage
+
+```jsx
+<WmTile
+  name="tile"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| id | `string` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-tile-*`
+
+See foundation-css: `src/tokens/web/components/tile/tile.json`