@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.claude/skills/design-system-extension.md

@@ -201,6 +201,7 @@ DSE components use one of three approaches depending on the component and design
 ### Design System Style Props (use if your DS provides them)
 
 If the chosen design system provides built-in spacing, typography, or layout props, prefer them over plain CSS:
+
 - Use the DS's layout wrapper (e.g., `<Stack>`, `<Flex>`, `<HStack>`) instead of manual flex CSS
 - Use DS typography components (e.g., `<Text>`, `<Heading>`) instead of raw `<span>`/`<div>`
 - Use DS CSS custom properties or tokens for spacing — never hardcode `px` values
@@ -212,11 +213,11 @@ If the chosen design system provides built-in spacing, typography, or layout pro
 
 DSE components fall into three patterns with different DS dependencies:
 
-| Pattern | Examples | DS needed? |
-|---|---|---|
-| **B — Pure display** (no PConnect) | AlertBanner, Banner, Operator, WssQuickCreate | Yes — DS provides alert/card/avatar primitives |
-| **A — PConnect display** | CaseSummaryFields, DetailsFields, FieldValueList | Minimal — CSS-based layout; DS typography optional |
-| **C — Complex display** (PConnect bridge) | FieldGroup, FieldGroupList, Pulse | No — PConnect bridge is DS-agnostic; semantic HTML |
+| Pattern                                   | Examples                                         | DS needed?                                         |
+| ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
+| **B — Pure display** (no PConnect)        | AlertBanner, Banner, Operator, WssQuickCreate    | Yes — DS provides alert/card/avatar primitives     |
+| **A — PConnect display**                  | CaseSummaryFields, DetailsFields, FieldValueList | Minimal — CSS-based layout; DS typography optional |
+| **C — Complex display** (PConnect bridge) | FieldGroup, FieldGroupList, Pulse                | No — PConnect bridge is DS-agnostic; semantic HTML |
 
 The component-specific skill file specifies which pattern applies.
 
@@ -225,6 +226,7 @@ The component-specific skill file specifies which pattern applies.
 **2. If the chosen design system is not listed** — use the component purpose and pattern category above to pick the closest DS primitive.
 
 **3. Discover the API from installed packages** — confirm component names and props from `.d.ts` before writing JSX:
+
 ```bash
 find node_modules/<ds-package> -name "*.d.ts" | xargs grep -l "Alert\|Badge\|Avatar" | head -5
 grep -A 30 "interface.*Props" <path-to-file>
@@ -232,12 +234,12 @@ grep -A 30 "interface.*Props" <path-to-file>
 
 **4. Variant mapping** — always map Pega's variant names to your DS equivalent before passing to DS components:
 
-| Pega variant | Meaning | Typical DS equivalent |
-|---|---|---|
-| `urgent` | Critical / error | `error`, `danger`, `critical` |
-| `warning` | Warning | `warning` |
-| `info` | Informational | `info` |
-| `success` | Success | `success` |
+| Pega variant | Meaning          | Typical DS equivalent         |
+| ------------ | ---------------- | ----------------------------- |
+| `urgent`     | Critical / error | `error`, `danger`, `critical` |
+| `warning`    | Warning          | `warning`                     |
+| `info`       | Informational    | `info`                        |
+| `success`    | Success          | `success`                     |
 
 ---
 

package/templates/react-sdk-reference/.claude/skills/field-components.md

@@ -158,6 +158,7 @@ When filling in the `// [DS RENDER]` section with a specific design system:
 **2. If the chosen design system is not in the mapping table** — use the **UI control type** field in the same skill file (e.g., `"Combobox / typeahead autocomplete input"`) to identify the closest DS primitive.
 
 **3. Discover the API from installed packages** — before writing any render JSX, confirm all prop names from `.d.ts` files. Never rely on training-knowledge of a DS API:
