wavemaker-dev-mcp 0.1.1 → 1.0.0

package/skills/components/wm-audio.md

@@ -0,0 +1,41 @@
+---
+component: WmAudio
+category: basic
+import: components/basic/audio
+tags: [basic, audio]
+summary: Audio display widget.
+generated: true
+---
+
+# WmAudio
+
+Audio display widget.
+
+## Usage
+
+```jsx
+<WmAudio
+  name="audio"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| mp3format | `string` | Yes | — | The URL or source of the MP3 file. |
+| muted | `boolean` | No | `false` | If true, the audio will be muted. |
+| controls | `boolean` | No | `false` | If true, audio controls will be displayed. |
+| loop | `boolean` | No | `false` | If true, the audio will loop back to the start when finished. |
+| audiopreload | `"auto" \| "metadata" \| "none"` | No | `"auto"` | Specifies if and how the audio should be preloaded. |
+| audiosupportmessage | `string` | No | — | Message to display if the browser does not support the audio element. |
+| autoplay | `boolean` | No | `false` | If true, the audio will start playing automatically. |
+| id | `string` | No | — | The unique ID for the audio element. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-audio-*`
+
+See foundation-css: `src/tokens/web/components/audio/audio.json`

package/skills/components/wm-button-group.md

@@ -0,0 +1,36 @@
+---
+component: WmButtonGroup
+category: form
+import: components/form/button-group
+tags: [form, button, group]
+summary: Button Group form element.
+generated: true
+---
+
+# WmButtonGroup
+
+Button Group form element.
+
+## Usage
+
+```jsx
+<WmButtonGroup
+  name="buttonGroup"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| vertical | `boolean` | No | `false` | If true, the buttons in the group will be arranged vertically. |
+| horizontalalign | `string` | No | — | The horizontal alignment of the button group. |
+| children | `ReactNode` | Yes | — | The children elements (typically buttons) to be rendered inside the group. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-button-group-*`
+
+See foundation-css: `src/tokens/web/components/button-group/button-group.json`

package/skills/components/wm-button.md

