libmodulor 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## v0.15.0 (2025-05-25)
+
+- In `LLMManager`, allow to pass the `apiKey` directly in the request. It precedes the settings value defined at the implementation level
+- In `target/react`, add optional `className` to stylable components
+- In `target/web`, handle use case input field initial value
+- Add `Embedded` use case examples in the docs
+
 ## v0.14.0 (2025-05-24)
 
 - Introduce `useAction` for react targets : it's a use case agnostic way of invoking an action

package/README.md

@@ -17,4 +17,4 @@ If you think you can help in any way, feel free to contact me (cf. `author` in `
 
 ## ⚖️ License
 
-[LGPL-3.0](https://github.com/c100k/libmodulor/blob/v0.14.0/LICENSE)
+[LGPL-3.0](https://github.com/c100k/libmodulor/blob/v0.15.0/LICENSE)

package/dist/esm/dt/base/TBoolean.js

@@ -25,10 +25,13 @@ export class TBoolean extends TBase {
         return true;
     }
     fmt(ifNullOrUndefined) {
-        if (typeof this.raw !== 'boolean' || this.raw !== true) {
+        if (typeof this.raw !== 'boolean') {
             return super.fmt(ifNullOrUndefined);
         }
-        return '✔️';
+        if (this.raw === true) {
+            return 'Y';
+        }
+        return 'N';
     }
     htmlInputType() {
         return 'checkbox';

package/dist/esm/std/LLMManager.d.ts

@@ -1,6 +1,14 @@
-import type { FreeTextLong } from '../dt/index.js';
+import type { ApiKey, FreeTextLong } from '../dt/index.js';
 export type LLMManagerModel = string;
 export type LLMManagerTemperature = number;
+export interface LLMManagerSendOpts {
+    /**
+     * By default, each implementation reads the auth from the settings. If provided here, it takes precedence over the settings value.
+     */
+    auth?: {
+        apiKey?: ApiKey;
+    };
+}
 export interface LLMManagerSendReq {
     messages: {
         content: FreeTextLong;
@@ -21,5 +29,5 @@ export interface LLMManagerSendRes {
     }[];
 }
 export interface LLMManager {
-    send(req: LLMManagerSendReq): Promise<LLMManagerSendRes>;
+    send(req: LLMManagerSendReq, opts?: LLMManagerSendOpts): Promise<LLMManagerSendRes>;
 }

package/dist/esm/std/impl/MistralAILLMManager.d.ts

@@ -1,6 +1,6 @@
 import type { ApiKey } from '../../dt/index.js';
 import type { HTTPAPICaller } from '../HTTPAPICaller.js';
-import type { LLMManager, LLMManagerSendReq, LLMManagerSendRes } from '../LLMManager.js';
+import type { LLMManager, LLMManagerSendOpts, LLMManagerSendReq, LLMManagerSendRes } from '../LLMManager.js';
 import type { Configurable, Settings, SettingsManager } from '../SettingsManager.js';
 export interface MistralAILLMManagerSettings extends Settings {
     mai_api_key: ApiKey;
@@ -12,6 +12,6 @@ export declare class MistralAILLMManager implements Configurable<S>, LLMManager
     private static BASE_URL;
     constructor(httpAPICaller: HTTPAPICaller, settingsManager: SettingsManager<S>);
     s(): MistralAILLMManagerSettings;
-    send(req: LLMManagerSendReq): Promise<LLMManagerSendRes>;
+    send(req: LLMManagerSendReq, opts?: LLMManagerSendOpts): Promise<LLMManagerSendRes>;
 }
 export {};

package/dist/esm/std/impl/MistralAILLMManager.js

@@ -26,10 +26,10 @@ let MistralAILLMManager = class MistralAILLMManager {
             mai_api_key: this.settingsManager.get()('mai_api_key'),
         };
     }
-    async send(req) {
+    async send(req, opts) {
         return await this.httpAPICaller.exec({
             authorizationHeader: {
-                value: this.s().mai_api_key,
+                value: opts?.auth?.apiKey ?? this.s().mai_api_key,
                 prefix: 'Bearer',
             },
             errBuilder: async (error) => {

package/dist/esm/std/impl/OpenAILLMManager.d.ts

@@ -1,6 +1,6 @@
 import type { ApiKey } from '../../dt/index.js';
 import type { HTTPAPICaller } from '../HTTPAPICaller.js';
-import type { LLMManager, LLMManagerSendReq, LLMManagerSendRes } from '../LLMManager.js';
+import type { LLMManager, LLMManagerSendOpts, LLMManagerSendReq, LLMManagerSendRes } from '../LLMManager.js';
 import type { Configurable, Settings, SettingsManager } from '../SettingsManager.js';
 export interface OpenAILLMManagerSettings extends Settings {
     oai_api_key: ApiKey;
@@ -12,6 +12,6 @@ export declare class OpenAILLMManager implements Configurable<S>, LLMManager {
     private static BASE_URL;
     constructor(httpAPICaller: HTTPAPICaller, settingsManager: SettingsManager<S>);
     s(): OpenAILLMManagerSettings;
-    send(req: LLMManagerSendReq): Promise<LLMManagerSendRes>;
+    send(req: LLMManagerSendReq, opts?: LLMManagerSendOpts): Promise<LLMManagerSendRes>;
 }
 export {};

package/dist/esm/std/impl/OpenAILLMManager.js

@@ -26,10 +26,10 @@ let OpenAILLMManager = class OpenAILLMManager {
             oai_api_key: this.settingsManager.get()('oai_api_key'),
         };
     }
-    async send(req) {
+    async send(req, opts) {
         return await this.httpAPICaller.exec({
             authorizationHeader: {
-                value: this.s().oai_api_key,
+                value: opts?.auth?.apiKey ?? this.s().oai_api_key,
                 prefix: 'Bearer',
             },
             errBuilder: async (error) => error.error.message,

package/dist/esm/target/lib/react/UCOutputFieldValueFragment.d.ts

@@ -1,8 +1,9 @@
 import { type ReactElement } from 'react';
 import type { DataType } from '../../../dt/index.js';
 import type { UCOPIBase, UCOutputField } from '../../../uc/index.js';
-export interface Props<OPI extends UCOPIBase, T extends DataType> {
+import type { Stylable } from './common.js';
+export type Props<OPI extends UCOPIBase, T extends DataType> = Stylable & {
     field: UCOutputField<OPI, T>;
     value: T;
-}
+};
 export declare function UCOutputFieldValueFragment<OPI extends UCOPIBase, T extends DataType>({ field, value }: Props<OPI, T>): ReactElement;

package/dist/esm/target/lib/react/common.d.ts

@@ -0,0 +1,6 @@
+export interface Stylable {
+    /**
+     * Although it's not applicable to all the targets (e.g. React Native), we generalize `className` to make it more convenient for targets that accept it as it is a pretty common and standard property
+     */
+    className?: string;
+}

package/dist/esm/target/lib/react/common.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/target/lib/react/form.d.ts

@@ -2,32 +2,33 @@ import type { ReactElement } from 'react';
 import type { DataType, ErrorMessage } from '../../../dt/index.js';
 import type { I18nManager } from '../../../std/index.js';
 import type { UCInput, UCInputField, UCInputFieldChangeOperator, UCInputFieldValue, UCOPIBase } from '../../../uc/index.js';
+import type { Stylable } from './common.js';
 import type { UCPanelCtx, UCPanelOnSubmit, UCPanelState } from './panel.js';
 export type UCFormFieldControlOnChange<T extends DataType = DataType> = (f: UCInputField<T>, op: UCInputFieldChangeOperator, v: UCInputFieldValue<T>) => void;
-export type UCFormFieldControlProps<T extends DataType> = UCPanelState & {
+export type UCFormFieldControlProps<T extends DataType> = Stylable & UCPanelState & {
     errMsg?: ErrorMessage | null;
     f: UCInputField<T>;
     onChange: UCFormFieldControlOnChange<T>;
 };
-export type UCFormFieldDescProps<T extends DataType> = {
+export type UCFormFieldDescProps<T extends DataType> = Stylable & {
     f: UCInputField<T>;
 };
-export type UCFormFieldErrProps = {
+export type UCFormFieldErrProps = Stylable & {
     errMsg?: ErrorMessage | null;
 };
-export type UCFormFieldLabelProps<T extends DataType> = {
+export type UCFormFieldLabelProps<T extends DataType> = Stylable & {
     f: UCInputField<T>;
 };
 export declare const UC_FORM_FIELD_ELEMENTS: readonly ["control", "desc", "err", "label"];
 export type UCFormFieldElement = (typeof UC_FORM_FIELD_ELEMENTS)[number];
-export type UCFormFieldProps<T extends DataType> = UCFormFieldControlProps<T> & {
+export type UCFormFieldProps<T extends DataType> = Stylable & UCFormFieldControlProps<T> & {
     only?: UCFormFieldElement[];
 };
-export type UCFormProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = UCPanelCtx<I, OPI0, OPI1> & {
+export type UCFormProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = Stylable & UCPanelCtx<I, OPI0, OPI1> & {
     onChange: UCFormFieldControlOnChange;
     onSubmit: UCPanelOnSubmit;
 };
-export type UCFormSubmitControlProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = UCPanelCtx<I, OPI0, OPI1> & {
+export type UCFormSubmitControlProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = Stylable & UCPanelCtx<I, OPI0, OPI1> & {
     onPress?: () => Promise<void>;
 };
 export type RenderUCForm<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = (props: UCFormProps<I, OPI0, OPI1>) => ReactElement;

package/dist/esm/target/lib/react/touchable.d.ts

@@ -1,12 +1,13 @@
 import type { ReactElement } from 'react';
 import type { UCInput, UCOPIBase, UCWording } from '../../../uc/index.js';
+import type { Stylable } from './common.js';
 import type { UCEntrypointCtx } from './entrypoint.js';
 import type { UCPanelCtx, UCPanelOnSubmit } from './panel.js';
-export type UCEntrypointTouchableProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = UCEntrypointCtx<I, OPI0, OPI1> & {
+export type UCEntrypointTouchableProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = Stylable & UCEntrypointCtx<I, OPI0, OPI1> & {
     wording: UCWording;
 };
 export type RenderUCEntrypointTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = (props: UCEntrypointTouchableProps<I, OPI0, OPI1>) => ReactElement;
-export type UCExecTouchableProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = UCPanelCtx<I, OPI0, OPI1> & {
+export type UCExecTouchableProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = Stylable & UCPanelCtx<I, OPI0, OPI1> & {
     onSubmit: UCPanelOnSubmit;
 };
 export type RenderUCExecTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = (props: UCExecTouchableProps<I, OPI0, OPI1>) => ReactElement;

package/dist/esm/target/lib/web/input.d.ts

@@ -8,9 +8,17 @@ export interface HTMLInputDef {
      */
     internal?: {
         /**
-         * When a fiels is `multiline`, you should probably render a `<textarea />` in place of an `<input />`.
+         * When checked is set, you should probably set `checked` or `defaultChecked` in uncontrolled components (react).
+         */
+        checked?: boolean | undefined;
+        /**
+         * When a field is `multiline`, you should probably render a `<textarea />` instead of an `<input />`.
          */
         multiline?: boolean | undefined;
+        /**
+         * When value is set, you should probably set `value` or `defaultValue` in uncontrolled components (react).
+         */
+        value?: string | undefined;
     };
     /**
      * Fields that are part of the W3C spec
@@ -28,6 +36,7 @@ export interface HTMLInputDef {
     spec?: {
         'aria-errormessage'?: string | undefined;
         'aria-invalid'?: boolean | undefined;
+        className?: string | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
         max?: number | undefined;
@@ -42,4 +51,4 @@ export interface HTMLInputDef {
         type?: HTMLInputType | undefined;
     };
 }
-export declare function htmlInputDef<T extends DataType>(field: UCInputField<T>, execState: UCExecState, errMsg: ErrorMessage | null): HTMLInputDef;
+export declare function htmlInputDef<T extends DataType>(field: UCInputField<T>, execState: UCExecState, errMsg: ErrorMessage | null, className: string | undefined): HTMLInputDef;

package/dist/esm/target/lib/web/input.js

@@ -1,6 +1,6 @@
-import { TNumber, TString, } from '../../../dt/index.js';
+import { TBoolean, TNumber, TString, } from '../../../dt/index.js';
 import { ucIsDisabled, ucifHint, ucifId, ucifIsMandatory, } from '../../../uc/index.js';
-export function htmlInputDef(field, execState, errMsg) {
+export function htmlInputDef(field, execState, errMsg, className) {
     const def = {
         internal: {},
         spec: {},
@@ -11,6 +11,7 @@ export function htmlInputDef(field, execState, errMsg) {
     }
     const { key, def: fDef } = field;
     const { type: fType } = fDef;
+    def.spec.className = className;
     def.spec.disabled = ucIsDisabled(execState);
     def.spec.id = ucifId(key);
     def.spec.name = key;
@@ -31,6 +32,12 @@ export function htmlInputDef(field, execState, errMsg) {
         def.spec.min = fType.min();
         def.spec.step = fType.getStep();
     }
+    else if (fType instanceof TBoolean) {
+        def.internal.checked = fType.getInitialValue() === true;
+    }
+    if (!(fType instanceof TBoolean)) {
+        def.internal.value = fType.getInitialValue()?.toString() || '';
+    }
     def.spec.placeholder = ucifHint(fDef);
     def.spec.required = ucifIsMandatory(fDef);
     def.spec.type = fType.htmlInputType();

package/dist/esm/target/react-web-pure/UCEntrypointTouchable.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { UCInput, UCOPIBase } from '../../uc/index.js';
 import type { UCEntrypointTouchableProps } from '../lib/react/touchable.js';
-export declare function UCEntrypointTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ path, wording }: UCEntrypointTouchableProps<I, OPI0, OPI1>): ReactElement;
+export declare function UCEntrypointTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ className, path, wording, }: UCEntrypointTouchableProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-web-pure/UCEntrypointTouchable.js

@@ -1,4 +1,4 @@
 import React, {} from 'react';
-export function UCEntrypointTouchable({ path, wording }) {
-    return (React.createElement("a", { href: path, title: wording.desc ?? undefined }, wording.label));
+export function UCEntrypointTouchable({ className, path, wording, }) {
+    return (React.createElement("a", { className: className, href: path, title: wording.desc ?? undefined }, wording.label));
 }

package/dist/esm/target/react-web-pure/UCExecTouchable.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { UCInput, UCOPIBase } from '../../uc/index.js';
 import type { UCExecTouchableProps } from '../lib/react/touchable.js';
-export declare function UCExecTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ disabled, execState, onSubmit, uc, }: UCExecTouchableProps<I, OPI0, OPI1>): ReactElement;
+export declare function UCExecTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ className, disabled, execState, onSubmit, uc, }: UCExecTouchableProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-web-pure/UCExecTouchable.js

@@ -1,7 +1,7 @@
 import React, {} from 'react';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCExecTouchable({ disabled, execState, onSubmit, uc, }) {
+export function UCExecTouchable({ className, disabled, execState, onSubmit, uc, }) {
     const { wordingManager } = useDIContext();
     const label = wordingManager.ucISubmit(uc.def, execState);
-    return (React.createElement("button", { disabled: disabled, onClick: onSubmit, type: "button" }, label));
+    return (React.createElement("button", { className: className, disabled: disabled, onClick: onSubmit, type: "button" }, label));
 }

package/dist/esm/target/react-web-pure/UCForm.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { UCInput, UCOPIBase } from '../../uc/index.js';
 import type { UCFormProps } from '../lib/react/form.js';
-export declare function UCForm<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ clearAfterExec, disabled, execState, onChange, onSubmit: onSubmitBase, uc, }: UCFormProps<I, OPI0, OPI1>): ReactElement;
+export declare function UCForm<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ className, clearAfterExec, disabled, execState, onChange, onSubmit: onSubmitBase, uc, }: UCFormProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-web-pure/UCForm.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { UCFormField } from './UCFormField.js';
 import { UCFormSubmitControl } from './UCFormSubmitControl.js';
-export function UCForm({ clearAfterExec, disabled, execState, onChange, onSubmit: onSubmitBase, uc, }) {
+export function UCForm({ className, clearAfterExec, disabled, execState, onChange, onSubmit: onSubmitBase, uc, }) {
     const formRef = useRef(null);
     const onSubmit = async (e) => {
         e.preventDefault();
@@ -10,8 +10,7 @@ export function UCForm({ clearAfterExec, disabled, execState, onChange, onSubmit
             formRef.current?.reset();
         }
     };
-    return (React.createElement("form", { onSubmit: onSubmit, ref: formRef },
-        uc.inputFieldsForForm().map((f) => (React.createElement("div", { key: f.key },
-            React.createElement(UCFormField, { disabled: disabled, execState: execState, f: f, onChange: onChange })))),
+    return (React.createElement("form", { className: className, onSubmit: onSubmit, ref: formRef },
+        uc.inputFieldsForForm().map((f) => (React.createElement(UCFormField, { key: f.key, disabled: disabled, execState: execState, f: f, onChange: onChange }))),
         React.createElement(UCFormSubmitControl, { execState: execState, disabled: disabled, uc: uc })));
 }

package/dist/esm/target/react-web-pure/UCFormField.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { DataType } from '../../dt/index.js';
 import { type UCFormFieldProps } from '../lib/react/form.js';
-export declare function UCFormField<T extends DataType>({ disabled, execState, f, onChange: onChangeBase, only, }: UCFormFieldProps<T>): ReactElement;
+export declare function UCFormField<T extends DataType>({ className, disabled, execState, f, onChange: onChangeBase, only, }: UCFormFieldProps<T>): ReactElement;

package/dist/esm/target/react-web-pure/UCFormField.js

@@ -5,7 +5,7 @@ import { UCFormFieldControl } from './UCFormFieldControl.js';
 import { UCFormFieldDesc } from './UCFormFieldDesc.js';
 import { UCFormFieldErr } from './UCFormFieldErr.js';
 import { UCFormFieldLabel } from './UCFormFieldLabel.js';
-export function UCFormField({ disabled, execState, f, onChange: onChangeBase, only, }) {
+export function UCFormField({ className, disabled, execState, f, onChange: onChangeBase, only, }) {
     const { i18nManager } = useDIContext();
     const [errMsg, setErrMsg] = useState(null);
     const onChange = (f, op, v) => {
@@ -13,7 +13,7 @@ export function UCFormField({ disabled, execState, f, onChange: onChangeBase, on
         onChangeBase(f, op, v);
     };
     const elements = only ?? UC_FORM_FIELD_ELEMENTS;
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement("div", { className: className },
         elements.includes('label') && React.createElement(UCFormFieldLabel, { f: f }),
         elements.includes('control') && (React.createElement(UCFormFieldControl, { disabled: disabled, execState: execState, f: f, onChange: onChange })),
         elements.includes('err') && errMsg && (React.createElement(UCFormFieldErr, { errMsg: errMsg })),

package/dist/esm/target/react-web-pure/UCFormFieldControl.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { DataType } from '../../dt/index.js';
 import type { UCFormFieldControlProps } from '../lib/react/form.js';
-export declare function UCFormFieldControl<T extends DataType>({ errMsg, execState, f, onChange: onChangeBase, }: UCFormFieldControlProps<T>): ReactElement;
+export declare function UCFormFieldControl<T extends DataType>({ className, errMsg, execState, f, onChange: onChangeBase, }: UCFormFieldControlProps<T>): ReactElement;

package/dist/esm/target/react-web-pure/UCFormFieldControl.js

@@ -4,8 +4,8 @@ import { htmlInputDef } from '../lib/web/input.js';
 const CHECKED_FIELD_TYPES = ['checkbox', 'radio'];
 const FILE_FIELD_TYPES = ['file'];
 const MULTIPLE_VALUES_SEPARATOR = ',';
-export function UCFormFieldControl({ errMsg = null, execState, f, onChange: onChangeBase, }) {
-    const attrs = htmlInputDef(f, execState, errMsg);
+export function UCFormFieldControl({ className, errMsg = null, execState, f, onChange: onChangeBase, }) {
+    const attrs = htmlInputDef(f, execState, errMsg, className);
     const onChange = (e) => {
         const target = e.currentTarget;
         const type = target.type;
@@ -33,17 +33,19 @@ export function UCFormFieldControl({ errMsg = null, execState, f, onChange: onCh
             onChangeBase(f, UCInputFieldChangeOperator.SET, value);
         }
     };
+    const defaultChecked = attrs.internal?.checked;
+    const defaultValue = attrs.internal?.value;
     if (attrs.internal?.multiline) {
-        return React.createElement("textarea", { ...attrs.spec, onChange: onChange });
+        return (React.createElement("textarea", { ...attrs.spec, defaultValue: defaultValue, onChange: onChange }));
     }
     const { type } = f.def;
     const options = type.getOptions();
     if (options) {
         // TODO : Handle type.hasStrictOptions() => display an input text alongside the select
         // TODO : Consider using a radio and/or checkbox and/or selectable buttons when the options count < X
-        return (React.createElement("select", { ...attrs.spec, onChange: onChange },
+        return (React.createElement("select", { ...attrs.spec, defaultValue: defaultValue, onChange: onChange },
             React.createElement("option", null),
             options.map((o) => (React.createElement("option", { key: o.value.toString(), value: o.value.toString() }, o.label)))));
     }
-    return React.createElement("input", { ...attrs.spec, onChange: onChange });
+    return (React.createElement("input", { ...attrs.spec, defaultChecked: defaultChecked, defaultValue: defaultValue, onChange: onChange }));
 }

package/dist/esm/target/react-web-pure/UCFormFieldDesc.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { DataType } from '../../dt/index.js';
 import type { UCFormFieldDescProps } from '../lib/react/form.js';
-export declare function UCFormFieldDesc<T extends DataType>({ f, }: UCFormFieldDescProps<T>): ReactElement | null;
+export declare function UCFormFieldDesc<T extends DataType>({ className, f, }: UCFormFieldDescProps<T>): ReactElement | null;

package/dist/esm/target/react-web-pure/UCFormFieldDesc.js

@@ -1,10 +1,10 @@
 import React, {} from 'react';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCFormFieldDesc({ f, }) {
+export function UCFormFieldDesc({ className, f, }) {
     const { wordingManager } = useDIContext();
     const { desc } = wordingManager.ucif(f);
     if (!desc) {
         return null;
     }
-    return React.createElement("div", null, desc);
+    return React.createElement("div", { className: className }, desc);
 }

package/dist/esm/target/react-web-pure/UCFormFieldErr.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { UCFormFieldErrProps } from '../lib/react/form.js';
-export declare function UCFormFieldErr({ errMsg }: UCFormFieldErrProps): ReactElement;
+export declare function UCFormFieldErr({ className, errMsg, }: UCFormFieldErrProps): ReactElement;

package/dist/esm/target/react-web-pure/UCFormFieldErr.js

@@ -1,4 +1,4 @@
 import React, {} from 'react';
-export function UCFormFieldErr({ errMsg }) {
-    return React.createElement("div", null, errMsg);
+export function UCFormFieldErr({ className, errMsg, }) {
+    return React.createElement("div", { className: className }, errMsg);
 }

package/dist/esm/target/react-web-pure/UCFormFieldLabel.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { DataType } from '../../dt/index.js';
 import type { UCFormFieldLabelProps } from '../lib/react/form.js';
-export declare function UCFormFieldLabel<T extends DataType>({ f, }: UCFormFieldLabelProps<T>): ReactElement;
+export declare function UCFormFieldLabel<T extends DataType>({ className, f, }: UCFormFieldLabelProps<T>): ReactElement;

package/dist/esm/target/react-web-pure/UCFormFieldLabel.js

@@ -1,8 +1,8 @@
 import React, {} from 'react';
 import { ucifId } from '../../uc/index.js';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCFormFieldLabel({ f, }) {
+export function UCFormFieldLabel({ className, f, }) {
     const { wordingManager } = useDIContext();
     const { label } = wordingManager.ucif(f);
-    return React.createElement("label", { htmlFor: ucifId(f.key) }, label);
+    return (React.createElement("label", { className: className, htmlFor: ucifId(f.key) }, label));
 }

package/dist/esm/target/react-web-pure/UCFormSubmitControl.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { UCInput, UCOPIBase } from '../../uc/index.js';
 import type { UCFormSubmitControlProps } from '../lib/react/form.js';
-export declare function UCFormSubmitControl<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ execState, disabled, uc, }: UCFormSubmitControlProps<I, OPI0, OPI1>): ReactElement;
+export declare function UCFormSubmitControl<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ className, execState, disabled, uc, }: UCFormSubmitControlProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-web-pure/UCFormSubmitControl.js

@@ -1,6 +1,6 @@
 import React, {} from 'react';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCFormSubmitControl({ execState, disabled, uc, }) {
+export function UCFormSubmitControl({ className, execState, disabled, uc, }) {
     const { wordingManager } = useDIContext();
-    return (React.createElement("input", { disabled: disabled, type: "submit", value: wordingManager.ucISubmit(uc.def, execState) }));
+    return (React.createElement("input", { className: className, disabled: disabled, type: "submit", value: wordingManager.ucISubmit(uc.def, execState) }));
 }

package/dist/esm/target/react-web-pure/UCOutputFieldValue.d.ts

@@ -2,4 +2,4 @@ import { type ReactElement } from 'react';
 import type { DataType } from '../../dt/index.js';
 import type { UCOPIBase } from '../../uc/index.js';
 import { type Props } from '../lib/react/UCOutputFieldValueFragment.js';
-export declare function UCOutputFieldValue<OPI extends UCOPIBase, T extends DataType>(props: Props<OPI, T>): ReactElement;
+export declare function UCOutputFieldValue<OPI extends UCOPIBase, T extends DataType>({ className, ...propsWithoutClassName }: Props<OPI, T>): ReactElement;

package/dist/esm/target/react-web-pure/UCOutputFieldValue.js

@@ -1,6 +1,6 @@
 import React, {} from 'react';
 import { UCOutputFieldValueFragment, } from '../lib/react/UCOutputFieldValueFragment.js';
-export function UCOutputFieldValue(props) {
-    return (React.createElement("span", null,
-        React.createElement(UCOutputFieldValueFragment, { ...props })));
+export function UCOutputFieldValue({ className, ...propsWithoutClassName }) {
+    return (React.createElement("span", { className: className },
+        React.createElement(UCOutputFieldValueFragment, { ...propsWithoutClassName })));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "libmodulor",
     "description": "A TypeScript library to create platform-agnostic applications",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "license": "LGPL-3.0",
     "author": "Chafik H'nini <chafik.hnini@gmail.com>",
     "homepage": "https://libmodulor.c100k.eu",