+
 ```bash
 find node_modules/<ds-package> -name "ComponentName.d.ts" | head -3
 grep -A 40 "interface.*Props" <path-to-file>
@@ -165,14 +166,14 @@ grep -A 40 "interface.*Props" <path-to-file>
 
 **4. Prop mapping conventions** — adapt these Pega/SDK props to whatever your DS component calls them:
 
-| Pega/SDK prop | Meaning | Typical DS equivalent |
-|---|---|---|
-| `status === 'error'` | Validation error state | `error`, `status="error"`, `invalid`, `isInvalid` |
-| `validatemessage \|\| helperText` | Helper/error text below field | `helperText`, `description`, `hint`, `extra` |
-| `readOnly` | Non-editable, still visible | `readOnly`, `isReadOnly`, `variant="borderless"` |
-| `testId` | Automation selector | `data-test-id` on the underlying `<input>` element |
-| `required` | Required field marker | `required`, `isRequired` |
-| `hideLabel` | Suppress label display | Pass empty string `''` as label |
+| Pega/SDK prop                     | Meaning                       | Typical DS equivalent                              |
+| --------------------------------- | ----------------------------- | -------------------------------------------------- |
+| `status === 'error'`              | Validation error state        | `error`, `status="error"`, `invalid`, `isInvalid`  |
+| `validatemessage \|\| helperText` | Helper/error text below field | `helperText`, `description`, `hint`, `extra`       |
+| `readOnly`                        | Non-editable, still visible   | `readOnly`, `isReadOnly`, `variant="borderless"`   |
+| `testId`                          | Automation selector           | `data-test-id` on the underlying `<input>` element |
+| `required`                        | Required field marker         | `required`, `isRequired`                           |
+| `hideLabel`                       | Suppress label display        | Pass empty string `''` as label                    |
 
 **5. Use a form layout wrapper** — if the DS provides a wrapper that combines label + input + helper text (e.g., `<Form.Item>` in Ant Design, `<FormControl>` in Chakra UI), use it rather than composing them manually.
 

package/templates/react-sdk-reference/.claude/skills/field-skills/AutoComplete.md

@@ -18,16 +18,16 @@ Renders a typeahead input that shows a dropdown of matching options as the user
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `listType` | `string` | `'associated'` or `'datapage'` |
-| `datasource` | `any` | Datasource (array for associated, string name for datapage) |
-| `columns` | `any[]` | Column config for extracting key/value from datasource records |
-| `parameters` | `any` (optional) | Query parameters for data page calls |
-| `deferDatasource` | `boolean` (optional) | If true, transform `datasourceMetadata` into datapage config |
-| `datasourceMetadata` | `any` (optional) | Metadata for deferred datasource |
-| `onRecordChange` | `any` (optional) | Callback fired on selection change |
-| `additionalProps` | `object` (optional) | Extra props passed through to the autocomplete |
+| Prop                 | Type                 | Description                                                    |
+| -------------------- | -------------------- | -------------------------------------------------------------- |
+| `listType`           | `string`             | `'associated'` or `'datapage'`                                 |
+| `datasource`         | `any`                | Datasource (array for associated, string name for datapage)    |
+| `columns`            | `any[]`              | Column config for extracting key/value from datasource records |
+| `parameters`         | `any` (optional)     | Query parameters for data page calls                           |
+| `deferDatasource`    | `boolean` (optional) | If true, transform `datasourceMetadata` into datapage config   |
+| `datasourceMetadata` | `any` (optional)     | Metadata for deferred datasource                               |
+| `onRecordChange`     | `any` (optional)     | Callback fired on selection change                             |
+| `additionalProps`    | `object` (optional)  | Extra props passed through to the autocomplete                 |
 
 ## Behavioral Contract
 
@@ -64,18 +64,19 @@ Resolve the display label from options and delegate: `return <TextInput {...prop
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Size | Small |
-| Variant | Outlined |
-| Dropdown popup | Opens below input, shows filtered options |
-| Input | Combobox pattern — types to filter, click arrow to open all |
-| Error state | Red border + red helper text |
-| Label | Floating label |
-| Placeholder | From `placeholder` prop |
+| Property       | Value                                                       |
+| -------------- | ----------------------------------------------------------- |
+| Width          | 100%                                                        |
+| Size           | Small                                                       |
+| Variant        | Outlined                                                    |
+| Dropdown popup | Opens below input, shows filtered options                   |
+| Input          | Combobox pattern — types to filter, click arrow to open all |
+| Error state    | Red border + red helper text                                |
+| Label          | Floating label                                              |
+| Placeholder    | From `placeholder` prop                                     |
 
 **Autocomplete behavior:**
+
 - The controlled `value` is the selected option object (or `selectedValue` string).
 - The controlled `inputValue` is the typed text.
 - `getOptionLabel` returns `option.value` (the display label).
@@ -104,9 +105,9 @@ Resolve the display label from options and delegate: `return <TextInput {...prop
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input>` + custom dropdown list with filtering |
-| MUI | `<Autocomplete>` with `renderInput` using `<TextField>` |
-| Ant Design | `<AutoComplete>` or `<Select showSearch>` |
-| Chakra UI | `<Combobox>` (Downshift) or third-party |
+| Design System      | Recommended Component                                   |
+| ------------------ | ------------------------------------------------------- |
+| Default (CSS only) | `<input>` + custom dropdown list with filtering         |
+| MUI                | `<Autocomplete>` with `renderInput` using `<TextField>` |
+| Ant Design         | `<AutoComplete>` or `<Select showSearch>`               |
+| Chakra UI          | `<Combobox>` (Downshift) or third-party                 |

package/templates/react-sdk-reference/.claude/skills/field-skills/CancelAlert.md

@@ -18,26 +18,26 @@ Renders a full-screen modal overlay with a confirmation dialog. Presents two act
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `heading` | `string` | Modal dialog heading text |
-| `content` | `string` | Modal dialog body/description text |
-| `itemKey` | `string` | The container item ID for the case being cancelled (aliased as `containerItemID`) |
-| `hideDelete` | `boolean` | Whether to hide/disable the delete option |
-| `isDataObject` | `boolean` | Whether this is cancelling a data object (not a work item) |
-| `skipReleaseLockRequest` | `any` | Whether to skip lock release when removing container item |
-| `dismiss` | `Function` | Callback to close/dismiss this dialog (called with `true` to indicate confirmed dismiss) |
+| Prop                     | Type       | Description                                                                              |
+| ------------------------ | ---------- | ---------------------------------------------------------------------------------------- |
+| `heading`                | `string`   | Modal dialog heading text                                                                |
+| `content`                | `string`   | Modal dialog body/description text                                                       |
+| `itemKey`                | `string`   | The container item ID for the case being cancelled (aliased as `containerItemID`)        |
+| `hideDelete`             | `boolean`  | Whether to hide/disable the delete option                                                |
+| `isDataObject`           | `boolean`  | Whether this is cancelling a data object (not a work item)                               |
+| `skipReleaseLockRequest` | `any`      | Whether to skip lock release when removing container item                                |
+| `dismiss`                | `Function` | Callback to close/dismiss this dialog (called with `true` to indicate confirmed dismiss) |
 
 ## Behavioral Contract
 
 ### Setup
 
 ```typescript
-const actionsAPI = getPConnect().getActionsApi()
-const containerManagerAPI = getPConnect().getContainerManager()
-const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION)
-const isBulkAction = getPConnect()?.options?.isBulkAction
-const isReverseCoexistence = PCore.getCoexistenceManager().getBroadcastUtils().isReverseCoexistenceCaseLoaded()
+const actionsAPI = getPConnect().getActionsApi();
+const containerManagerAPI = getPConnect().getContainerManager();
+const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+const isBulkAction = getPConnect()?.options?.isBulkAction;
+const isReverseCoexistence = PCore.getCoexistenceManager().getBroadcastUtils().isReverseCoexistenceCaseLoaded();
 ```
 
 ### State
@@ -49,6 +49,7 @@ const isReverseCoexistence = PCore.getCoexistenceManager().getBroadcastUtils().i
 ### "Go back" button (`leftButton`)
 
 Always calls `dismiss()` (no argument = don't confirm). If `isReverseCoexistence`:
+
 ```
 broadCastUtils.setCallBackFunction(null)
 broadCastUtils.setIsDirtyDialogActive(false)
@@ -59,6 +60,7 @@ broadCastUtils.setIsDirtyDialogActive(false)
 Decision tree (evaluated in order):
 
 1. **Reverse coexistence:**
+
    ```
    dismiss(true)
    PCore.getPubSubUtils().publish(REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD)
@@ -72,12 +74,14 @@ Decision tree (evaluated in order):
    - `.finally()`: re-enable delete button, call `dismiss(true)`
 
 3. **Local action** (`isLocalAction`):
+
    ```
    dismiss(true)
    actionsAPI.cancelAssignment(containerItemID, false)
    ```
 
 4. **Bulk action** (`isBulkAction`):
+
    ```
    dismiss(true)
    actionsAPI.cancelBulkAction(containerItemID)
@@ -96,6 +100,7 @@ Decision tree (evaluated in order):
 ### Localization
 
 All visible text is localized via `PCore.getLocaleUtils().getLocaleValue(key, 'ModalContainer')`:
+
 - `'Go back'`
 - `'Discard'`
 - `heading` prop value
@@ -107,6 +112,7 @@ All visible text is localized via `PCore.getLocaleUtils().getLocaleValue(key, 'M
 Derived from `CancelAlert.css`:
 
 ### Full-screen overlay (`.cancel-alert-background`)
+
 ```css
 .cancel-alert-background {
   display: flex;
@@ -124,6 +130,7 @@ Derived from `CancelAlert.css`:
 ```
 
 ### Dialog box (`.cancel-alert-top`)
+
 ```css
 .cancel-alert-top {
   display: table;
@@ -153,10 +160,10 @@ Derived from `CancelAlert.css`:
 
 ### Button styles
 
-| Button | Style | Color |
-|--------|-------|-------|
+| Button  | Style     | Color     |
+| ------- | --------- | --------- |
 | Go back | Contained | Secondary |
-| Discard | Contained | Primary |
+| Discard | Contained | Primary   |
 
 ### Snackbar
 
@@ -165,6 +172,7 @@ Derived from `CancelAlert.css`:
 - Close icon button to dismiss manually
 
 **CSS variables used:**
+
 - `--modal-background-color`: semi-transparent overlay (e.g., `rgba(0,0,0,0.5)`)
 - `--modal-top-color`: dialog background (e.g., white or app background)
 - `--modal-border-color`: dialog border
@@ -195,9 +203,9 @@ Derived from `CancelAlert.css`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                                                       |
+| ------------------ | ------------------------------------------------------------------------------------------- |
 | Default (CSS only) | `<div class="cancel-alert-background">` + `<div class="cancel-alert-top">` + CSS from above |
-| MUI | `<Button>`, `<Grid>`, `<Snackbar>`, `<IconButton>`, fixed overlay `<div>` |
-| Ant Design | `<Modal>` or custom overlay |
-| Chakra UI | `<Modal>` or `<AlertDialog>` |
+| MUI                | `<Button>`, `<Grid>`, `<Snackbar>`, `<IconButton>`, fixed overlay `<div>`                   |
+| Ant Design         | `<Modal>` or custom overlay                                                                 |
+| Chakra UI          | `<Modal>` or `<AlertDialog>`                                                                |

package/templates/react-sdk-reference/.claude/skills/field-skills/Checkbox.md

@@ -19,31 +19,32 @@ Renders one or more checkboxes. Supports three usage modes: (1) a single boolean
 ## Props (component-specific)
 
 > Note: `Checkbox` uses `Omit<PConnFieldProps, 'value'>` with its own `value?: boolean`. Import type as:
+>
 > ```typescript
 > import type { PConnFieldProps } from '@pega/sdk-react';
 > ```
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `value` | `boolean` (optional) | Checked state for single-mode checkbox |
-| `caption` | `string` (optional) | Label shown next to the single checkbox (not the group label) |
-| `trueLabel` | `string` (optional) | Display text when `value` is `true` (used in display modes) |
-| `falseLabel` | `string` (optional) | Display text when `value` is `false` (used in display modes) |
-| `selectionMode` | `string` (optional) | `'multi'` — enables multi-selection mode from a datasource list |
-| `datasource` | `any` (optional) | Options source for multi/card modes |
-| `selectionKey` | `string` (optional) | The property path used as the key in selection list |
-| `selectionList` | `any` (optional) | Property path for the reference list (multi mode) |
-| `primaryField` | `string` | Primary display field for multi/card mode |
-| `readonlyContextList` | `any` | Array of currently selected items (for multi/card read-only display) |
-| `referenceList` | `string` | Reference list property path |
-| `variant` | `string` (optional) | `'card'` — renders options as selectable card grid |
-| `hideFieldLabels` | `boolean` | Hide field labels inside card variant |
-| `additionalProps` | `any` | Extra props passed to card or checkbox |
-| `imagePosition` | `string` | Card image position |
-| `imageSize` | `string` | Card image size |
-| `showImageDescription` | `string` | Whether to show image description |
-| `renderMode` | `string` | `'ReadOnly'` — sets read-only mode alongside `readOnly` prop |
-| `image` | `string` | Image field path for card variant |
+| Prop                   | Type                 | Description                                                          |
+| ---------------------- | -------------------- | -------------------------------------------------------------------- |
+| `value`                | `boolean` (optional) | Checked state for single-mode checkbox                               |
+| `caption`              | `string` (optional)  | Label shown next to the single checkbox (not the group label)        |
+| `trueLabel`            | `string` (optional)  | Display text when `value` is `true` (used in display modes)          |
+| `falseLabel`           | `string` (optional)  | Display text when `value` is `false` (used in display modes)         |
+| `selectionMode`        | `string` (optional)  | `'multi'` — enables multi-selection mode from a datasource list      |
+| `datasource`           | `any` (optional)     | Options source for multi/card modes                                  |
+| `selectionKey`         | `string` (optional)  | The property path used as the key in selection list                  |
+| `selectionList`        | `any` (optional)     | Property path for the reference list (multi mode)                    |
+| `primaryField`         | `string`             | Primary display field for multi/card mode                            |
+| `readonlyContextList`  | `any`                | Array of currently selected items (for multi/card read-only display) |
+| `referenceList`        | `string`             | Reference list property path                                         |
+| `variant`              | `string` (optional)  | `'card'` — renders options as selectable card grid                   |
+| `hideFieldLabels`      | `boolean`            | Hide field labels inside card variant                                |
+| `additionalProps`      | `any`                | Extra props passed to card or checkbox                               |
+| `imagePosition`        | `string`             | Card image position                                                  |
+| `imageSize`            | `string`             | Card image size                                                      |
+| `showImageDescription` | `string`             | Whether to show image description                                    |
+| `renderMode`           | `string`             | `'ReadOnly'` — sets read-only mode alongside `readOnly` prop         |
+| `image`                | `string`             | Image field path for card variant                                    |
 
 ## Behavioral Contract
 
@@ -56,6 +57,7 @@ Renders one or more checkboxes. Supports three usage modes: (1) a single boolean
 ### Variant: Single checkbox (default)
 
 Render a single checkbox with:
+
 - `checked={checked}`
 - `onChange={!readOnly ? handleChange : undefined}`
 - `onBlur={!readOnly ? handleBlur : undefined}`
@@ -67,6 +69,7 @@ Render a single checkbox with:
 ### Variant: Multi-select (`selectionMode === 'multi'`)
 
 Render a list of checkboxes from `datasource.source`:
+
 - Each option: `key` from `selectionKey` extraction, `text`/`value` as label.
 - `checked` per option: `selectedvalues.some(data => data[dataField] === element.key)` where `dataField = selectionKey.split('.')[1]`.
 - **On change per checkbox:**
@@ -78,6 +81,7 @@ Render a list of checkboxes from `datasource.source`:
 ### Variant: Card (`variant === 'card'`)
 
 Render a heading (`<h4>`) + CSS Grid + `SelectableCard` component:
+
 - Grid: `repeat(auto-fit, minmax(min(100%, 40ch), 1fr))`, `gridAutoRows: '1fr'`, `gap: '0.5rem'`.
 - `SelectableCard` props:
   - `type='checkbox'`
@@ -94,6 +98,7 @@ Render a heading (`<h4>`) + CSS Grid + `SelectableCard` component:
 ## Display Mode Rendering
 
 Display mode uses `caption` (not `label`) and shows true/false label:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />`
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />`
 
@@ -106,29 +111,41 @@ Multi/Card mode: `readOnlyMode` flag prevents `insertInstruction`/`deleteInstruc
 
 ### Standard / Multi-select
 
-| Property | Value |
-|----------|-------|
-| Checkbox size | Default (24px) |
-| Label placement | End (right of checkbox) |
-| Group label | `<legend>` above group, hidden if `hideLabel` |
-| Layout | Single: single row. Multi: vertical column |
-| Helper text | Below group |
-| Error state | Red text/border on helper |
-| Disabled/readOnly | Greyed out, pointer-events none |
+| Property          | Value                                         |
+| ----------------- | --------------------------------------------- |
+| Checkbox size     | Default (24px)                                |
+| Label placement   | End (right of checkbox)                       |
+| Group label       | `<legend>` above group, hidden if `hideLabel` |
+| Layout            | Single: single row. Multi: vertical column    |
+| Helper text       | Below group                                   |
+| Error state       | Red text/border on helper                     |
+| Disabled/readOnly | Greyed out, pointer-events none               |
 
 **CSS-only:**
+
 ```css
-.checkbox-group { display: flex; flex-direction: column; gap: 4px; }
-.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
-input[type="checkbox"]:disabled { opacity: 0.38; }
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+input[type='checkbox']:disabled {
+  opacity: 0.38;
+}
 ```
 
 ### Card Variant
 
-| Property | Value |
-|----------|-------|
-| Layout | CSS Grid `repeat(auto-fit, minmax(min(100%, 40ch), 1fr))`, row height equal (`1fr`), gap `0.5rem` |
-| Heading | `<h4>` with `marginTop: 0, marginBottom: 0` |
+| Property | Value                                                                                             |
+| -------- | ------------------------------------------------------------------------------------------------- |
+| Layout   | CSS Grid `repeat(auto-fit, minmax(min(100%, 40ch), 1fr))`, row height equal (`1fr`), gap `0.5rem` |
+| Heading  | `<h4>` with `marginTop: 0, marginBottom: 0`                                                       |
 
 ## Edge Cases & Special Logic
 
@@ -150,9 +167,9 @@ input[type="checkbox"]:disabled { opacity: 0.38; }
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="checkbox">` with `<label>` |
-| MUI | `<Checkbox>` in `<FormControlLabel>`, `<FormGroup>` |
-| Ant Design | `<Checkbox>` / `<Checkbox.Group>` |
-| Chakra UI | `<Checkbox>` / `<CheckboxGroup>` |
+| Design System      | Recommended Component                               |
+| ------------------ | --------------------------------------------------- |
+| Default (CSS only) | `<input type="checkbox">` with `<label>`            |
+| MUI                | `<Checkbox>` in `<FormControlLabel>`, `<FormGroup>` |
+| Ant Design         | `<Checkbox>` / `<Checkbox.Group>`                   |
+| Chakra UI          | `<Checkbox>` / `<CheckboxGroup>`                    |

package/templates/react-sdk-reference/.claude/skills/field-skills/Currency.md

@@ -18,12 +18,13 @@ Renders a numeric input formatted as a currency value. Displays the correct curr
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `currencyISOCode` | `string` (optional) | `'USD'` | ISO 4217 currency code (e.g., `'USD'`, `'EUR'`, `'GBP'`) |
-| `allowDecimals` | `boolean` | — | Whether to allow decimal input. If `false`, `decimalScale=0`. If `true`, fixed 2 decimal places shown. |
+| Prop              | Type                | Default | Description                                                                                            |
+| ----------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `currencyISOCode` | `string` (optional) | `'USD'` | ISO 4217 currency code (e.g., `'USD'`, `'EUR'`, `'GBP'`)                                               |
+| `allowDecimals`   | `boolean`           | —       | Whether to allow decimal input. If `false`, `decimalScale=0`. If `true`, fixed 2 decimal places shown. |
 
 All other props from `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -49,6 +50,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 ## Display Mode Rendering
 
 Format the value before display using a currency formatter with `currencyISOCode`:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} />` where `formattedValue = format(value, 'currency', currencyOptions)`.
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />`.
 
@@ -60,16 +62,16 @@ Keep the numeric format input but set `readOnly: true` on the input element. Swi
 
 ## Visual Specifications
 
-| Property | Standard (editable) | Read-only |
-|----------|---------------------|-----------|
-| Width | 100% | 100% |
-| Size | Small | Small |
-| Variant | Outlined | Standard (flat) |
-| Prefix | Currency symbol (e.g., `$`) | Currency symbol |
-| Alignment | Left-aligned text | Left-aligned |
-| Decimal places | 2 (when `allowDecimals`) | 2 |
-| Error state | Red border + red helper text | — |
-| Placeholder | From `placeholder` prop | — |
+| Property       | Standard (editable)          | Read-only       |
+| -------------- | ---------------------------- | --------------- |
+| Width          | 100%                         | 100%            |
+| Size           | Small                        | Small           |
+| Variant        | Outlined                     | Standard (flat) |
+| Prefix         | Currency symbol (e.g., `$`)  | Currency symbol |
+| Alignment      | Left-aligned text            | Left-aligned    |
+| Decimal places | 2 (when `allowDecimals`)     | 2               |
+| Error state    | Red border + red helper text | —               |
+| Placeholder    | From `placeholder` prop      | —               |
 
 ## Edge Cases & Special Logic
 
@@ -89,6 +91,7 @@ Keep the numeric format input but set `readOnly: true` on the input element. Swi
 - `getComponentFromRegistry('FieldValueList')` for display modes.
 
 **For CSS-only / design-system-agnostic implementations:**
+
 - The numeric format library handles the input masking. Use any numeric format library that supports prefix, decimal separator, and thousands separator configuration.
 - Alternatively, implement manually: on change, strip non-numeric chars, insert separators, prepend symbol.
 
@@ -98,9 +101,9 @@ Keep the numeric format input but set `readOnly: true` on the input element. Swi
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="text">` + custom numeric formatting logic |
-| MUI | `NumericFormat` (from `react-number-format`) with `customInput={TextField}` |
-| Ant Design | `<InputNumber prefix="$" precision={2} />` |
-| Chakra UI | `<NumberInput>` + custom formatting |
+| Design System      | Recommended Component                                                       |
+| ------------------ | --------------------------------------------------------------------------- |
+| Default (CSS only) | `<input type="text">` + custom numeric formatting logic                     |
+| MUI                | `NumericFormat` (from `react-number-format`) with `customInput={TextField}` |
+| Ant Design         | `<InputNumber prefix="$" precision={2} />`                                  |
+| Chakra UI          | `<NumberInput>` + custom formatting                                         |

package/templates/react-sdk-reference/.claude/skills/field-skills/Date.md

@@ -19,6 +19,7 @@ Renders a date picker input. Stores dates as `YYYY-MM-DD` strings. Displays date
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -32,7 +33,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 3. **Date format:** Get locale-aware format string via `getDateFormatInfo()`:
    - Returns `dateFormatString` (display format, e.g., `'MM/DD/YYYY'`), `dateFormatStringLC` (lowercase for placeholder, e.g., `'mm/dd/yyyy'`), `dateFormatMask`.
    - Start from `dateFormatInfoDefault` and override with locale-specific values.
-4. **On change (valid date selected):** 
+4. **On change (valid date selected):**
    - Validate the date is valid (e.g., `date.isValid()`).
    - Format to `YYYY-MM-DD` string: `${year}-${(month+1).padStart(2,'0')}-${day.padStart(2,'0')}`.
    - Commit immediately via `handleEvent(actions, 'changeNblur', propName, formattedDate)`.
@@ -44,6 +45,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 ## Display Mode Rendering
 
 Format the value before display using `format(value, 'date', { format: dateFormatInfo.dateFormatString })`:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedDate} />`.
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />`.
 - Both modes compute `formattedDate` from the raw `props.value` (not local state).
@@ -54,16 +56,16 @@ Delegate to `TextInput`: `return <TextInput {...props} />`. The raw `YYYY-MM-DD`
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | Auto (date picker natural width) |
-| Size | Small |
-| Variant | Outlined |
-| Placeholder | Lowercase format string (e.g., `mm/dd/yyyy`) |
-| Calendar popup | Opens below the input |
-| Error state | Red border + red helper text |
-| Required indicator | `*` on label |
-| Format display | Locale-aware (e.g., `MM/DD/YYYY`, `DD/MM/YYYY`) |
+| Property           | Value                                           |
+| ------------------ | ----------------------------------------------- |
+| Width              | Auto (date picker natural width)                |
+| Size               | Small                                           |
+| Variant            | Outlined                                        |
+| Placeholder        | Lowercase format string (e.g., `mm/dd/yyyy`)    |
+| Calendar popup     | Opens below the input                           |
+| Error state        | Red border + red helper text                    |
+| Required indicator | `*` on label                                    |
+| Format display     | Locale-aware (e.g., `MM/DD/YYYY`, `DD/MM/YYYY`) |
 
 **CSS-only notes:** For a CSS-only date input, use `<input type="date">` — note that the display format is browser-controlled. A custom date picker component is needed for locale-aware format strings.
 
@@ -91,9 +93,9 @@ Delegate to `TextInput`: `return <TextInput {...props} />`. The raw `YYYY-MM-DD`
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="date">` (browser native, limited locale control) |
-| MUI | `<DatePicker />` from `@mui/x-date-pickers` with `dayjs` adapter |
-| Ant Design | `<DatePicker format="MM/DD/YYYY" />` |
-| Chakra UI | Third-party date picker or `<input type="date">` |
+| Design System      | Recommended Component                                            |
+| ------------------ | ---------------------------------------------------------------- |
+| Default (CSS only) | `<input type="date">` (browser native, limited locale control)   |
+| MUI                | `<DatePicker />` from `@mui/x-date-pickers` with `dayjs` adapter |
+| Ant Design         | `<DatePicker format="MM/DD/YYYY" />`                             |
+| Chakra UI          | Third-party date picker or `<input type="date">`                 |