@@ -0,0 +1,114 @@
+---
+component: WmButton
+category: form
+import: components/form/button
+tags: [button, action, submit, reset, icon, form, click]
+summary: Clickable button with optional icon, badge, and caption. Supports submit/reset form roles.
+related: [WmAnchor, WmIcon, WmToolbar]
+---
+
+# WmButton
+
+Standard clickable button. Supports captions, icons (left or right), badge counters, and HTML button types (`button`, `submit`, `reset`).
+
+## Usage
+
+```jsx
+<WmButton
+  name="saveBtn"
+  caption="Save"
+  iconclass="wm-sl-l sl-cloud-upload"
+  onClick={(e, widget) => handleSave()}
+/>
+```
+
+## Key Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `string` | — | Required. Widget identifier |
+| caption | `string` | — | Button label text |
+| type | `"button" \| "submit" \| "reset"` | `"button"` | HTML button type. Use `"submit"` inside a `WmForm` |
+| disabled | `boolean` | `false` | Disable the button |
+| iconclass | `string` | — | CSS class for the icon (e.g. WaveMaker icon classes or FontAwesome) |
+| iconurl | `string` | — | URL of an image icon |
+| iconposition | `"left" \| "right"` | `"left"` | Position of icon relative to caption |
+| iconwidth | `string` | — | Icon width (e.g. `"16px"`) |
+| iconheight | `string` | — | Icon height |
+| iconmargin | `string` | `"0 4"` | Margin around the icon (CSS shorthand) |
+| badgevalue | `string \| number` | — | Badge count shown on the button |
+| shortcutkey | `string` | — | Keyboard shortcut (e.g. `"s"` for Alt+S) |
+| stopPropagation | `boolean` | `false` | Stop click event from bubbling |
+| formName | `string` | — | Associate with a named form (for `type="submit"`) |
+| onClick | `function` | — | `(event, widget) => void` |
+| className | `string` | — | Additional CSS class names |
+| show | `boolean` | `true` | Visibility |
+
+## Patterns
+
+**Icon-only button (no caption):**
+```jsx
+<WmButton name="deleteBtn" iconclass="wm-sl-l sl-trash" title="Delete" />
+```
+
+**Submit button inside a form:**
+```jsx
+<WmButton name="submitBtn" caption="Submit" type="submit" />
+```
+
+**Button with badge (notification count):**
+```jsx
+<WmButton name="notifBtn" iconclass="wm-sl-l sl-bell" badgevalue={unreadCount} />
+```
+
+**Right-aligned icon:**
+```jsx
+<WmButton name="nextBtn" caption="Next" iconclass="wm-sl-l sl-arrow-right" iconposition="right" />
+```
+
+**Disabled state driven by expression:**
+```jsx
+<WmButton name="saveBtn" caption="Save" disabled={!formValid} onClick={handleSave} />
+```
+
+**Row of actions using WmLinearLayout:**
+```jsx
+<WmLinearLayout name="formActions" direction="row" spacing={12}>
+  <WmLinearLayoutItem name="formActions_item1">
+    <WmButton name="saveBtn" caption="Save" type="submit" />
+  </WmLinearLayoutItem>
+  <WmLinearLayoutItem name="formActions_item2">
+    <WmButton name="cancelBtn" caption="Cancel" onClick={handleCancel} />
+  </WmLinearLayoutItem>
+</WmLinearLayout>
+```
+
+## CSS Tokens
+
+| Token | CSS Variable | Applied to |
+|-------|-------------|-----------|
+| Primary | `--wm-color-primary` | Filled button background |
+| On-primary | `--wm-color-on-primary` | Filled button text |
+| Label large | `--wm-label-large-font-size` | Button text size |
+| Border radius | `--wm-radius-md` | Button corner rounding |
+| Disabled opacity | `--wm-opacity-active` (38%) | Disabled state |
+
+## Appearance Classes (apply via `className`)
+
+WaveMaker buttons accept Bootstrap-compatible variant classes:
+
+| Class | Appearance |
+|-------|-----------|
+| `btn-primary` | Filled primary color |
+| `btn-secondary` | Filled secondary color |
+| `btn-outline-primary` | Outlined primary |
+| `btn-danger` | Filled error/danger color |
+| `btn-link` | Text-only, no background |
+| `btn-sm` | Small size |
+| `btn-lg` | Large size |
+
+## Notes
+
+- Always set a unique `name` per button — it is used for widget references and accessibility.
+- Use `type="submit"` when the button is inside a `WmForm`; it triggers form validation automatically.
+- `iconclass` accepts WaveMaker icon classes (`wm-sl-l sl-*`) and FontAwesome classes (`fa fa-*`).

package/skills/components/wm-calendar.md

