@cratis/components 3.6.1 → 4.0.0

package/dist/esm/CommandForm/fields/ChipsField.js

@@ -1,25 +1,56 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { asCommandFormField } from '@cratis/arc.react/commands';
-import { InputTags } from 'primereact/inputtags';
+import { useFieldAccessibility } from './fieldAccessibility.js';
+import { appendChipCandidates } from './chipValues.js';
 
-/**
- * A tag/chip input field bound to a `string[]` property on a Cratis Arc
- * command. Each entered token becomes a chip; `separator` splits pasted
- * input into multiple chips at once. See {@link InputTextField} for the
- * full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <ChipsField value={c => c.tags} title="Tags" separator="," />
- * ```
- */
-const ChipsField = asCommandFormField((props) => (jsx("div", { className: props.className ? `w-full ${props.className}` : 'w-full', onBlur: props.onBlur, children: jsxs(InputTags.Root, { value: props.value, onValueChange: (e) => props.onChange(e.value ?? []), invalid: props.invalid, max: props.max, addOnBlur: props.addOnBlur, allowDuplicate: props.allowDuplicate, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: [jsx(InputTags.Items, { children: ({ item, index, remove, itemProps }) => (jsxs("span", { ...itemProps, className: "cratis-inputtags-item", children: [jsx("span", { children: item }), jsx("button", { type: "button", "aria-label": props.removeAriaLabel ?? 'Remove', onClick: remove, children: jsx("i", { className: "pi pi-times-circle" }) })] }, index)) }), jsx(InputTags.Control, { children: ({ controlProps }) => jsx("input", { ...controlProps, placeholder: props.placeholder }) })] }) })), {
+const ChipsControl = (props) => {
+    const [draft, setDraft] = useState('');
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'],
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
+    const commit = () => {
+        const candidates = (props.separator ? draft.split(props.separator) : [draft])
+            .map((value) => value.trim())
+            .filter(Boolean);
+        if (candidates.length === 0)
+            return;
+        props.onChange(appendChipCandidates(props.value, candidates, props.max, props.allowDuplicate ?? false));
+        setDraft('');
+    };
+    return (jsxs("div", { ...props.pt?.root, className: [
+            'cratis-chips-field',
+            'cratis:w-full',
+            props.pt?.root?.className,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(' '), onBlur: (event) => {
+            props.onBlur?.();
+            if (props.addOnBlur && !event.currentTarget.contains(event.relatedTarget))
+                commit();
+        }, "data-cratis-part": 'root', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-readonly": props.pt?.input?.readOnly || undefined, children: [props.value.map((item, index) => (jsxs("span", { ...props.pt?.item, className: ['cratis-chips-field__item', props.pt?.item?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'item', "data-selected": true, children: [jsx("span", { children: item }), jsx("button", { ...props.pt?.remove, type: 'button', className: [
+                            'cratis-chips-field__remove',
+                            props.pt?.remove?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' '), "data-cratis-part": 'remove', "data-disabled": props.pt?.remove?.disabled || undefined, "data-selected": true, "aria-label": typeof props.removeAriaLabel === 'function'
+                            ? props.removeAriaLabel(item, index)
+                            : (props.removeAriaLabel ?? `Remove ${item}`), onClick: () => props.onChange(props.value.filter((_, itemIndex) => itemIndex !== index)), children: "\u00D7" })] }, `${item}-${index}`))), jsx("input", { ...props.pt?.input, id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        commit();
+                    }
+                }, placeholder: props.placeholder, "aria-invalid": props.invalid || undefined, "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-readonly": props.pt?.input?.readOnly || undefined, className: ['cratis-chips-field__input', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'input' }), accessibility.hiddenError] }));
+};
+const ChipsField = asCommandFormField(ChipsControl, {
     defaultValue: [],
-    extractValue: (e) => {
-        if (!Array.isArray(e)) {
-            return [];
-        }
-        return e.filter((item) => typeof item === 'string');
-    }
 });
 
 export { ChipsField };

