@cratis/components 3.6.1 → 4.0.0

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

@@ -1,21 +1,26 @@
-import { jsx } from 'react/jsx-runtime';
-import { InputNumber } from 'primereact/inputnumber';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A numeric input field bound to a `number` property on a Cratis Arc
- * command. Defaults to integer mode without thousands grouping; pass `step`
- * to enable spinner increments and `min` / `max` to clamp the range. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <NumberField value={c => c.quantity} title="Quantity" min={0} step={1} />
- * ```
- */
-const NumberField = asCommandFormField((props) => (jsx("div", { onBlur: props.onBlur, className: props.className ? `w-full ${props.className}` : 'w-full', children: jsx(InputNumber.Root, { value: props.value, onValueChange: (e) => props.onChange(e.value ?? 0), invalid: props.invalid, min: props.min, max: props.max, step: props.step, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: jsx(InputNumber.Input, { placeholder: props.placeholder, className: "w-full" }) }) })), {
-    defaultValue: 0,
-    extractValue: (e) => (typeof e === 'number' ? e : 0)
-});
+const NumberField = 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("div", { ...props.pt?.root, onBlur: props.onBlur, "data-cratis-part": 'root', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-readonly": props.pt?.input?.readOnly || undefined, className: [
+            'cratis-number-field',
+            'cratis:w-full',
+            props.pt?.root?.className,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [jsx("input", { ...props.pt?.input, id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, type: 'number', value: props.value, onChange: (event) => props.onChange(Number.isNaN(event.currentTarget.valueAsNumber)
+                    ? 0
+                    : event.currentTarget.valueAsNumber), placeholder: props.placeholder, min: props.min, max: props.max, step: props.step, "aria-invalid": props.invalid || undefined, "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-readonly": props.pt?.input?.readOnly || undefined, "data-cratis-part": 'input', className: ['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ') }), accessibility.hiddenError] }));
+}, { defaultValue: 0 });
 
 export { NumberField };
 //# sourceMappingURL=NumberField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../../CommandForm/fields/NumberField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAqCA;;;;;;;;;AASG;AACI,MAAM,WAAW,GAAG,kBAAkB,CACzC,CAAC,KAAK,MAIFA,GAAA,CAAA,KAAA,EAAA,EAAK,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EAAA,QAAA,EAC1FA,GAAA,CAAC,WAAW,CAAC,IAAI,EAAA,EACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAkC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,EACnF,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,QAAA,EACxBA,GAAA,CAAC,WAAW,CAAC,KAAK,EAAA,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACzD,EAAA,CACjB,CACT,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAU,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;AAC/D,CAAA;;"}
+{"version":3,"file":"NumberField.js","sources":["../../../../CommandForm/fields/NumberField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;MAqCa,WAAW,GAAG,kBAAkB,CACzC,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,QACAA,IAAA,CAAA,KAAA,EAAA,EAAA,GACQ,KAAK,CAAC,EAAE,EAAE,IAAI,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,kBAAA,EACH,MAAM,mBACR,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,SAAS,EAAA,cAAA,EACvC,KAAK,CAAC,OAAO,IAAI,SAAS,EAAA,eAAA,EACzB,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,SAAS,EACrD,SAAS,EAAE;YACP,qBAAqB;YACrB,eAAe;AACf,YAAA,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;AACzB,YAAA,KAAK,CAAC,SAAS;AAClB;aACI,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAEdC,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,QAAQ,EACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,KAAK,KACZ,KAAK,CAAC,QAAQ,CACV,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa;AAC1C,sBAAE;AACF,sBAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAC1C,EAEL,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,kBACF,KAAK,CAAC,OAAO,IAAI,SAAS,mBACzB,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,SAAS,kBACvC,KAAK,CAAC,OAAO,IAAI,SAAS,EAAA,eAAA,EACzB,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,SAAS,sBACpC,OAAO,EACxB,SAAS,EAAE,CAAC,oBAAoB,EAAE,eAAe,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS;qBACxE,MAAM,CAAC,OAAO;qBACd,IAAI,CAAC,GAAG,CAAC,EAAA,CAChB,EACD,aAAa,CAAC,WAAW,CAAA,EAAA,CACxB;AAEV,CAAC,EACD,EAAE,YAAY,EAAE,CAAC,EAAE;;"}

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

@@ -1,13 +1,24 @@
-import type { InputPasswordProps } from '@primereact/types/primitive/inputpassword';
-import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface PasswordFieldComponentProps extends WrappedFieldProps<string> {
+import { type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes } from 'react';
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/** Stable part attributes for {@link PasswordField}. */
+export interface PasswordParts {
+    /** Field wrapper. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Native password/text input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visibility toggle button. */
+    toggle?: ButtonHTMLAttributes<HTMLButtonElement>;
+}
+interface PasswordFieldComponentProps extends WrappedFieldProps<string>, FieldAccessibilityProps {
     placeholder?: string;
     className?: string;
-    pt?: InputPasswordProps['pt'];
-    ptOptions?: InputPasswordProps['ptOptions'];
+    pt?: PasswordParts;
+    ptOptions?: object;
     unstyled?: boolean;
+    showLabel?: string;
+    hideLabel?: string;
 }
+/** A masked password field bound to a string property on an Arc command. */
 export declare const PasswordField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<PasswordFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=PasswordField.d.ts.map

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

@@ -1,20 +1,31 @@
-import { jsx } from 'react/jsx-runtime';
-import { InputPassword } from 'primereact/inputpassword';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A masked password field bound to a `string` property on a Cratis Arc command,
- * with a built-in show/hide toggle. See {@link InputTextField} for the full
- * `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <PasswordField value={c => c.password} title="Password" />
- * ```
- */
-const PasswordField = asCommandFormField((props) => (jsx("div", { onBlur: props.onBlur, className: props.className ? `w-full ${props.className}` : 'w-full', children: jsx(InputPassword, { value: props.value, onValueChange: props.onChange, invalid: props.invalid, placeholder: props.placeholder, className: "w-full", pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }) })), {
-    defaultValue: '',
-    extractValue: (e) => e.value
-});
+const PasswordControl = (props) => {
+    const [visible, setVisible] = useState(false);
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'],
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
+    return (jsxs("div", { ...props.pt?.root, onBlur: props.onBlur, className: [
+            'cratis-password-field',
+            'cratis:w-full',
+            props.pt?.root?.className,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(' '), "data-cratis-part": 'root', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-readonly": props.pt?.input?.readOnly || undefined, children: [jsx("input", { ...props.pt?.input, id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, type: visible ? 'text' : 'password', value: props.value, onChange: (event) => props.onChange(event.currentTarget.value), 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-field-input', 'cratis:w-full', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'input' }), jsx("button", { ...props.pt?.toggle, type: 'button', className: ['cratis-password-field__toggle', props.pt?.toggle?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'toggle', "data-disabled": props.pt?.toggle?.disabled || undefined, "aria-label": visible
+                    ? (props.hideLabel ?? 'Hide password')
+                    : (props.showLabel ?? 'Show password'), onClick: () => setVisible((current) => !current), children: jsx("span", { "aria-hidden": 'true', children: visible ? '◉' : '○' }) }), accessibility.hiddenError] }));
+};
+const PasswordField = asCommandFormField(PasswordControl, { defaultValue: '' });
 
 export { PasswordField };
 //# sourceMappingURL=PasswordField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sources":["../../../../CommandForm/fields/PasswordField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAsBA;;;;;;;;AAQG;AACI,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,aAAK,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EAAA,QAAA,EAC1FA,GAAA,CAAC,aAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,SAAS,EAAC,QAAQ,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,EAAA,CACA,CACT,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAgC,KAAK,CAAC,CAAC;AACzD,CAAA;;"}
+{"version":3,"file":"PasswordField.js","sources":["../../../../CommandForm/fields/PasswordField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,14 +1,27 @@
-import type { RadioButtonRootProps } from '@primereact/types/primitive/radiobutton';
-import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | 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 RadioButtonField}. */
+export interface RadioParts {
+    /** Wrapping option label. */
+    root?: HTMLAttributes<HTMLLabelElement>;
+    /** Native radio input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual radio box. */
+    box?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual selected indicator. */
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+}
+interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | number>, FieldAccessibilityProps {
     label?: string;
     buttonValue: string | number;
+    /** Native group name shared by every option bound to the same property. */
+    name: string;
     className?: string;
-    pt?: RadioButtonRootProps['pt'];
-    ptOptions?: RadioButtonRootProps['ptOptions'];
+    pt?: RadioParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
+/** A single radio option bound to a string or number property on an Arc command. */
 export declare const RadioButtonField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<RadioButtonFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=RadioButtonField.d.ts.map

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

@@ -1,22 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { RadioButton } from 'primereact/radiobutton';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A single radio button bound to a `string` or `number` property on a
- * Cratis Arc command. Multiple {@link RadioButtonField} instances with the
- * same `value` accessor and distinct `buttonValue` props together form a
- * mutually-exclusive group — useful when the radios need to be laid out
- * non-contiguously in the form. For the common case where the radios sit
- * in one place, prefer {@link RadioGroupField} which manages the group as
- * a single field. See {@link InputTextField} for the full
- * `value={c => c.prop}` binding model.
- */
-const RadioButtonField = asCommandFormField((props) => (jsxs("label", { className: "flex items-center", onBlur: props.onBlur, children: [jsx(RadioButton.Root, { value: props.buttonValue, checked: props.value === props.buttonValue, onCheckedChange: (e) => { if (e.checked)
-                props.onChange(props.buttonValue); }, invalid: props.invalid, className: props.className, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: jsx(RadioButton.Box, { children: jsx(RadioButton.Indicator, {}) }) }), props.label && jsx("span", { className: "ml-2", children: props.label })] })), {
-    defaultValue: '',
-    extractValue: (e) => e
-});
+const RadioButtonField = asCommandFormField((props) => {
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'] ?? props.label,
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
+    const selected = props.value === props.buttonValue;
+    return (jsxs(Fragment, { children: [jsxs("label", { ...props.pt?.root, className: ['cratis-choice-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-selected": selected || undefined, children: [jsx("input", { ...props.pt?.input, id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, type: 'radio', name: props.name, checked: selected, onChange: (event) => {
+                            if (event.currentTarget.checked)
+                                props.onChange(props.buttonValue);
+                        }, "aria-invalid": props.invalid || undefined, className: ['cratis-choice-field__native', props.pt?.input?.className]
+                            .filter(Boolean)
+                            .join(' '), "data-cratis-part": 'input', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined }), jsx("span", { ...props.pt?.box, className: ['cratis-radio__box', props.pt?.box?.className]
+                            .filter(Boolean)
+                            .join(' '), "data-cratis-part": 'box', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined, "aria-hidden": 'true', children: jsx("span", { ...props.pt?.indicator, className: ['cratis-radio__indicator', props.pt?.indicator?.className]
+                                .filter(Boolean)
+                                .join(' '), "data-cratis-part": 'indicator', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined }) }), props.label && (jsx("span", { className: 'cratis-choice-field__label', children: props.label }))] }), accessibility.hiddenError] }));
+}, { defaultValue: '' });
 
 export { RadioButtonField };
 //# sourceMappingURL=RadioButtonField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","sources":["../../../../CommandForm/fields/RadioButtonField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAkCA;;;;;;;;;AASG;AACI,MAAM,gBAAgB,GAAG,kBAAkB,CAC9C,CAAC,KAAK,MAIFA,gBAAO,SAAS,EAAC,mBAAmB,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,QAAA,EAAA,CACrDC,GAAA,CAAC,WAAW,CAAC,IAAI,IACb,KAAK,EAAE,KAAK,CAAC,WAAW,EACxB,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,EAC1C,eAAe,EAAE,CAAC,CAA6B,KAAI,EAAG,IAAI,CAAC,CAAC,OAAO;AAAE,gBAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACzG,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,YACxBA,GAAA,CAAC,WAAW,CAAC,GAAG,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,WAAW,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACX,EAAA,CACH,EAClB,KAAK,CAAC,KAAK,IAAIA,cAAM,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CACvD,CACX,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;"}
+{"version":3,"file":"RadioButtonField.js","sources":["../../../../CommandForm/fields/RadioButtonField.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

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

@@ -1,16 +1,31 @@
-import type { RadioButtonRootProps } from '@primereact/types/primitive/radiobutton';
-import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface RadioGroupFieldComponentProps extends WrappedFieldProps<string | number> {
+import { type HTMLAttributes, type InputHTMLAttributes } from 'react';
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/** Stable part attributes for {@link RadioGroupField}. */
+export interface RadioGroupParts {
+    /** Semantic radiogroup wrapper. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** One option label. */
+    option?: HTMLAttributes<HTMLLabelElement>;
+    /** Native radio input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual radio box. */
+    box?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual selected indicator. */
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+}
+interface RadioGroupFieldComponentProps extends WrappedFieldProps<string | number>, FieldAccessibilityProps {
     options: Array<Record<string, unknown>>;
     optionLabel: string;
     optionValue: string;
     layout?: 'horizontal' | 'vertical';
+    /** Native radio-group name. Generated automatically when omitted. */
+    name?: string;
     className?: string;
-    pt?: RadioButtonRootProps['pt'];
-    ptOptions?: RadioButtonRootProps['ptOptions'];
+    pt?: RadioGroupParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
+/** A visible radio group bound to a string or number property on an Arc command. */
 export declare const RadioGroupField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<RadioGroupFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=RadioGroupField.d.ts.map

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

@@ -1,39 +1,50 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { RadioButton } from 'primereact/radiobutton';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A radio-button group field bound to a `string` or `number` property on a
- * Cratis Arc command. Use for small mutually-exclusive choice sets where
- * all options should be visible at once; for larger sets, prefer
- * {@link DropdownField}. See {@link InputTextField} for the full
- * `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <RadioGroupField value={c => c.priority}
- *                  options={priorityOptions}
- *                  optionLabel="label"
- *                  optionValue="value"
- *                  layout="horizontal"
- *                  title="Priority" />
- * ```
- */
 const RadioGroupField = asCommandFormField((props) => {
-    const layout = props.layout ?? 'vertical';
-    const layoutClasses = layout === 'horizontal' ? 'flex-row gap-4 flex-wrap' : 'flex-col gap-2';
-    const containerClassName = props.className
-        ? `flex ${layoutClasses} ${props.className}`
-        : `flex ${layoutClasses}`;
-    return (jsx("div", { className: containerClassName, children: props.options.map((option) => {
-            const optValue = option[props.optionValue];
-            const optLabel = option[props.optionLabel];
-            return (jsxs("label", { className: "flex items-center", onBlur: props.onBlur, children: [jsx(RadioButton.Root, { value: optValue, checked: props.value === optValue, onCheckedChange: (e) => { if (e.checked)
-                            props.onChange(optValue); }, invalid: props.invalid, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: jsx(RadioButton.Box, { children: jsx(RadioButton.Indicator, {}) }) }), jsx("span", { className: "ml-2", children: optLabel })] }, String(optValue)));
-        }) }));
-}, {
-    defaultValue: '',
-    extractValue: (e) => e
-});
+    const generatedName = useId();
+    const name = props.name ?? generatedName;
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.root?.id,
+        ariaLabel: props.pt?.root?.['aria-label'],
+        ariaDescribedBy: props.pt?.root?.['aria-describedby'],
+    });
+    return (jsxs("div", { ...props.pt?.root, id: accessibility.controlId, role: 'radiogroup', "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, "aria-invalid": props.invalid || undefined, className: [
+            'cratis-radio-group',
+            `cratis-radio-group--${props.layout ?? 'vertical'}`,
+            props.pt?.root?.className,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(' '), "data-cratis-part": 'root', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, children: [props.options.map((option) => {
+                const value = option[props.optionValue];
+                const label = String(option[props.optionLabel] ?? value);
+                const selected = props.value === value;
+                return (jsxs("label", { ...props.pt?.option, className: [
+                        'cratis-choice-field',
+                        props.pt?.option?.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' '), onBlur: props.onBlur, "data-cratis-part": 'option', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined, children: [jsx("input", { ...props.pt?.input, type: 'radio', name: name, checked: selected, onChange: (event) => {
+                                if (event.currentTarget.checked)
+                                    props.onChange(value);
+                            }, "aria-invalid": props.invalid || undefined, className: [
+                                'cratis-choice-field__native',
+                                props.pt?.input?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' '), "data-cratis-part": 'input', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined }), jsx("span", { ...props.pt?.box, className: ['cratis-radio__box', props.pt?.box?.className]
+                                .filter(Boolean)
+                                .join(' '), "data-cratis-part": 'box', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined, "aria-hidden": 'true', children: jsx("span", { ...props.pt?.indicator, className: [
+                                    'cratis-radio__indicator',
+                                    props.pt?.indicator?.className,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' '), "data-cratis-part": 'indicator', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined }) }), jsx("span", { className: 'cratis-choice-field__label', children: label })] }, String(value)));
+            }), accessibility.hiddenError] }));
+}, { defaultValue: '' });
 
 export { RadioGroupField };
 //# sourceMappingURL=RadioGroupField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupField.js","sources":["../../../../CommandForm/fields/RadioGroupField.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;AAiCA;;;;;;;;;;;;;;;AAeG;MACU,eAAe,GAAG,kBAAkB,CAC7C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,UAAU;AACzC,IAAA,MAAM,aAAa,GAAG,MAAM,KAAK,YAAY,GAAG,0BAA0B,GAAG,gBAAgB;AAC7F,IAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC;AAC7B,UAAE,CAAA,KAAA,EAAQ,aAAa,IAAI,KAAK,CAAC,SAAS,CAAA;AAC1C,UAAE,CAAA,KAAA,EAAQ,aAAa,CAAA,CAAE;AAC7B,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,EAAA,QAAA,EAC7B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;YAC1B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAoB;YAC7D,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAW;AACpD,YAAA,QAGIC,IAAA,CAAA,OAAA,EAAA,EAA8B,SAAS,EAAC,mBAAmB,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,QAAA,EAAA,CAC5ED,GAAA,CAAC,WAAW,CAAC,IAAI,IACb,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,QAAQ,EACjC,eAAe,EAAE,CAAC,CAA6B,OAAO,IAAI,CAAC,CAAC,OAAO;AAAE,4BAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAChG,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,QAAA,EACxBA,GAAA,CAAC,WAAW,CAAC,GAAG,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,WAAW,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACX,EAAA,CACH,EACnBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAQ,CAAA,EAAA,EAbhC,MAAM,CAAC,QAAQ,CAAC,CAcpB;QAEhB,CAAC,CAAC,EAAA,CACA;AAEd,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;"}
+{"version":3,"file":"RadioGroupField.js","sources":["../../../../CommandForm/fields/RadioGroupField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,14 +1,27 @@
-import type { RatingRootProps } from '@primereact/types/primitive/rating';
-import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface RatingFieldComponentProps extends WrappedFieldProps<number> {
+import { type HTMLAttributes, type InputHTMLAttributes } from 'react';
+import { type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { type FieldAccessibilityProps } from './fieldAccessibility.js';
+/** Stable part attributes for {@link RatingField}. */
+export interface RatingParts {
+    /** Semantic radiogroup wrapper. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** One rating option label. */
+    option?: HTMLAttributes<HTMLLabelElement>;
+    /** Native radio input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual star. */
+    star?: HTMLAttributes<HTMLSpanElement>;
+}
+interface RatingFieldComponentProps extends WrappedFieldProps<number>, FieldAccessibilityProps {
     stars?: number;
+    /** Native radio-group name. Generated automatically when omitted. */
+    name?: string;
     starAriaLabel?: (starValue: number) => string;
     className?: string;
-    pt?: RatingRootProps['pt'];
-    ptOptions?: RatingRootProps['ptOptions'];
+    pt?: RatingParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
+/** A star rating bound to a number property on an Arc command. */
 export declare const RatingField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<RatingFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=RatingField.d.ts.map

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

@@ -1,19 +1,48 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Rating } from 'primereact/rating';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A star-rating field bound to a `number` property on a Cratis Arc command.
- * See {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <RatingField value={c => c.rating} title="Rating" stars={5} />
- * ```
- */
-const RatingField = asCommandFormField((props) => (jsx("div", { onBlur: props.onBlur, className: props.className, children: jsx(Rating.Root, { value: props.value, onValueChange: props.onChange, invalid: props.invalid, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: Array.from({ length: props.stars ?? 5 }, (_, index) => (jsxs(Rating.Option, { value: index + 1, index: index, "aria-label": (props.starAriaLabel ?? ((n) => `${n} ${n === 1 ? 'star' : 'stars'}`))(index + 1), children: [jsx(Rating.On, { children: jsx("i", { className: "pi pi-star-fill" }) }), jsx(Rating.Off, { children: jsx("i", { className: "pi pi-star" }) })] }, index))) }) })), {
-    defaultValue: 0,
-    extractValue: (e) => e.value
-});
+const RatingField = asCommandFormField((props) => {
+    const generatedName = useId();
+    const name = props.name ?? generatedName;
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.root?.id,
+        ariaLabel: props.pt?.root?.['aria-label'],
+        ariaDescribedBy: props.pt?.root?.['aria-describedby'],
+    });
+    return (jsxs("div", { ...props.pt?.root, id: accessibility.controlId, role: 'radiogroup', "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, "aria-invalid": props.invalid || undefined, className: [
+            'cratis-rating-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, children: [Array.from({ length: props.stars ?? 5 }, (_, index) => {
+                const starValue = index + 1;
+                const selected = starValue === props.value;
+                const label = (props.starAriaLabel ??
+                    ((value) => `${value} ${value === 1 ? 'star' : 'stars'}`))(starValue);
+                return (jsxs("label", { ...props.pt?.option, className: [
+                        'cratis-rating-field__option',
+                        props.pt?.option?.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' '), "data-cratis-part": 'option', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined, children: [jsx("input", { ...props.pt?.input, type: 'radio', name: name, checked: selected, onChange: (event) => {
+                                if (event.currentTarget.checked)
+                                    props.onChange(starValue);
+                            }, "aria-label": label, className: [
+                                'cratis-choice-field__native',
+                                props.pt?.input?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' '), "data-cratis-part": 'input', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": selected || undefined }), jsx("span", { ...props.pt?.star, className: [
+                                'cratis-rating-field__star',
+                                props.pt?.star?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' '), "data-cratis-part": 'star', "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, "data-selected": starValue <= props.value || undefined, "aria-hidden": 'true', children: "\u2605" })] }, starValue));
+            }), accessibility.hiddenError] }));
+}, { defaultValue: 0 });
 
 export { RatingField };
 //# sourceMappingURL=RatingField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RatingField.js","sources":["../../../../CommandForm/fields/RatingField.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;AAwBA;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,kBAAkB,CACzC,CAAC,KAAK,MACFA,GAAA,CAAA,KAAA,EAAA,EAAK,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,YACjDA,GAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,QAAA,EACvB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,MAC/CC,IAAA,CAAC,MAAM,CAAC,MAAM,EAAA,EAEV,KAAK,EAAE,KAAK,GAAG,CAAC,EAChB,KAAK,EAAE,KAAK,gBACA,CAAC,KAAK,CAAC,aAAa,KAAK,CAAC,CAAC,KAAK,CAAA,EAAG,CAAC,CAAA,CAAA,EAAI,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,EAAA,QAAA,EAAA,CAC7FD,GAAA,CAAC,MAAM,CAAC,EAAE,EAAA,EAAA,QAAA,EAACA,WAAG,SAAS,EAAC,iBAAiB,EAAA,CAAG,EAAA,CAAY,EACxDA,GAAA,CAAC,MAAM,CAAC,GAAG,cAACA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,YAAY,EAAA,CAAG,EAAA,CAAa,CAAA,EAAA,EALhD,KAAK,CAME,CACnB,CAAC,EAAA,CACQ,EAAA,CACZ,CACT,EACD;AACI,IAAA,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,CAAC,CAA6B,KAAK,CAAC,CAAC;AACtD,CAAA;;"}