@@ -0,0 +1,54 @@
+---
+component: WmCalendar
+category: input
+import: components/input/calendar
+tags: [input, calendar, data-binding]
+summary: Calendar input field.
+generated: true
+---
+
+# WmCalendar
+
+Calendar input field.
+
+## Usage
+
+```jsx
+<WmCalendar
+  name="calendar"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| dataset | `unknown[] \| Record<string, unknown>` | No | — | The data source bound to the calendar (array of events). |
+| datavalue | `string \| Date \| null` | No | — | The currently selected data value / date. |
+| eventtitle | `string` | No | — | Field in the dataset used as the event title. |
+| eventstart | `string` | No | — | Field in the dataset used as the event start date. |
+| eventend | `string` | No | — | Field in the dataset used as the event end date. |
+| eventallday | `string` | No | — | Field in the dataset indicating if the event is all-day. |
+| eventclass | `string` | No | — | Field in the dataset used for the event CSS class. |
+| controls | `string` | No | — | Calendar controls to display (e.g., navigation buttons). |
+| calendartype | `string` | No | — | Type of calendar. |
+| view | `string` | No | — | Default calendar view. |
+| selectionmode | `string` | No | — | Selection mode for the calendar. |
+| onSelect | `($start: Date, $end: Date, $view: string, $data: unknown[]) => void` | No | — | Callback invoked when a date or event is selected. |
+| onBeforerender | `(event: SyntheticEvent, widget?: Record<string, unknown>) => void` | No | — | Callback invoked before the calendar is rendered. |
+| onEventdrop | `( $event: SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: u...` | No | — | Callback invoked when an event is dropped (drag-and-drop). |
+| onEventresize | `( $event: SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: u...` | No | — | Callback invoked when an event is resized. |
+| onEventclick | `($event: SyntheticEvent, $data: unknown[], $view: string) => void` | No | — | Callback invoked when an event is clicked. |
+| onEventrender | `($event: SyntheticEvent, $data: unknown[], $view: string) => void` | No | — | Callback invoked when an event is rendered. |
+| onViewrender | `($view: unknown) => void` | No | — | Callback invoked when the calendar view changes. |
+| onDateclick | `(event: SyntheticEvent, widget?: Record<string, unknown>) => void` | No | — | Callback invoked when a date cell is clicked. |
+| tabindex | `number` | No | — | Tab index for keyboard navigation. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-calendar-*`
+
+See foundation-css: `src/tokens/web/components/calendar/calendar.json`

package/skills/components/wm-card.md

@@ -0,0 +1,60 @@
+---
+component: WmCard
+category: data
+import: components/data/card
+tags: [data, card, icon]
+summary: Card data widget.
+generated: true
+---
+
+# WmCard
+
+Card data widget.
+
+## Usage
+
+```jsx
+<WmCard
+  name="card"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| title | `string` | No | — | Title of the card. |
+| subheading | `string` | No | — | Subheading of the card. |
+| iconclass | `string` | No | — | CSS class for the icon in the card header. |
+| iconurl | `string` | No | — | URL for the icon image in the card header. |
+| actions | `string` | No | — | Actions available for the card, typically shown in a menu. |
+| picturesource | `string` | No | — | Source URL for the card's main image. |
+| picturetitle | `string` | No | — | Title for the card's main image. |
+| imageheight | `string` | No | `"200px"` | Height of the card's main image. |
+| itemaction | `string` | No | — | Action to perform when a menu item is clicked. |
+| itemchildren | `string` | No | — | Property to use for submenu items. |
+| itemicon | `string` | No | — | Property to use for menu item icons. |
+| itemlabel | `string` | No | — | Property to use for menu item labels. |
+| itemlink | `string` | No | — | Property to use for menu item links. |
+| isactive | `string` | No | — | Property to determine if a menu item is active. |
+| cardItem | `any` | No | — | The data item associated with the card. |
+| userrole | `string` | No | — | User role for access control. |
+| autoclose | `string` | No | `"always"` | When to close the action menu. |
+| isFirst | `boolean` | No | — | Whether the card is the first item in a list. |
+| isLast | `boolean` | No | — | Whether the card is the last item in a list. |
+| currentItemWidgets | `any` | No | — | Widgets for the current item in a list. |
+| onClick | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for click event on the card. |
+| onDblclick | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for double click event on the card. |
+| onMouseover | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse over event on the card. |
+| onMouseout | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse out event on the card. |
+| onMouseenter | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse enter event on the card. |
+| onMouseleave | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse leave event on the card. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-card-*`
+
+See foundation-css: `src/tokens/web/components/cards/cards.json`

package/skills/components/wm-carousel.md

@@ -0,0 +1,43 @@
+---
+component: WmCarousel
+category: advanced
+import: components/advanced/carousel
+tags: [advanced, carousel, data-binding, input]
+summary: Carousel advanced widget.
+generated: true
+---
+
+# WmCarousel
+
+Carousel advanced widget.
+
+## Usage
+
+```jsx
+<WmCarousel
+  name="carousel"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| animation | `CarouselAnimationType` | No | — | — |
+| animationinterval | `number` | No | — | — |
+| controls | `CarouselControlsType` | No | — | — |
+| dataset | `any[]` | No | — | — |
+| nodatamessage | `string` | No | — | — |
+| onChange | `( event: any, widget?: Record<string, any>, newIndex?: number, oldIndex?: num...` | No | — | — |
+| currentslide | `any` | No | — | — |
+| previousslide | `any` | No | — | — |
+| render | `(item: any, index: number) => ReactNode` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-carousel-*`
+
+See foundation-css: `src/tokens/web/components/carousel/carousel.json`

package/skills/components/wm-chart.md

@@ -0,0 +1,104 @@
+---
+component: WmChart
+category: chart
+import: components/chart
+tags: [chart, data-binding, icon, input]
+summary: Chart — chart widget.
+generated: true
+---
+
+# WmChart
+
+Chart — chart widget.
+
+## Usage
+
+```jsx
+<WmChart
+  name="chart"
+  dataset={items}
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| title | `string` | No | — | Chart title displayed in panel header |
+| type | `TChartType` | Yes | — | Chart type |
+| subheading | `string` | No | — | Subheading below title |
+| datavalue | `string` | No | — | Data value binding path |
+| groupby | `string` | No | — | Column(s) to group data by |
+| aggregation | `string` | No | — | Aggregation function: none, sum, average, count, min, max |
+| aggregationcolumn | `string` | No | — | Column to apply aggregation on |
+| orderby | `string` | No | — | Order by expression |
+| xaxisdatakey | `string` | No | — | X-axis data key (comma-separated for multiple) |
+| xaxislabel | `string` | No | — | X-axis label text |
+| xnumberformat | `string` | No | — | X-axis number format |
+| xdigits | `number` | No | — | X-axis decimal digits |
+| xdateformat | `string` | No | — | X-axis date format |
+| xaxislabeldistance | `number` | No | — | Distance of x-axis label from axis |
+| xunits | `string` | No | — | X-axis units suffix |
+| yaxisdatakey | `string` | No | — | Y-axis data key (comma-separated for multiple series) |
+| yaxislabel | `string` | No | — | Y-axis label text |
+| ynumberformat | `string` | No | — | Y-axis number format |
+| ydigits | `number` | No | — | Y-axis decimal digits |
+| yaxislabeldistance | `number` | No | — | Distance of y-axis label from axis |
+| yunits | `string` | No | — | Y-axis units suffix |
+| iconclass | `string` | No | — | Icon class for panel header |
+| nodatamessage | `string` | No | — | Message when no data is available |
+| loadingdatamsg | `string` | No | — | Message shown during data loading |
+| tooltips | `boolean` | No | — | Show tooltips on hover |
+| showlegend | `string` | No | — | Legend position: top, bottom, right, hide |
+| showlabels | `TChartShowValues` | No | — | Label position for pie/donut: hide, inside, outside |
+| showlabelsoutside | `boolean` | No | — | Show labels outside (legacy) |
+| showvalues | `boolean` | No | — | Show values on bars/columns |
+| staggerlabels | `boolean` | No | — | Stagger x-axis labels to avoid overlap |
+| reducexticks | `boolean` | No | — | Reduce number of x-axis ticks |
+| labeltype | `TChartValuesDisplay` | No | — | Label format for pie/donut: key, percent, value, key-value |
+| barspacing | `string` | No | — | Bar spacing: 0.3, 0.5, 0.8 or small, medium, large |
+| donutratio | `string` | No | — | Donut inner radius: small, medium, large |
+| bubblesize | `string` | No | — | Bubble size data key |
+| showxdistance | `boolean` | No | — | Show x-axis tick lines |
+| showydistance | `boolean` | No | — | Show y-axis tick lines |
+| areaviewtype | `StackOffsetType` | No | — | Area chart stack offset type |
+| interpolation | `TChartInterpolation` | No | — | Line interpolation: linear, step, cardinal |
+| centerlabel | `string` | No | — | Center label for donut chart |
+| customcolors | `string[] \| string` | No | — | Custom colors array or comma-separated string |
+| theme | `string` | No | — | Theme name for default colors |
+| offset | `number` | No | — | Chart offset |
+| offsettop | `number` | No | — | Top offset |
+| offsetbottom | `number` | No | — | Bottom offset |
+| offsetright | `number` | No | — | Right offset |
+| offsetleft | `number` | No | — | Left offset |
+| showxaxis | `boolean` | No | — | Show x-axis |
+| showyaxis | `boolean` | No | — | Show y-axis |
+| linethickness | `string` | No | — | Line thickness for line/area charts |
+| highlightpoints | `boolean` | No | — | Highlight data points on line/area charts |
+| formattype | `string` | No | — | Format type for numbers |
+| dataset | `ChartDataset` | No | — | Chart dataset - array of objects |
+| datasource | `unknown` | No | — | Datasource for server-side data |
+| width | `string` | No | — | Chart width |
+| height | `string` | No | — | Chart height |
+| shape | `TBubbleChartShape` | No | — | Bubble shape: circle, cross, diamond, square, triangle-up, triangle-down, random |
+| deferload | `boolean` | No | — | Defer chart loading |
+| xdomain | `string` | No | — | X-axis domain |
+| ydomain | `string` | No | — | Y-axis domain |
+| labelthreshold | `number` | No | — | Minimum percent to show pie label |
+| legendtype | `TChartLegendType` | No | — | Legend style: classic, furious |
+| viewtype | `TChartViewType` | No | — | Bar/Column view: Stacked, Grouped |
+| fontsize | `string` | No | — | Font size |
+| fontunit | `string` | No | — | Font unit (px, em, etc.) |
+| color | `string` | No | — | Text color |
+| fontfamily | `string` | No | — | Font family |
+| fontweight | `string` | No | — | Font weight |
+| fontstyle | `string` | No | — | Font style |
+| textdecoration | `string` | No | — | Text decoration |
+| show | `boolean` | No | — | Whether to show the chart |
+| styles | `CSSProperties` | No | — | Inline styles |
+| onSelect | `( event: MouseEvent \| unknown, widget: ChartProps & BaseProps, selectedItem: ...` | No | — | Callback when chart data point is selected |
+| onTransform | `(event: MouseEvent, widget: ChartProps & BaseProps) => ChartDataset \| void` | No | — | Callback to transform data before rendering |
+| onBeforerender | `(widget: ChartProps & BaseProps, chartInstance: () => void) => void` | No | — | Callback before chart render |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-checkbox.md

@@ -0,0 +1,52 @@
+---
+component: WmCheckbox
+category: input
+import: components/input/default/checkbox
+tags: [input, checkbox, caption, form-field]
+summary: Checkbox input field.
+generated: true
+---
+
+# WmCheckbox
+
+Checkbox input field.
+
+## Usage
+
+```jsx
+<WmCheckbox
+  name="checkbox"
+  caption="My Checkbox"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| caption | `string` | No | — | Label text displayed alongside the checkbox. |
+| checkedvalue | `string \| boolean \| number` | No | — | The value used when the checkbox is checked. |
+| uncheckedvalue | `string \| boolean \| number` | No | — | The value used when the checkbox is unchecked. |
+| datavalue | `string \| boolean \| number` | No | — | The current data value of the checkbox. |
+| disabled | `boolean` | No | — | Whether the checkbox is disabled. |
+| name | `string` | Yes | — | The unique name of the checkbox widget (required). |
+| readonly | `boolean` | No | — | Whether the checkbox is read-only. |
+| required | `boolean` | No | — | Whether the checkbox is required. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to toggle the checkbox. |
+| type | `string` | No | — | The type of the underlying input. |
+| onChange | `( event: ChangeEvent<HTMLInputElement> \| undefined, widget: Record<string, un...` | No | — | Callback invoked when the checkbox value changes. |
+| onClick | `( event?: MouseEvent<HTMLElement> \| ChangeEvent<HTMLInputElement>, widget?: R...` | No | — | Callback invoked when the checkbox is clicked. |
+| onFocus | `( event: FocusEvent<HTMLElement> \| ChangeEvent<HTMLInputElement>, widget?: Re...` | No | — | Callback invoked when the checkbox receives focus. |
+| displayValue | `string` | No | — | Formatted display value. |
+| selectedicon | `string` | No | — | CSS class for the selected state icon. |
+| unselectedicon | `string` | No | — | CSS class for the unselected state icon. |
+| 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-checkbox-*`
+
+See foundation-css: `src/tokens/web/components/checkbox/checkbox.json`

package/skills/components/wm-checkboxset.md

@@ -0,0 +1,75 @@
+---
+component: WmCheckboxset
+category: input
+import: components/input/default/checkboxset
+tags: [input, checkboxset, data-binding, collapsible, dropdown, form-field]
+summary: Checkboxset — dropdown input field bound to a dataset.
+generated: true
+---
+
+# WmCheckboxset
+
+Checkboxset — dropdown input field bound to a dataset.
+
+## Usage
+
+```jsx
+<WmCheckboxset
+  name="checkboxset"
+  dataset={items}
+  displayfield="label"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| layout | `"inline" \| "stacked"` | No | `"stacked"` | Layout of the checkboxes. |
+| itemclass | `string` | No | — | CSS class applied to each item. |
+| listclass | `string` | No | — | CSS class applied to the list container. |
+| showcount | `boolean` | No | — | Whether to show the count of selected items. |
+| disabled | `boolean` | No | — | Whether the checkboxset is disabled. |
+| readonly | `boolean` | No | — | Whether the checkboxset is read-only. |
+| type | `"button" \| "submit" \| "reset"` | No | — | Button type attribute (rarely used). |
+| dataset | `unknown[] \| string \| Record<string, unknown>` | No | — | The data source bound to the checkboxset. |
+| datafield | `string` | No | — | The field from the dataset to use as the data value. |
+| displayfield | `string` | No | — | The field from the dataset to display as the label. |
+| getDisplayExpression | `(data: Record<string, unknown>) => string` | No | — | Custom function to compute the display text for each item. |
+| datavalue | `unknown[] \| unknown` | No | — | The currently selected data values. |
+| usekeys | `boolean` | No | — | Whether to use keys as values. |
+| groupby | `string` | No | — | The field to group items by. |
+| match | `string` | No | — | Match mode for filtering. |
+| orderby | `string` | No | — | Field(s) to order items by. |
+| name | `string` | Yes | — | The unique name of the checkboxset widget (required). |
+| onClick | `( event: ChangeEvent<HTMLInputElement> \| MouseEvent<HTMLElement>, widget?: Re...` | No | — | Callback invoked when a checkbox is clicked. |
+| onChange | `( event: ChangeEvent<HTMLInputElement> \| SyntheticEvent, widget: Record<strin...` | No | — | Callback invoked when the selected values change. |
+| onMouseEnter | `( event: MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: ...` | No | — | Callback invoked when the mouse enters the widget. |
+| onMouseLeave | `( event: MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: ...` | No | — | Callback invoked when the mouse leaves the widget. |
+| required | `boolean` | No | — | Whether a selection is required. |
+| label | `string` | No | — | Label text for the checkboxset. |
+| collapsed | `boolean` | No | — | Whether the group is collapsed. |
+| collapsible | `boolean` | No | — | Whether the checkboxset group is collapsible. |
+| compareby | `string[]` | No | — | Fields used for comparing values. |
+| datasetItems | `DatasetItem[]` | No | — | Transformed dataset items (injected by HOC). |
+| selectedItems | `DatasetItem[]` | No | — | Currently selected items (injected by HOC). |
+| transformFormData | `( containerWidget: Record<string, unknown>, dataset: DatasetItem[], options: ...` | No | — | Function to transform form data (injected by HOC). |
+| groupedData | `GroupedDataset[]` | No | — | Grouped dataset items. |
+| onchange | `(value: unknown) => void` | No | — | Legacy change callback. |
+| onblur | `() => void` | No | — | Legacy blur callback. |
+| validation | `Record<string, unknown>` | No | — | Validation configuration. |
+| isDestroyed | `boolean` | No | — | Whether the widget has been destroyed. |
+| height | `string \| number` | Yes | — | Height of the checkboxset container. |
+| width | `string \| number` | Yes | — | Width of the checkboxset container. |
+| itemsperrow | `string` | No | — | Number of items per row. |
+| tabIndex | `number` | No | — | Tab index for keyboard navigation. |
+| displayValue | `string` | No | — | Formatted display value. |
+| 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-checkboxset-*`
+
+See foundation-css: `src/tokens/web/components/checkboxset/checkboxset.json`

package/skills/components/wm-chips.md

@@ -0,0 +1,78 @@
+---
+component: WmChips
+category: input
+import: components/input/chips
+tags: [input, chips, data-binding, dropdown]
+summary: Chips — dropdown input field bound to a dataset.
+generated: true
+---
+
+# WmChips
+
+Chips — dropdown input field bound to a dataset.
+
+## Usage
+
+```jsx
+<WmChips
+  name="chips"
+  dataset={items}
+  displayfield="label"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| allowonlyselect | `boolean` | No | — | When true, only items from the dataset can be selected (no custom input). |
+| autofocus | `boolean` | No | — | Whether the chips input should be focused on mount. |
+| chipclass | `string` | No | — | CSS class applied to individual chips. |
+| datafield | `string` | No | — | The field from the dataset to use as the data value. |
+| dataset | `unknown[] \| string \| Record<string, unknown>` | No | — | The data source bound to the chips widget. |
+| datavalue | `unknown[] \| string \| Record<string, unknown>` | No | — | The current selected data values. |
+| dateformat | `string` | No | — | Date format applied to date-type fields. |
+| disabled | `boolean` | No | — | Whether the chips input is disabled. |
+| displayexpression | `(data: Record<string, unknown>) => string` | No | — | Custom function to compute the display text for each chip. |
+| displayfield | `string` | No | — | The field from the dataset to display as the chip label. |
+| displayimagesrc | `string` | No | — | The field from the dataset to use as the chip image source. |
+| enablereorder | `boolean` | No | — | Whether chip reordering via drag-and-drop is enabled. |
+| groupby | `string` | No | — | The field to group chips by. |
+| inputposition | `"first" \| "last"` | No | `"last"` | Position of the text input relative to chips. |
+| inputwidth | `"default" \| "full" \| string` | No | `"default"` | Width of the text input. |
+| limit | `number` | No | — | Maximum number of chips that can be selected. |
+| match | `string` | No | — | Match mode for filtering the dataset. |
+| matchmode | `string` | No | — | Strategy for matching search input against dataset items. |
+| maxsize | `number` | No | — | Maximum number of characters allowed in the chip input. |
+| minchars | `number` | No | — | Minimum characters required before showing suggestions. |
+| name | `string` | Yes | — | The unique name of the chips widget (required). |
+| orderby | `string` | No | — | Field(s) to order the dataset by. |
+| placeholder | `string` | No | — | Placeholder text shown in the input. |
+| readonly | `boolean` | No | — | Whether the chips input is read-only. |
+| searchkey | `string` | No | — | The field(s) to search on when filtering. |
+| showsearchicon | `boolean` | No | — | Whether to show a search icon in the input. |
+| type | `"search" \| "autocomplete"` | No | — | Type of input behavior. |
+| debouncetime | `number` | No | — | Debounce time in milliseconds for search input. |
+| datacompletemsg | `string` | No | — | Message shown when all items are selected. |
+| compareby | `string` | No | — | Field used for comparing chip values. |
+| dataoptions | `Record<string, unknown>` | No | — | Additional data options for the chips widget. |
+| datasource | `Record<string, unknown>` | No | — | Data source configuration. |
+| datavaluesource | `Record<string, unknown>` | No | — | Data value source for binding. |
+| onAdd | `(event: Event, widget: Record<string, unknown>, item: ChipItem) => void` | No | — | Callback invoked when a chip is added. |
+| onBeforeadd | `( event: Event, widget: Record<string, unknown>, newItem: DataSetItem ) => bo...` | No | — | Callback invoked before a chip is added. Return `false` to prevent adding. |
+| onBeforeremove | `( event: Event, widget: Record<string, unknown>, item: ChipItem \| ChipItem[] ...` | No | — | Callback invoked before a chip is removed. Return `false` to prevent removal. |
+| onBeforereorder | `( event: Event, widget: Record<string, unknown>, data: ChipItem[], changedIte...` | No | — | Callback invoked before chips are reordered. Return `false` to prevent reordering. |
+| onBeforeservicecall | `( widget: Record<string, unknown>, inputData: Record<string, unknown> ) => void` | No | — | Callback invoked before a service call is made. |
+| onChipclick | `(event: Event, widget: Record<string, unknown>, item: ChipItem) => void` | No | — | Callback invoked when a chip is clicked. |
+| onChipselect | `(event: Event, widget: Record<string, unknown>, item: ChipItem) => void` | No | — | Callback invoked when a chip is selected. |
+| onChange | `( event: Event, widget: Record<string, unknown>, newVal: unknown[], oldVal: u...` | No | — | Callback invoked when the selected chips change. |
+| onRemove | `(event: Event, widget: Record<string, unknown>, item: ChipItem \| ChipItem[]) ...` | No | — | Callback invoked when a chip is removed. |
+| onReorder | `( event: Event, widget: Record<string, unknown>, data: ChipItem[], changedIte...` | No | — | Callback invoked after chips are reordered. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-chips-*`
+
+See foundation-css: `src/tokens/web/components/chips/chips.json`