package/dist/esm/CommandForm/fields/ChipsField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsField.js","sources":["../../../../CommandForm/fields/ChipsField.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;AAgDA;;;;;;;;;AASG;MACU,UAAU,GAAG,kBAAkB,CACxC,CAAC,KAAK,MAIFA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,EAAE,GAAG,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,QAAA,EAC1FC,KAAC,SAAS,CAAC,IAAI,EAAA,EACX,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAgC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,EAClF,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,aACxBD,GAAA,CAAC,SAAS,CAAC,KAAK,EAAA,EAAA,QAAA,EACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAChCC,IAAA,CAAA,MAAA,EAAA,EAAA,GAAsB,SAAS,EAAE,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAC9DD,wBAAO,IAAI,EAAA,CAAQ,EACnBA,GAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAa,KAAK,CAAC,eAAe,IAAI,QAAQ,EAAE,OAAO,EAAE,MAAM,YAChFA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,EAAA,CAAG,GAC/B,CAAA,EAAA,EAJF,KAAK,CAKT,CACV,EAAA,CACa,EAClBA,GAAA,CAAC,SAAS,CAAC,OAAO,EAAA,EAAA,QAAA,EACb,CAAC,EAAE,YAAY,EAAE,KAAKA,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,YAAY,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,GAAI,EAAA,CAClE,CAAA,EAAA,CACP,EAAA,CACf,CACT,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAI;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACnB,YAAA,OAAO,EAAE;QACb;AAEA,QAAA,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAqB,OAAO,IAAI,KAAK,QAAQ,CAAC;IACvE;AACH,CAAA;;"}
+{"version":3,"file":"ChipsField.js","sources":["../../../../CommandForm/fields/ChipsField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/CommandForm/fields/ColorPickerField.d.ts

@@ -1,14 +1,23 @@
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-import type { InputColorRootProps } from '@primereact/types/primitive/inputcolor';
-import React from 'react';
-interface ColorPickerFieldComponentProps extends WrappedFieldProps<string> {
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/** Stable part attributes for {@link ColorPickerField}. */
+export interface ColorPickerParts {
+    /** Field wrapper. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Native color input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Selected hexadecimal value output. */
+    value?: HTMLAttributes<HTMLOutputElement>;
+}
+interface ColorPickerFieldComponentProps extends WrappedFieldProps<string>, FieldAccessibilityProps {
     inline?: boolean;
     defaultColor?: string;
     className?: string;
-    pt?: InputColorRootProps['pt'];
-    ptOptions?: InputColorRootProps['ptOptions'];
+    pt?: ColorPickerParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
+/** A native color picker bound to a bare six-digit hex string on an Arc command. */
 export declare const ColorPickerField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<ColorPickerFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=ColorPickerField.d.ts.map

package/dist/esm/CommandForm/fields/ColorPickerField.js

@@ -1,39 +1,27 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { asCommandFormField } from '@cratis/arc.react/commands';
-import { InputColor } from 'primereact/inputcolor';
-import { parseColor } from '@primereact/headless/inputcolor';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/** Parse a bare hex string (no leading `#`) into a color, falling back on invalid input. */
-const toColor = (hex, fallback) => {
-    const candidate = typeof hex === 'string' && hex.length > 0 ? hex : fallback;
-    try {
-        return parseColor(`#${candidate}`);
-    }
-    catch {
-        return parseColor(`#${fallback}`);
-    }
-};
-/**
- * A color picker field bound to a `string` property on a Cratis Arc command,
- * holding a hex color value without the leading `#` (e.g. `"60a5fa"`). Set
- * `inline` to render the picker inline rather than as a popover. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <ColorPickerField value={c => c.accentColor} title="Accent" inline />
- * ```
- */
+const normalizeHex = (value, fallback) => /^[0-9a-f]{6}$/i.test(value) ? value : fallback;
 const ColorPickerField = asCommandFormField((props) => {
-    const defaultColor = props.defaultColor ?? '000000';
-    // InputColor exposes no `invalid` prop, so surface the invalid state as a class on the
-    // wrapper — the same `p-invalid` token the other fields emit; it no-ops when unstyled.
-    const invalidClass = props.invalid ? 'p-invalid' : undefined;
-    const className = [invalidClass, props.className].filter(Boolean).join(' ') || undefined;
-    return (jsx("div", { className: className, onBlur: props.onBlur, children: jsxs(InputColor.Root, { value: toColor(props.value, defaultColor), onValueChange: (e) => props.onChange(e.value.toString('hex').replace('#', '')), pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: [jsxs(InputColor.Area, { children: [jsx(InputColor.AreaBackground, {}), jsx(InputColor.AreaHandle, {})] }), jsxs(InputColor.Slider, { children: [jsx(InputColor.SliderTrack, {}), jsx(InputColor.SliderHandle, {})] }), jsx(InputColor.Swatch, { children: jsx(InputColor.SwatchBackground, {}) })] }) }));
-}, {
-    defaultValue: '',
-    extractValue: (e) => typeof e === 'string' ? e : ''
-});
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'],
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
+    const value = normalizeHex(props.value, normalizeHex(props.defaultColor ?? '000000', '000000'));
+    return (jsxs("div", { ...props.pt?.root, className: [
+            'cratis-color-field',
+            props.pt?.root?.className,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(' '), onBlur: props.onBlur, "data-cratis-part": 'root', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-inline": props.inline || undefined, children: [jsx("input", { ...props.pt?.input, id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, type: 'color', value: `#${value}`, onChange: (event) => props.onChange(event.currentTarget.value.replace('#', '')), "aria-invalid": props.invalid || undefined, "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, className: ['cratis-color-field__input', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'input' }), jsxs("output", { ...props.pt?.value, className: ['cratis-color-field__value', props.pt?.value?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'value', "data-invalid": props.invalid || undefined, children: ["#", value] }), accessibility.hiddenError] }));
+}, { defaultValue: '' });
 
 export { ColorPickerField };
 //# sourceMappingURL=ColorPickerField.js.map

package/dist/esm/CommandForm/fields/ColorPickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerField.js","sources":["../../../../CommandForm/fields/ColorPickerField.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AASA;AACA,MAAM,OAAO,GAAG,CAAC,GAAW,EAAE,QAAgB,KAAI;IAC9C,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,QAAQ;AAC5E,IAAA,IAAI;AACA,QAAA,OAAO,UAAU,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;IACtC;AAAE,IAAA,MAAM;AACJ,QAAA,OAAO,UAAU,CAAC,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAE,CAAC;IACrC;AACJ,CAAC;AA8BD;;;;;;;;;AASG;MACU,gBAAgB,GAAG,kBAAkB,CAC9C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,QAAQ;;;AAGnD,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,GAAG,WAAW,GAAG,SAAS;IAC5D,MAAM,SAAS,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS;AAExF,IAAA,QAGIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,QAAA,EAC3CC,IAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EACZ,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,EACzC,aAAa,EAAE,CAAC,CAA4B,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EACzG,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,QAAA,EAAA,CACxBA,IAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACZD,GAAA,CAAC,UAAU,CAAC,cAAc,EAAA,EAAA,CAAG,EAC7BA,GAAA,CAAC,UAAU,CAAC,UAAU,EAAA,EAAA,CAAG,CAAA,EAAA,CACX,EAClBC,IAAA,CAAC,UAAU,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACdD,GAAA,CAAC,UAAU,CAAC,WAAW,EAAA,EAAA,CAAG,EAC1BA,GAAA,CAAC,UAAU,CAAC,YAAY,EAAA,EAAA,CAAG,CAAA,EAAA,CACX,EACpBA,GAAA,CAAC,UAAU,CAAC,MAAM,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,UAAU,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAAA,CACf,CAAA,EAAA,CACN,EAAA,CAChB;AAEd,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG;AAC7D,CAAA;;"}
+{"version":3,"file":"ColorPickerField.js","sources":["../../../../CommandForm/fields/ColorPickerField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAoCA,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,QAAgB,KACjD,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,QAAQ;MAGtC,gBAAgB,GAAG,kBAAkB,CAC9C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,KAAK,EAAE;AAC/C,QAAA,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QACvB,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,YAAY,CAAC;QAC1C,eAAe,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,kBAAkB,CAAC;AACzD,KAAA,CAAC;AACF,IAAA,MAAM,KAAK,GAAG,YAAY,CACtB,KAAK,CAAC,KAAK,EACX,YAAY,CAAC,KAAK,CAAC,YAAY,IAAI,QAAQ,EAAE,QAAQ,CAAC,CACzD;IACD,QACIA,iBACQ,KAAK,CAAC,EAAE,EAAE,IAAI,EAClB,SAAS,EAAE;YACP,oBAAoB;AACpB,YAAA,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;AACzB,YAAA,KAAK,CAAC,SAAS;AAClB;aACI,MAAM,CAAC,OAAO;AACd,aAAA,IAAI,CAAC,GAAG,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,kBAAA,EACH,MAAM,EAAA,eAAA,EACR,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,SAAS,EAAA,cAAA,EACvC,KAAK,CAAC,OAAO,IAAI,SAAS,EAAA,aAAA,EAC3B,KAAK,CAAC,MAAM,IAAI,SAAS,EAAA,QAAA,EAAA,CAEtCC,GAAA,CAAA,OAAA,EAAA,EAAA,GACQ,KAAK,CAAC,EAAE,EAAE,KAAK,EACnB,EAAE,EAAE,aAAa,CAAC,SAAS,EAAA,YAAA,EACf,aAAa,CAAC,SAAS,EAAA,kBAAA,EACjB,aAAa,CAAC,eAAe,EAC/C,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,EAClB,QAAQ,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAA,cAAA,EACjE,KAAK,CAAC,OAAO,IAAI,SAAS,EAAA,eAAA,EACzB,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,SAAS,EAAA,cAAA,EACvC,KAAK,CAAC,OAAO,IAAI,SAAS,EACxC,SAAS,EAAE,CAAC,2BAA2B,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS;qBAC9D,MAAM,CAAC,OAAO;qBACd,IAAI,CAAC,GAAG,CAAC,EAAA,kBAAA,EACG,OAAO,EAAA,CAC1B,EACFD,IAAA,CAAA,QAAA,EAAA,EAAA,GACQ,KAAK,CAAC,EAAE,EAAE,KAAK,EACnB,SAAS,EAAE,CAAC,2BAA2B,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS;qBAC9D,MAAM,CAAC,OAAO;qBACd,IAAI,CAAC,GAAG,CAAC,EAAA,kBAAA,EACG,OAAO,EAAA,cAAA,EACV,KAAK,CAAC,OAAO,IAAI,SAAS,EAAA,QAAA,EAAA,CAAA,GAAA,EAEtC,KAAK,IACF,EACR,aAAa,CAAC,WAAW,CAAA,EAAA,CACxB;AAEd,CAAC,EACD,EAAE,YAAY,EAAE,EAAE,EAAE;;"}

package/dist/esm/CommandForm/fields/DropdownField.d.ts

@@ -1,18 +1,48 @@
-import { type DropdownProps } from '../../Dropdown/Dropdown';
+import { type DropdownProps } from '../../Dropdown/Dropdown.js';
 import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface DropdownFieldComponentProps extends WrappedFieldProps<string | number> {
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/**
+ * Component-level props for {@link DropdownField}.
+ */
+interface DropdownFieldComponentProps extends WrappedFieldProps<string | number>, FieldAccessibilityProps {
+    /** Source array of objects to populate the dropdown options. */
     options: Array<{
         [key: string]: unknown;
     }>;
+    /** Property name on each option object used as the underlying value. */
     optionValue: string;
+    /** Property name on each option object used as the visible label. */
     optionLabel: string;
+    /** Placeholder text shown when no option is selected. */
     placeholder?: string;
+    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
+    /** Cratis-owned per-part attributes applied to the underlying Dropdown. */
     pt?: DropdownProps['pt'];
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: DropdownProps['ptOptions'];
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
+/**
+ * A single-select dropdown field bound to a `string` or `number` property
+ * on a Cratis Arc command. The `options` array supplies the choices;
+ * `optionValue` and `optionLabel` declare which property on each option
+ * holds the bound value and which one holds the visible label. See
+ * {@link InputTextField} for the full `value={c => c.prop}` binding model.
+ *
+ * ```tsx
+ * <DropdownField value={c => c.country}
+ *                options={countries}
+ *                optionValue="code"
+ *                optionLabel="name"
+ *                title="Country" />
+ * ```
+ */
 export declare const DropdownField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<DropdownFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=DropdownField.d.ts.map

package/dist/esm/CommandForm/fields/DropdownField.js

@@ -1,25 +1,20 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Dropdown } from '../../Dropdown/Dropdown.js';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A single-select dropdown field bound to a `string` or `number` property
- * on a Cratis Arc command. The `options` array supplies the choices;
- * `optionValue` and `optionLabel` declare which property on each option
- * holds the bound value and which one holds the visible label. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <DropdownField value={c => c.country}
- *                options={countries}
- *                optionValue="code"
- *                optionLabel="name"
- *                title="Country" />
- * ```
- */
-const DropdownField = asCommandFormField((props) => (jsx(Dropdown, { value: props.value, onChange: (e) => props.onChange(e.value), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, invalid: props.invalid, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
+const DropdownField = asCommandFormField((props) => {
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'],
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
+    return (jsxs(Fragment, { children: [jsx(Dropdown, { id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, value: props.value, onChange: (value) => props.onChange(value), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, invalid: props.invalid, className: props.className
+                    ? `cratis:w-full ${props.className}`
+                    : 'cratis:w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }), accessibility.hiddenError] }));
+}, {
     defaultValue: '',
-    extractValue: (e) => e
+    extractValue: (e) => e,
 });
 
 export { DropdownField };

package/dist/esm/CommandForm/fields/DropdownField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAoCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,IAAC,QAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;"}
+{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;MA4Da,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,KAAK,EAAE;AAC/C,QAAA,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QACvB,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,YAAY,CAAC;QAC1C,eAAe,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,kBAAkB,CAAC;AACzD,KAAA,CAAC;AACF,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAA,CAAC,QAAQ,EAAA,EACL,EAAE,EAAE,aAAa,CAAC,SAAS,gBACf,aAAa,CAAC,SAAS,EAAA,kBAAA,EACjB,aAAa,CAAC,eAAe,EAC/C,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC1C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EACL,KAAK,CAAC;AACF,sBAAE,CAAA,cAAA,EAAiB,KAAK,CAAC,SAAS,CAAA;sBAChC,eAAe,EAEzB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,EACD,aAAa,CAAC,WAAW,CAAA,EAAA,CAC3B;AAEX,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK,CAAoB;AACrD,CAAA;;"}

package/dist/esm/CommandForm/fields/InputTextField.d.ts

@@ -1,14 +1,19 @@
-import type { InputTextProps } from '@primereact/types/primitive/inputtext';
-import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface InputTextComponentProps extends WrappedFieldProps<string> {
+import type { InputHTMLAttributes } from 'react';
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/** Stable part attributes for {@link InputTextField}. */
+export interface InputTextParts {
+    /** Native input element. */
+    root?: InputHTMLAttributes<HTMLInputElement>;
+}
+interface InputTextComponentProps extends WrappedFieldProps<string>, FieldAccessibilityProps {
     type?: 'text' | 'email' | 'password' | 'color' | 'date' | 'datetime-local' | 'time' | 'url' | 'tel' | 'search';
     placeholder?: string;
     className?: string;
-    pt?: InputTextProps['pt'];
-    ptOptions?: InputTextProps['ptOptions'];
+    pt?: InputTextParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
+/** A single-line text field bound to a string property on an Arc command. */
 export declare const InputTextField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<InputTextComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=InputTextField.d.ts.map

package/dist/esm/CommandForm/fields/InputTextField.js

@@ -1,51 +1,22 @@
-import { jsx } from 'react/jsx-runtime';
-import { InputText } from 'primereact/inputtext';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A single-line text field for use inside a Cratis Arc `CommandForm` (or any
- * of its dialog-hosted variants like {@link CommandDialog},
- * {@link StepperCommandDialog}, {@link CommandStepper}).
- *
- * ## How it binds to the command
- *
- * The `value` prop is an accessor function — `value={c => c.name}` — where
- * `c` is the typed command instance. The `asCommandFormField` HOC from
- * `@cratis/arc.react/commands` reads the accessor, subscribes the field to
- * that property on the form context, and threads validation state back to
- * the input. You never read or write the command instance directly; the
- * field handles it.
- *
- * The accessor pattern means the *binding* is fully typechecked end-to-end
- * — if the command's `name` property is a `string`, the field's value type
- * is inferred as `string` and TypeScript catches any mismatch.
- *
- * ## What's unique vs. PrimeReact's `InputText`
- *
- * - Bound to a single command property, no manual `onChange`/`setState`.
- * - Validation state (`invalid` border) is driven automatically from the
- *   `CommandResult.validationResults` returned by the backend's `Handle()`.
- * - All HTML input `type`s PrimeReact supports (`text`, `email`,
- *   `password`, `url`, `tel`, `date`, `datetime-local`, `time`, `color`,
- *   `search`) work the same way.
- *
- * ## Styling
- *
- * Forwards `pt` / `ptOptions` / `unstyled` / `className` to the underlying
- * `InputText`. The default `w-full` class is preserved when consumer
- * `className` is supplied. See [pass-through cheat sheet](../../../Documentation/Styling/pass-through.md).
- *
- * ```tsx
- * <InputTextField value={c => c.email}
- *                 type="email"
- *                 title="Email"
- *                 placeholder="you@example.com" />
- * ```
- */
-const InputTextField = asCommandFormField((props) => (jsx(InputText, { type: props.type || 'text', value: props.value, onChange: props.onChange, onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
-    defaultValue: '',
-    extractValue: (e) => e.target.value
-});
+const InputTextField = asCommandFormField((props) => {
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.root?.id,
+        ariaLabel: props.pt?.root?.['aria-label'],
+        ariaDescribedBy: props.pt?.root?.['aria-describedby'],
+    });
+    return (jsxs(Fragment, { children: [jsx("input", { ...props.pt?.root, id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, type: props.type ?? 'text', value: props.value, onChange: (event) => props.onChange(event.currentTarget.value), onBlur: props.onBlur, placeholder: props.placeholder, "aria-invalid": props.invalid || undefined, "data-disabled": props.pt?.root?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-readonly": props.pt?.root?.readOnly || undefined, "data-cratis-part": 'input', className: [
+                    'cratis-field-input',
+                    'cratis:w-full',
+                    props.pt?.root?.className,
+                    props.className,
+                ]
+                    .filter(Boolean)
+                    .join(' ') }), accessibility.hiddenError] }));
+}, { defaultValue: '' });
 
 export { InputTextField };
 //# sourceMappingURL=InputTextField.js.map

package/dist/esm/CommandForm/fields/InputTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputTextField.js","sources":["../../../../CommandForm/fields/InputTextField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;AACI,MAAM,cAAc,GAAG,kBAAkB,CAC5C,CAAC,KAAK,MACFA,IAAC,SAAS,EAAA,EACN,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,EAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAsC,KAAK,CAAC,CAAC,MAAM,CAAC;AACtE,CAAA;;"}
+{"version":3,"file":"InputTextField.js","sources":["../../../../CommandForm/fields/InputTextField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;MAsCa,cAAc,GAAG,kBAAkB,CAC5C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,KAAK,EAAE;AAC/C,QAAA,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE;QACtB,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,IAAI,GAAG,YAAY,CAAC;QACzC,eAAe,EAAE,KAAK,CAAC,EAAE,EAAE,IAAI,GAAG,kBAAkB,CAAC;AACxD,KAAA,CAAC;IACF,QACIA,4BACJC,GAAA,CAAA,OAAA,EAAA,EAAA,GACQ,KAAK,CAAC,EAAE,EAAE,IAAI,EAClB,EAAE,EAAE,aAAa,CAAC,SAAS,gBACf,aAAa,CAAC,SAAS,EAAA,kBAAA,EACjB,aAAa,CAAC,eAAe,EAC/C,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,EAC9D,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,EAAA,cAAA,EAChB,KAAK,CAAC,OAAO,IAAI,SAAS,EAAA,eAAA,EACzB,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,IAAI,SAAS,EAAA,cAAA,EACtC,KAAK,CAAC,OAAO,IAAI,SAAS,EAAA,eAAA,EACzB,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,IAAI,SAAS,EAAA,kBAAA,EACnC,OAAO,EACxB,SAAS,EAAE;oBACP,oBAAoB;oBACpB,eAAe;AACf,oBAAA,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;AACzB,oBAAA,KAAK,CAAC,SAAS;AAClB;qBACI,MAAM,CAAC,OAAO;qBACd,IAAI,CAAC,GAAG,CAAC,EAAA,CAChB,EACO,aAAa,CAAC,WAAW,CAAA,EAAA,CAC3B;AAEX,CAAC,EACD,EAAE,YAAY,EAAE,EAAE,EAAE;;"}

package/dist/esm/CommandForm/fields/MultiSelectField.d.ts

@@ -1,20 +1,55 @@
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-import { type DropdownProps } from '../../Dropdown/Dropdown';
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type DropdownProps } from '../../Dropdown/Dropdown.js';
 import React from 'react';
-interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string | number>> {
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/**
+ * Component-level props for {@link MultiSelectField}.
+ */
+interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string | number>>, FieldAccessibilityProps {
+    /** Source array of objects to populate the multi-select options. */
     options: Array<Record<string, unknown>>;
+    /** Property name on each option object used as the underlying value. */
     optionValue?: string;
+    /** Property name on each option object used as the visible label. */
     optionLabel?: string;
+    /** Placeholder text shown when nothing is selected. */
     placeholder?: string;
+    /**
+     * @deprecated Native multiple selection has one presentation. Remove this renderer-era option.
+     */
     display?: 'comma' | 'chip';
+    /**
+     * @deprecated Native multiple selection does not collapse labels. Remove this renderer-era option.
+     */
     maxSelectedLabels?: number;
+    /** When true, shows a filter input in the dropdown panel. */
     filter?: boolean;
+    /** When true, shows a clear icon that resets the selection. */
     showClear?: boolean;
+    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
+    /** Cratis-owned per-part attributes applied to the underlying Select. */
     pt?: DropdownProps['pt'];
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: DropdownProps['ptOptions'];
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
+/**
+ * A multi-select dropdown field bound to an `Array<string | number>`
+ * property on a Cratis Arc command. Use for "pick any subset of these"
+ * controls with optional in-panel filtering. See {@link InputTextField}
+ * for the full `value={c => c.prop}` binding model.
+ *
+ * ```tsx
+ * <MultiSelectField value={c => c.tagIds}
+ *                   options={tags} optionValue="id" optionLabel="name"
+ *                   display="chip" filter title="Tags" />
+ * ```
+ */
 export declare const MultiSelectField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<MultiSelectFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=MultiSelectField.d.ts.map

package/dist/esm/CommandForm/fields/MultiSelectField.js

@@ -1,27 +1,25 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { asCommandFormField } from '@cratis/arc.react/commands';
 import { Dropdown } from '../../Dropdown/Dropdown.js';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A multi-select dropdown field bound to an `Array<string | number>`
- * property on a Cratis Arc command. Use for "pick any subset of these"
- * controls with optional in-panel filtering. See {@link InputTextField}
- * for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <MultiSelectField value={c => c.tagIds}
- *                   options={tags} optionValue="id" optionLabel="name"
- *                   display="chip" filter title="Tags" />
- * ```
- */
-const MultiSelectField = asCommandFormField((props) => (jsx(Dropdown, { multiple: true, value: props.value, onChange: (e) => props.onChange(e.value ?? []), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, filter: props.filter, showClear: props.showClear, invalid: props.invalid, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
+const MultiSelectField = asCommandFormField((props) => {
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'],
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
+    return (jsxs(Fragment, { children: [jsx(Dropdown, { id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, multiple: true, value: props.value, onChange: (value) => props.onChange(value ?? []), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, filter: props.filter, showClear: props.showClear, invalid: props.invalid, className: props.className
+                    ? `cratis:w-full ${props.className}`
+                    : 'cratis:w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }), accessibility.hiddenError] }));
+}, {
     defaultValue: [],
     extractValue: (e) => {
         if (!Array.isArray(e)) {
             return [];
         }
         return e.filter((item) => typeof item === 'string' || typeof item === 'number');
-    }
+    },
 });
 
 export { MultiSelectField };

package/dist/esm/CommandForm/fields/MultiSelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectField.js","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AA2DA;;;;;;;;;;;AAWG;AACI,MAAM,gBAAgB,GAAG,kBAAkB,CAC9C,CAAC,KAAK,MACFA,GAAA,CAAC,QAAQ,EAAA,EACL,QAAQ,EAAA,IAAA,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,EAC9C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAI;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACnB,YAAA,OAAO,EAAE;QACb;AAEA,QAAA,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAA8B,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC;IAC5G;AACH,CAAA;;"}
+{"version":3,"file":"MultiSelectField.js","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;MAyEa,gBAAgB,GAAG,kBAAkB,CAC9C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,KAAK,EAAE;AAC/C,QAAA,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QACvB,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,YAAY,CAAC;QAC1C,eAAe,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,kBAAkB,CAAC;AACzD,KAAA,CAAC;IACF,QACIA,4BACIC,GAAA,CAAC,QAAQ,IACL,EAAE,EAAE,aAAa,CAAC,SAAS,gBACf,aAAa,CAAC,SAAS,EAAA,kBAAA,EACjB,aAAa,CAAC,eAAe,EAC/C,QAAQ,EAAA,IAAA,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,EAChD,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EACL,KAAK,CAAC;AACF,sBAAE,CAAA,cAAA,EAAiB,KAAK,CAAC,SAAS,CAAA;sBAChC,eAAe,EAEzB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,EACD,aAAa,CAAC,WAAW,CAAA,EAAA,CAC3B;AAEX,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAI;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACnB,YAAA,OAAO,EAAE;QACb;AAEA,QAAA,OAAO,CAAC,CAAC,MAAM,CACX,CAAC,IAAI,KACD,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,CAC3D;IACL,CAAC;AACJ,CAAA;;"}

package/dist/esm/CommandForm/fields/NumberField.d.ts

@@ -1,16 +1,23 @@
-import type { InputNumberRootProps } from '@primereact/types/primitive/inputnumber';
-import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface NumberFieldComponentProps extends WrappedFieldProps<number> {
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/** Stable part attributes for {@link NumberField}. */
+export interface NumberFieldParts {
+    /** Field wrapper. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Native number input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+}
+interface NumberFieldComponentProps extends WrappedFieldProps<number>, FieldAccessibilityProps {
     placeholder?: string;
     min?: number;
     max?: number;
     step?: number;
     className?: string;
-    pt?: InputNumberRootProps['pt'];
-    ptOptions?: InputNumberRootProps['ptOptions'];
+    pt?: NumberFieldParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
+/** A numeric field bound to a number property on an Arc command. */
 export declare const NumberField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<NumberFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=NumberField.d.ts.map