+{"version":3,"file":"RatingField.js","sources":["../../../../CommandForm/fields/RatingField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,15 +1,24 @@
-import type { SliderRootProps } from '@primereact/types/primitive/slider';
-import React from 'react';
-import { WrappedFieldProps } from '@cratis/arc.react/commands';
-interface SliderFieldComponentProps 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 SliderField}. */
+export interface SliderParts {
+    /** Field wrapper. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Native range input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Current-value display. */
+    value?: HTMLAttributes<HTMLSpanElement>;
+}
+interface SliderFieldComponentProps extends WrappedFieldProps<number>, FieldAccessibilityProps {
     min?: number;
     max?: number;
     step?: number;
     className?: string;
-    pt?: SliderRootProps['pt'];
-    ptOptions?: SliderRootProps['ptOptions'];
+    pt?: SliderParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
+/** A range slider bound to a number property on an Arc command. */
 export declare const SliderField: (<TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<SliderFieldComponentProps, TCommand>) => React.ReactElement) & import("@cratis/arc.react/commands").CommandFormMarked;
 export {};
-//# sourceMappingURL=SliderField.d.ts.map

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

@@ -1,20 +1,26 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slider } from 'primereact/slider';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { useFieldAccessibility } from './fieldAccessibility.js';
 
-/**
- * A horizontal slider field bound to a `number` property on a Cratis Arc
- * command. The current value is rendered below the track for feedback. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <SliderField value={c => c.volume} title="Volume" min={0} max={100} />
- * ```
- */
-const SliderField = asCommandFormField((props) => (jsxs("div", { className: "w-full", onBlur: props.onBlur, children: [jsxs(Slider.Root, { value: props.value, onValueChange: (e) => props.onChange(Array.isArray(e.value) ? (e.value[0] ?? 0) : e.value), min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: [jsx(Slider.Track, { children: jsx(Slider.Range, {}) }), jsx(Slider.Handle, {})] }), jsx("div", { className: "text-center mt-2", children: jsx("span", { className: "font-semibold", children: props.value }) })] })), {
-    defaultValue: 0,
-    extractValue: (e) => (typeof e === 'number' ? e : 0)
-});
+const SliderField = 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("div", { ...props.pt?.root, className: [
+            'cratis-slider-field',
+            'cratis:w-full',
+            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, children: [jsx("input", { ...props.pt?.input, id: accessibility.controlId, "aria-label": accessibility.ariaLabel, "aria-describedby": accessibility.ariaDescribedBy, type: 'range', value: props.value, onChange: (event) => props.onChange(event.currentTarget.valueAsNumber), min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, "aria-invalid": props.invalid || undefined, "data-disabled": props.pt?.input?.disabled || undefined, "data-invalid": props.invalid || undefined, className: ['cratis-slider-field__input', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'input' }), jsx("span", { ...props.pt?.value, className: ['cratis-slider-field__value', props.pt?.value?.className]
+                    .filter(Boolean)
+                    .join(' '), "data-cratis-part": 'value', "data-invalid": props.invalid || undefined, children: props.value }), accessibility.hiddenError] }));
+}, { defaultValue: 0 });
 
 export { SliderField };
 //# sourceMappingURL=SliderField.js.map