libmodulor 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v0.17.0 (2025-06-02)
+
+**BREAKING**
+
+- Make `target/react-native-pure` and `target/react-web-pure` components stylable : by using the new `<StyleContextProvider style={...style} />` you can customize how the elements render inside `<UCPanel />`. You can even use `renderFormFieldControl` to customize the form controls rendered according to the field (e.g. name, type, etc.)
+
 ## v0.16.0 (2025-05-27)
 
 **BREAKING**

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.16.0/LICENSE)
+[LGPL-3.0](https://github.com/c100k/libmodulor/blob/v0.17.0/LICENSE)

package/dist/esm/index.react.d.ts

@@ -1,4 +1,5 @@
-export { DIContext, useDIContext, DIContextProvider, type DIContextT, } from './target/lib/react/DIContextProvider.js';
+export { DIContext, DIContextProvider, type DIContextT, useDIContext, } from './target/lib/react/DIContextProvider.js';
+export { StyleContext, StyleContextProvider, type StyleContextT, styleDef, useStyleContext, } from './target/lib/react/StyleContextProvider.js';
 export type { UCFormFieldControlOnChange, UCFormFieldControlProps, UCFormFieldDescProps, UCFormFieldElement, UCFormFieldErrProps, UCFormFieldLabelProps, UCFormFieldProps, UCFormProps, UCFormSubmitControlProps, UC_FORM_FIELD_ELEMENTS, RenderUCForm, validateFormField, } from './target/lib/react/form.js';
 export type { UCPanelCtx, UCPanelOnDone, UCPanelOnError, UCPanelOnInit, UCPanelOnStartSubmitting, UCPanelOnSubmit, UCPanelState, } from './target/lib/react/panel.js';
 export type { UCEntrypointTouchableProps, RenderUCEntrypointTouchable, RenderUCExecTouchable, UCExecTouchableProps, } from './target/lib/react/touchable.js';

package/dist/esm/index.react.js

@@ -1,4 +1,5 @@
-export { DIContext, useDIContext, DIContextProvider, } from './target/lib/react/DIContextProvider.js';
+export { DIContext, DIContextProvider, useDIContext, } from './target/lib/react/DIContextProvider.js';
+export { StyleContext, StyleContextProvider, styleDef, useStyleContext, } from './target/lib/react/StyleContextProvider.js';
 export { UCContainer } from './target/lib/react/UCContainer.js';
 export { UCEntrypoint } from './target/lib/react/UCEntrypoint.js';
 export { UCOutputFieldValueFragment, } from './target/lib/react/UCOutputFieldValueFragment.js';

package/dist/esm/index.rn.d.ts

@@ -1,2 +1,3 @@
 export { BufferLibBufferManager } from './std/impl/BufferLibBufferManager.js';
+export { RNUCClientConfirmManager } from './uc/impl/RNUCClientConfirmManager.js';
 export { bindRN } from './utils/ioc/bindRN.js';

package/dist/esm/index.rn.js

@@ -1,2 +1,3 @@
 export { BufferLibBufferManager } from './std/impl/BufferLibBufferManager.js';
+export { RNUCClientConfirmManager } from './uc/impl/RNUCClientConfirmManager.js';
 export { bindRN } from './utils/ioc/bindRN.js';

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

@@ -9,8 +9,6 @@ export interface DIContextT {
 }
 export declare const DIContext: React.Context<DIContextT | null>;
 export declare function useDIContext(): DIContextT;
-interface Props {
-    container: Container;
-}
+type Props = Pick<DIContextT, 'container'>;
 export declare function DIContextProvider({ children, container, }: PropsWithChildren<Props>): ReactElement;
 export {};

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

@@ -0,0 +1,32 @@
+import React, { type PropsWithChildren, type ReactElement } from 'react';
+import type { Color, DataType } from '../../../dt/index.js';
+import type { UCFormFieldControlProps } from './form.js';
+export interface StyleDef {
+    className?: string | undefined;
+    style?: Record<string, unknown> | undefined;
+}
+export type SelectiveStyleDefKey = 'default' | (string & {});
+export interface StyleContextT {
+    autoExecLoader?: StyleDef | undefined;
+    colors?: {
+        onPrimary: Color;
+        primary: Color;
+    };
+    entrypointTouchable?: StyleDef | undefined;
+    execTouchable?: StyleDef | undefined;
+    form?: StyleDef | undefined;
+    formField?: StyleDef | undefined;
+    formFieldControl?: Record<SelectiveStyleDefKey, StyleDef | undefined>;
+    formFieldDesc?: StyleDef | undefined;
+    formFieldErr?: StyleDef | undefined;
+    formFieldLabel?: StyleDef | undefined;
+    formSubmitControl?: StyleDef | undefined;
+    outputFieldValue?: StyleDef | undefined;
+    renderFormFieldControl?: <T extends DataType>(props: UCFormFieldControlProps<T>) => ReactElement | null;
+}
+export declare const StyleContext: React.Context<StyleContextT>;
+export declare function useStyleContext(): StyleContextT;
+type Props = StyleContextT;
+export declare function StyleContextProvider({ children, ...rest }: PropsWithChildren<Props>): ReactElement;
+export declare function styleDef(def: StyleContextT['formFieldControl'], k1: SelectiveStyleDefKey, fallback?: SelectiveStyleDefKey | undefined): StyleDef;
+export {};

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

@@ -0,0 +1,16 @@
+import React, { createContext, useContext, } from 'react';
+export const StyleContext = createContext({});
+export function useStyleContext() {
+    return useContext(StyleContext);
+}
+export function StyleContextProvider({ children, ...rest }) {
+    return (React.createElement(StyleContext.Provider, { value: rest }, children));
+}
+export function styleDef(def, k1, fallback) {
+    const main = def?.[k1];
+    const fb = fallback ? def?.[fallback] : null;
+    return {
+        className: main?.className ?? fb?.className,
+        style: main?.style ?? fb?.style,
+    };
+}

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

@@ -5,5 +5,5 @@ import type { RenderUCEntrypointTouchable } from './touchable.js';
 type Props<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = UCEntrypointCtx<I, OPI0, OPI1> & {
     renderTouchable: RenderUCEntrypointTouchable<I, OPI0, OPI1>;
 };
-export declare function UCEntrypoint<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ path, renderTouchable, uc }: Props<I, OPI0, OPI1>): ReactElement;
+export declare function UCEntrypoint<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ onPress, path, renderTouchable, uc }: Props<I, OPI0, OPI1>): ReactElement;
 export {};

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

@@ -1,8 +1,8 @@
 import React, {} from 'react';
 import { useDIContext } from './DIContextProvider.js';
 import { UCContainer } from './UCContainer.js';
-export function UCEntrypoint({ path, renderTouchable, uc }) {
+export function UCEntrypoint({ onPress, path, renderTouchable, uc }) {
     const { wordingManager } = useDIContext();
     const wording = wordingManager.uc(uc.def);
-    return (React.createElement(UCContainer, { uc: uc }, renderTouchable({ path, uc, wording })));
+    return (React.createElement(UCContainer, { uc: uc }, renderTouchable({ onPress, path, uc, wording })));
 }

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

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

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

@@ -1,6 +1,6 @@
 import React, {} from 'react';
-export function UCOutputFieldValueFragment({ field, value }) {
-    const { def: { type }, } = field;
+export function UCOutputFieldValueFragment({ f, value }) {
+    const { def: { type }, } = f;
     type.assign(value);
     return React.createElement(React.Fragment, null, type.fmt());
 }

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ucIsDisabled, ucIsLoading, } from '../../../uc/index.js';
+import { ucIsDisabled, } from '../../../uc/index.js';
 import { sleep } from '../../../utils/index.js';
 import { useDIContext } from './DIContextProvider.js';
 import { UCContainer } from './UCContainer.js';
@@ -35,28 +35,25 @@ export function UCPanel({ autoExec = false, clearAfterExec = true, onDone, onErr
         }
         uc.clear();
     };
-    const disabled = ucIsDisabled(execState);
-    const loading = ucIsLoading(execState);
-    // TODO : Keep these as a state to avoid recomputation
+    const needsInputFilling = uc.needsInputFilling();
     const ctx = {
         clearAfterExec,
-        disabled,
+        disabled: ucIsDisabled(execState),
         execState,
         uc,
     };
-    const needsInputFilling = uc.needsInputFilling();
     return (React.createElement(UCContainer, { uc: uc },
-        autoExec && loading && renderAutoExecLoader(),
+        autoExec && ctx.disabled && renderAutoExecLoader(),
         !autoExec && (React.createElement(React.Fragment, null,
-            !needsInputFilling &&
-                renderExecTouchable({
-                    ...ctx,
-                    onSubmit: exec,
-                }),
             needsInputFilling &&
                 renderForm({
                     ...ctx,
                     onChange,
                     onSubmit: exec,
+                }),
+            !needsInputFilling &&
+                renderExecTouchable({
+                    ...ctx,
+                    onSubmit: exec,
                 })))));
 }

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

@@ -2,7 +2,7 @@ import type { URLPath } from '../../../dt/index.js';
 import type { UC, UCInput, UCOPIBase } from '../../../uc/index.js';
 export type UCEntrypointOnPress = () => Promise<void>;
 export interface UCEntrypointCtx<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> {
-    onPress?: UCEntrypointOnPress;
+    onPress?: UCEntrypointOnPress | undefined;
     path?: URLPath | undefined;
     uc: UC<I, OPI0, OPI1>;
 }

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

@@ -2,33 +2,32 @@ 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> = Stylable & UCPanelState & {
+export type UCFormFieldControlProps<T extends DataType> = UCPanelState & {
     errMsg?: ErrorMessage | null;
     f: UCInputField<T>;
     onChange: UCFormFieldControlOnChange<T>;
 };
-export type UCFormFieldDescProps<T extends DataType> = Stylable & {
+export interface UCFormFieldDescProps<T extends DataType> {
     f: UCInputField<T>;
-};
-export type UCFormFieldErrProps = Stylable & {
+}
+export interface UCFormFieldErrProps {
     errMsg?: ErrorMessage | null;
-};
-export type UCFormFieldLabelProps<T extends DataType> = Stylable & {
+}
+export interface UCFormFieldLabelProps<T extends DataType> {
     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> = Stylable & UCFormFieldControlProps<T> & {
+export type UCFormFieldProps<T extends DataType> = UCFormFieldControlProps<T> & {
     only?: UCFormFieldElement[];
 };
-export type UCFormProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = Stylable & UCPanelCtx<I, OPI0, OPI1> & {
+export type UCFormProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = 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> = Stylable & UCPanelCtx<I, OPI0, OPI1> & {
+export type UCFormSubmitControlProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = 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/form.js

@@ -1,3 +1,4 @@
+import { isBlank } from '../../../utils/index.js';
 export const UC_FORM_FIELD_ELEMENTS = [
     'control',
     'desc',
@@ -5,6 +6,9 @@ export const UC_FORM_FIELD_ELEMENTS = [
     'label',
 ];
 export function validateFormField(i18nManager, f, v) {
+    if (isBlank(v)) {
+        return null;
+    }
     const vArr = Array.isArray(v) ? v : [v];
     for (const vv of vArr) {
         const validation = f.def.type.assign(vv).validate();

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

@@ -1,13 +1,12 @@
 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> = Stylable & UCEntrypointCtx<I, OPI0, OPI1> & {
+export type UCEntrypointTouchableProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = 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> = Stylable & UCPanelCtx<I, OPI0, OPI1> & {
+export type UCExecTouchableProps<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = 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/react/useAction.d.ts

@@ -1,5 +1,5 @@
 import type { ErrorMessage, UIntDuration } from '../../../dt/index.js';
-import type { UCExecRes, UCExecState } from '../../../uc/exec.js';
+import type { UCExecRes, UCExecState } from '../../../uc/index.js';
 export type UseActionAction = () => Promise<void>;
 export type UseActionConfirm = () => Promise<boolean>;
 export type UseActionExec = () => Promise<UCExecRes>;

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

@@ -4,15 +4,20 @@ export function useAction({ action, autoExec = false, confirm, onError, onInit,
     const [errMsg, setErrMsg] = useState(null);
     const [execRes, setExecRes] = useState(null);
     const [execState, setExecState] = useState(onInit ? 'initializing' : 'idle');
+    // biome-ignore lint/correctness/useExhaustiveDependencies : must run only once
     useEffect(() => {
-        if (execState !== 'initializing') {
-            return;
-        }
         (async () => {
-            await onInit?.();
-            setExecState('idle');
+            if (execState === 'initializing') {
+                await onInit?.();
+            }
+            if (autoExec) {
+                await exec();
+            }
+            else {
+                setExecState('idle');
+            }
         })();
-    }, [execState, onInit]);
+    }, []);
     const exec = async () => {
         setErrMsg(null);
         setExecRes(null);
@@ -46,12 +51,5 @@ export function useAction({ action, autoExec = false, confirm, onError, onInit,
             setExecState('idle');
         }
     };
-    // biome-ignore lint/correctness/useExhaustiveDependencies(exec): it complains if I add it AND if I don't add it !
-    useEffect(() => {
-        if (!autoExec) {
-            return;
-        }
-        exec();
-    }, [autoExec]);
     return { errMsg, exec, execRes, execState };
 }

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

@@ -1,6 +1,6 @@
 import type { TextInputProps } from 'react-native';
 import { type DataType, type ErrorMessage } from '../../../dt/index.js';
-import { type UCExecState, type UCInputField } from '../../../uc/index.js';
+import { type UCInputField } from '../../../uc/index.js';
 export interface RNInputDef {
     internal?: undefined;
     /**
@@ -12,4 +12,4 @@ export interface RNInputDef {
      */
     spec?: TextInputProps;
 }
-export declare function rnInputDef<T extends DataType>(field: UCInputField<T>, execState: UCExecState, _errMsg: ErrorMessage | null): RNInputDef;
+export declare function rnInputDef<T extends DataType>(field: UCInputField<T>, disabled: boolean, _errMsg: ErrorMessage | null): RNInputDef;

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

@@ -1,6 +1,6 @@
 import { TString, } from '../../../dt/index.js';
-import { ucIsDisabled, ucifHint, ucifId, } from '../../../uc/index.js';
-export function rnInputDef(field, execState, _errMsg) {
+import { ucifHint, ucifId } from '../../../uc/index.js';
+export function rnInputDef(field, disabled, _errMsg) {
     const def = {
         internal: undefined,
         spec: {},
@@ -11,7 +11,7 @@ export function rnInputDef(field, execState, _errMsg) {
     }
     const { key, def: fDef } = field;
     const { type: fType } = fDef;
-    def.spec.editable = !ucIsDisabled(execState);
+    def.spec.editable = !disabled;
     def.spec.id = ucifId(key);
     // Testing the types by usage probability to make the if/else evaluation stop ideally earlier
     if (fType instanceof TString) {

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

@@ -1,5 +1,5 @@
 import { type DataType, type ErrorMessage, type HTMLInputType } from '../../../dt/index.js';
-import { type UCExecState, type UCInputField } from '../../../uc/index.js';
+import { type UCInputField } from '../../../uc/index.js';
 export interface HTMLInputDef {
     /**
      * Internal types that are not part of the W3C spec
@@ -36,7 +36,6 @@ export interface HTMLInputDef {
     spec?: {
         'aria-errormessage'?: string | undefined;
         'aria-invalid'?: boolean | undefined;
-        className?: string | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
         max?: number | undefined;
@@ -51,4 +50,4 @@ export interface HTMLInputDef {
         type?: HTMLInputType | undefined;
     };
 }
-export declare function htmlInputDef<T extends DataType>(field: UCInputField<T>, execState: UCExecState, errMsg: ErrorMessage | null, className: string | undefined): HTMLInputDef;
+export declare function htmlInputDef<T extends DataType>(field: UCInputField<T>, disabled: boolean, errMsg: ErrorMessage | null): HTMLInputDef;

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

@@ -1,6 +1,6 @@
 import { TBoolean, TNumber, TString, } from '../../../dt/index.js';
-import { ucIsDisabled, ucifHint, ucifId, ucifIsMandatory, } from '../../../uc/index.js';
-export function htmlInputDef(field, execState, errMsg, className) {
+import { ucifHint, ucifId, ucifIsMandatory, } from '../../../uc/index.js';
+export function htmlInputDef(field, disabled, errMsg) {
     const def = {
         internal: {},
         spec: {},
@@ -11,8 +11,7 @@ export function htmlInputDef(field, execState, errMsg, className) {
     }
     const { key, def: fDef } = field;
     const { type: fType } = fDef;
-    def.spec.className = className;
-    def.spec.disabled = ucIsDisabled(execState);
+    def.spec.disabled = disabled;
     def.spec.id = ucifId(key);
     def.spec.name = key;
     // Testing the types by usage probability to make the if/else evaluation stop ideally earlier

package/dist/esm/target/react-native-pure/UCAutoExecLoader.js

@@ -1,5 +1,7 @@
 import React, {} from 'react';
 import { ActivityIndicator } from 'react-native';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCAutoExecLoader() {
-    return React.createElement(ActivityIndicator, null);
+    const { autoExecLoader } = useStyleContext();
+    return React.createElement(ActivityIndicator, { style: autoExecLoader?.style });
 }

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

@@ -1,6 +1,8 @@
 import React, {} from 'react';
 import { Pressable, Text } from 'react-native';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCEntrypointTouchable({ onPress, wording, }) {
+    const { entrypointTouchable } = useStyleContext();
     return (React.createElement(Pressable, { onPress: onPress },
-        React.createElement(Text, null, wording.label)));
+        React.createElement(Text, { style: entrypointTouchable?.style }, wording.label)));
 }

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

@@ -1,9 +1,11 @@
 import React, {} from 'react';
 import { Pressable, Text } from 'react-native';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCExecTouchable({ disabled, execState, onSubmit, uc, }) {
     const { wordingManager } = useDIContext();
+    const { execTouchable } = useStyleContext();
     const label = wordingManager.ucISubmit(uc.def, execState);
     return (React.createElement(Pressable, { disabled: disabled, onPress: onSubmit },
-        React.createElement(Text, null, label)));
+        React.createElement(Text, { style: execTouchable?.style }, label)));
 }

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

@@ -1,13 +1,14 @@
 import React, {} from 'react';
 import { View } from 'react-native';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 import { UCFormField } from './UCFormField.js';
 import { UCFormSubmitControl } from './UCFormSubmitControl.js';
 export function UCForm({ disabled, execState, onChange, onSubmit, uc, }) {
+    const { form } = useStyleContext();
     const onPress = async () => {
         await onSubmit();
     };
-    return (React.createElement(View, null,
-        uc.inputFieldsForForm().map((f) => (React.createElement(View, { key: f.key },
-            React.createElement(UCFormField, { disabled: disabled, execState: execState, f: f, onChange: onChange })))),
+    return (React.createElement(View, { style: form?.style },
+        uc.inputFieldsForForm().map((f) => (React.createElement(UCFormField, { disabled: disabled, execState: execState, f: f, key: f.key, onChange: onChange }))),
         React.createElement(UCFormSubmitControl, { execState: execState, disabled: disabled, onPress: onPress, uc: uc })));
 }

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

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
+import { View } from 'react-native';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 import { UC_FORM_FIELD_ELEMENTS, validateFormField, } from '../lib/react/form.js';
 import { UCFormFieldControl } from './UCFormFieldControl.js';
 import { UCFormFieldDesc } from './UCFormFieldDesc.js';
@@ -7,13 +9,14 @@ import { UCFormFieldErr } from './UCFormFieldErr.js';
 import { UCFormFieldLabel } from './UCFormFieldLabel.js';
 export function UCFormField({ disabled, execState, f, onChange: onChangeBase, only, }) {
     const { i18nManager } = useDIContext();
+    const { formField } = useStyleContext();
     const [errMsg, setErrMsg] = useState(null);
     const onChange = (f, op, v) => {
         setErrMsg(validateFormField(i18nManager, f, v));
         onChangeBase(f, op, v);
     };
     const elements = only ?? UC_FORM_FIELD_ELEMENTS;
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(View, { style: formField?.style },
         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-native-pure/UCFormFieldControl.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
-import type { DataType } from '../../dt/index.js';
+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>({ disabled, errMsg, execState, f, onChange: onChangeBase, }: UCFormFieldControlProps<T>): ReactElement;

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

@@ -1,16 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { TextInput } from 'react-native';
+import { FlatList, Pressable, StyleSheet, Switch, Text, TextInput, } from 'react-native';
+import { TBoolean } from '../../dt/index.js';
 import { UCInputFieldChangeOperator, ucifRepeatability, } from '../../uc/index.js';
 import { isBlank } from '../../utils/index.js';
+import { styleDef, useStyleContext, } from '../lib/react/StyleContextProvider.js';
 import { rnInputDef } from '../lib/rn/input.js';
 const MULTIPLE_VALUES_SEPARATOR = ',';
-export function UCFormFieldControl({ errMsg = null, execState, f, onChange: onChangeBase, }) {
+// TODO : Split this into smaller components
+export function UCFormFieldControl({ disabled, errMsg = null, execState, f, onChange: onChangeBase, }) {
+    const { colors, formFieldControl, renderFormFieldControl } = useStyleContext();
+    const component = renderFormFieldControl?.({
+        disabled,
+        errMsg,
+        execState,
+        f,
+        onChange: onChangeBase,
+    });
+    if (component) {
+        return component;
+    }
     const [internalValue, setInternalValue] = useState(f.getValue());
-    // biome-ignore lint/correctness/useExhaustiveDependencies: false positive : It is actually necessary (only `field` does not trigger the effect)
+    // biome-ignore lint/correctness/useExhaustiveDependencies: false positive : It is actually necessary (only `f` does not trigger the effect)
     useEffect(() => {
         setInternalValue(f.getValue());
     }, [f.getValue()]);
-    const attrs = rnInputDef(f, execState, errMsg);
     const onChangeText = (value) => {
         const [isRepeatable] = ucifRepeatability(f.def);
         if (isRepeatable && typeof value === 'string') {
@@ -24,6 +37,40 @@ export function UCFormFieldControl({ errMsg = null, execState, f, onChange: onCh
         }
         setInternalValue(value);
     };
+    const onSelect = (value) => {
+        if (internalValue === value) {
+            onChangeBase(f, UCInputFieldChangeOperator.RESET, null);
+            setInternalValue(null);
+            return;
+        }
+        onChangeBase(f, UCInputFieldChangeOperator.SET, value);
+        setInternalValue(value);
+    };
+    const onValueChange = (value) => {
+        onChangeBase(f, UCInputFieldChangeOperator.SET, value);
+        setInternalValue(value);
+    };
+    const attrs = rnInputDef(f, disabled, errMsg);
+    const { type } = f.def;
+    const options = type.getOptions();
+    if (options) {
+        // TODO : Handle type.hasStrictOptions() => display an input text alongside the options
+        // TODO : Consider using a picker when the options count > X
+        return (React.createElement(FlatList, { data: options, horizontal: true, keyExtractor: (item) => item.value.toString(), renderItem: ({ item }) => (React.createElement(Pressable, { disabled: !attrs.spec?.editable, onPress: () => onSelect(item.value), style: [
+                    styles.selectOption,
+                    {
+                        borderColor: item.value === internalValue
+                            ? colors?.primary
+                            : 'transparent',
+                    },
+                ] },
+                React.createElement(Text, null, item.label))), showsHorizontalScrollIndicator: false, style: styles.select }));
+    }
+    // TODO : Implement picker for TFile (requires a dependency...)
+    if (type instanceof TBoolean) {
+        const { style } = styleDef(formFieldControl, 'Switch');
+        return (React.createElement(Switch, { disabled: !attrs.spec?.editable, trackColor: { true: colors?.primary }, onValueChange: onValueChange, style: style, value: internalValue }));
+    }
     let valueAsString = '';
     if (!isBlank(internalValue)) {
         if (Array.isArray(internalValue)) {
@@ -33,5 +80,15 @@ export function UCFormFieldControl({ errMsg = null, execState, f, onChange: onCh
             valueAsString = internalValue.toString();
         }
     }
-    return (React.createElement(TextInput, { ...attrs.spec, onChangeText: onChangeText, value: valueAsString }));
+    const { style } = styleDef(formFieldControl, 'TextInput', 'default');
+    return (React.createElement(TextInput, { ...attrs.spec, onChangeText: onChangeText, style: style, value: valueAsString }));
 }
+const styles = StyleSheet.create({
+    select: {
+        flexGrow: 0, // Prevent the list from extending full height
+    },
+    selectOption: {
+        padding: 2,
+        borderWidth: 1,
+    },
+});

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

@@ -1,11 +1,13 @@
 import React, {} from 'react';
 import { Text } from 'react-native';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCFormFieldDesc({ f, }) {
     const { wordingManager } = useDIContext();
+    const { formFieldDesc } = useStyleContext();
     const { desc } = wordingManager.ucif(f);
     if (!desc) {
         return null;
     }
-    return React.createElement(Text, null, desc);
+    return React.createElement(Text, { style: formFieldDesc?.style }, desc);
 }

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

@@ -1,5 +1,7 @@
 import React, {} from 'react';
 import { Text } from 'react-native';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCFormFieldErr({ errMsg }) {
-    return React.createElement(Text, null, errMsg);
+    const { formFieldErr } = useStyleContext();
+    return React.createElement(Text, { style: formFieldErr?.style }, errMsg);
 }

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

@@ -1,8 +1,14 @@
 import React, {} from 'react';
 import { Text } from 'react-native';
+import { ucifIsMandatory } from '../../uc/index.js';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCFormFieldLabel({ f, }) {
     const { wordingManager } = useDIContext();
+    const { formFieldLabel } = useStyleContext();
     const { label } = wordingManager.ucif(f);
-    return React.createElement(Text, null, label);
+    const mandatory = ucifIsMandatory(f.def);
+    return (React.createElement(Text, { style: formFieldLabel?.style },
+        label,
+        mandatory && ' *'));
 }

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

@@ -1,8 +1,10 @@
 import React, {} from 'react';
 import { Pressable, Text } from 'react-native';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCFormSubmitControl({ execState, disabled, onPress, uc, }) {
     const { wordingManager } = useDIContext();
-    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled },
-        React.createElement(Text, null, wordingManager.ucISubmit(uc.def, execState))));
+    const { formSubmitControl } = useStyleContext();
+    return (React.createElement(Pressable, { disabled: disabled, onPress: onPress },
+        React.createElement(Text, { style: formSubmitControl?.style }, wordingManager.ucISubmit(uc.def, execState))));
 }

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

@@ -1,7 +1,9 @@
 import React, {} from 'react';
 import { Text } from 'react-native';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 import { UCOutputFieldValueFragment, } from '../lib/react/UCOutputFieldValueFragment.js';
 export function UCOutputFieldValue(props) {
-    return (React.createElement(Text, null,
+    const { outputFieldValue } = useStyleContext();
+    return (React.createElement(Text, { style: outputFieldValue?.style },
         React.createElement(UCOutputFieldValueFragment, { ...props })));
 }

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

@@ -1,4 +1,6 @@
 import React, {} from 'react';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 export function UCAutoExecLoader() {
-    return React.createElement("div", null, "...");
+    const { autoExecLoader } = useStyleContext();
+    return (React.createElement("div", { className: autoExecLoader?.className, style: autoExecLoader?.style }, "..."));
 }

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>({ className, 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>({ path, wording }: UCEntrypointTouchableProps<I, OPI0, OPI1>): ReactElement;

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

@@ -1,4 +1,6 @@
 import React, {} from 'react';
-export function UCEntrypointTouchable({ className, path, wording, }) {
-    return (React.createElement("a", { className: className, href: path, title: wording.desc ?? undefined }, wording.label));
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
+export function UCEntrypointTouchable({ path, wording }) {
+    const { entrypointTouchable } = useStyleContext();
+    return (React.createElement("a", { className: entrypointTouchable?.className, href: path, style: entrypointTouchable?.style, 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>({ className, 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>({ disabled, execState, onSubmit, uc, }: UCExecTouchableProps<I, OPI0, OPI1>): ReactElement;

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

@@ -1,7 +1,9 @@
 import React, {} from 'react';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCExecTouchable({ className, disabled, execState, onSubmit, uc, }) {
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
+export function UCExecTouchable({ disabled, execState, onSubmit, uc, }) {
     const { wordingManager } = useDIContext();
+    const { execTouchable } = useStyleContext();
     const label = wordingManager.ucISubmit(uc.def, execState);
-    return (React.createElement("button", { className: className, disabled: disabled, onClick: onSubmit, type: "button" }, label));
+    return (React.createElement("button", { className: execTouchable?.className, disabled: disabled, onClick: onSubmit, style: execTouchable?.style, 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>({ className, 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>({ clearAfterExec, disabled, execState, onChange, onSubmit: onSubmitBase, uc, }: UCFormProps<I, OPI0, OPI1>): ReactElement;

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

@@ -1,7 +1,9 @@
 import React, { useRef } from 'react';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 import { UCFormField } from './UCFormField.js';
 import { UCFormSubmitControl } from './UCFormSubmitControl.js';
-export function UCForm({ className, clearAfterExec, disabled, execState, onChange, onSubmit: onSubmitBase, uc, }) {
+export function UCForm({ clearAfterExec, disabled, execState, onChange, onSubmit: onSubmitBase, uc, }) {
+    const { form } = useStyleContext();
     const formRef = useRef(null);
     const onSubmit = async (e) => {
         e.preventDefault();
@@ -10,7 +12,7 @@ export function UCForm({ className, clearAfterExec, disabled, execState, onChang
             formRef.current?.reset();
         }
     };
-    return (React.createElement("form", { className: className, onSubmit: onSubmit, ref: formRef },
+    return (React.createElement("form", { className: form?.className, onSubmit: onSubmit, ref: formRef, style: form?.style },
         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>({ className, disabled, execState, f, onChange: onChangeBase, only, }: UCFormFieldProps<T>): ReactElement;
+export declare function UCFormField<T extends DataType>({ disabled, execState, f, onChange: onChangeBase, only, }: UCFormFieldProps<T>): ReactElement;

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

@@ -1,19 +1,21 @@
 import React, { useState } from 'react';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 import { UC_FORM_FIELD_ELEMENTS, validateFormField, } from '../lib/react/form.js';
 import { UCFormFieldControl } from './UCFormFieldControl.js';
 import { UCFormFieldDesc } from './UCFormFieldDesc.js';
 import { UCFormFieldErr } from './UCFormFieldErr.js';
 import { UCFormFieldLabel } from './UCFormFieldLabel.js';
-export function UCFormField({ className, disabled, execState, f, onChange: onChangeBase, only, }) {
+export function UCFormField({ disabled, execState, f, onChange: onChangeBase, only, }) {
     const { i18nManager } = useDIContext();
+    const { formField } = useStyleContext();
     const [errMsg, setErrMsg] = useState(null);
     const onChange = (f, op, v) => {
         setErrMsg(validateFormField(i18nManager, f, v));
         onChangeBase(f, op, v);
     };
     const elements = only ?? UC_FORM_FIELD_ELEMENTS;
-    return (React.createElement("div", { className: className },
+    return (React.createElement("div", { className: formField?.className, style: formField?.style },
         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 DataType } from '../../dt/index.js';
 import type { UCFormFieldControlProps } from '../lib/react/form.js';
-export declare function UCFormFieldControl<T extends DataType>({ className, errMsg, execState, f, onChange: onChangeBase, }: UCFormFieldControlProps<T>): ReactElement;
+export declare function UCFormFieldControl<T extends DataType>({ disabled, errMsg, execState, f, onChange: onChangeBase, }: UCFormFieldControlProps<T>): ReactElement;

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

@@ -1,11 +1,25 @@
 import React, {} from 'react';
+import { TBoolean } from '../../dt/index.js';
 import { UCInputFieldChangeOperator, ucifRepeatability, } from '../../uc/index.js';
+import { styleDef, useStyleContext, } from '../lib/react/StyleContextProvider.js';
 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({ className, errMsg = null, execState, f, onChange: onChangeBase, }) {
-    const attrs = htmlInputDef(f, execState, errMsg, className);
+// TODO : Split this into smaller components
+export function UCFormFieldControl({ disabled, errMsg = null, execState, f, onChange: onChangeBase, }) {
+    const { formFieldControl, renderFormFieldControl } = useStyleContext();
+    const component = renderFormFieldControl?.({
+        disabled,
+        errMsg,
+        execState,
+        f,
+        onChange: onChangeBase,
+    });
+    if (component) {
+        return component;
+    }
+    const attrs = htmlInputDef(f, disabled, errMsg);
     const onChange = (e) => {
         const target = e.currentTarget;
         const type = target.type;
@@ -36,16 +50,23 @@ export function UCFormFieldControl({ className, errMsg = null, execState, f, onC
     const defaultChecked = attrs.internal?.checked;
     const defaultValue = attrs.internal?.value;
     if (attrs.internal?.multiline) {
-        return (React.createElement("textarea", { ...attrs.spec, defaultValue: defaultValue, onChange: onChange }));
+        const { className, style } = styleDef(formFieldControl, 'textarea', 'default');
+        return (React.createElement("textarea", { ...attrs.spec, className: className, defaultValue: defaultValue, onChange: onChange, style: style }));
     }
     const { type } = f.def;
+    if (type instanceof TBoolean) {
+        const { className, style } = styleDef(formFieldControl, 'checkbox');
+        return (React.createElement("input", { ...attrs.spec, className: className, defaultChecked: defaultChecked, defaultValue: defaultValue, onChange: onChange, style: style }));
+    }
     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, defaultValue: defaultValue, onChange: onChange },
+        const { className, style } = styleDef(formFieldControl, 'select', 'default');
+        return (React.createElement("select", { ...attrs.spec, className: className, defaultValue: defaultValue, onChange: onChange, style: style },
             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, defaultChecked: defaultChecked, defaultValue: defaultValue, onChange: onChange }));
+    const { className, style } = styleDef(formFieldControl, 'input', 'default');
+    return (React.createElement("input", { ...attrs.spec, className: className, defaultChecked: defaultChecked, defaultValue: defaultValue, onChange: onChange, style: style }));
 }

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>({ className, f, }: UCFormFieldDescProps<T>): ReactElement | null;
+export declare function UCFormFieldDesc<T extends DataType>({ f, }: UCFormFieldDescProps<T>): ReactElement | null;

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

@@ -1,10 +1,12 @@
 import React, {} from 'react';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCFormFieldDesc({ className, f, }) {
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
+export function UCFormFieldDesc({ f, }) {
     const { wordingManager } = useDIContext();
+    const { formFieldDesc } = useStyleContext();
     const { desc } = wordingManager.ucif(f);
     if (!desc) {
         return null;
     }
-    return React.createElement("div", { className: className }, desc);
+    return (React.createElement("div", { className: formFieldDesc?.className, style: formFieldDesc?.style }, 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({ className, errMsg, }: UCFormFieldErrProps): ReactElement;
+export declare function UCFormFieldErr({ errMsg }: UCFormFieldErrProps): ReactElement;

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

@@ -1,4 +1,6 @@
 import React, {} from 'react';
-export function UCFormFieldErr({ className, errMsg, }) {
-    return React.createElement("div", { className: className }, errMsg);
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
+export function UCFormFieldErr({ errMsg }) {
+    const { formFieldErr } = useStyleContext();
+    return (React.createElement("div", { className: formFieldErr?.className, style: formFieldErr?.style }, 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>({ className, f, }: UCFormFieldLabelProps<T>): ReactElement;
+export declare function UCFormFieldLabel<T extends DataType>({ f, }: UCFormFieldLabelProps<T>): ReactElement;

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

@@ -1,8 +1,13 @@
 import React, {} from 'react';
-import { ucifId } from '../../uc/index.js';
+import { ucifId, ucifIsMandatory } from '../../uc/index.js';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCFormFieldLabel({ className, f, }) {
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
+export function UCFormFieldLabel({ f, }) {
     const { wordingManager } = useDIContext();
+    const { formFieldLabel } = useStyleContext();
     const { label } = wordingManager.ucif(f);
-    return (React.createElement("label", { className: className, htmlFor: ucifId(f.key) }, label));
+    const mandatory = ucifIsMandatory(f.def);
+    return (React.createElement("label", { className: formFieldLabel?.className, htmlFor: ucifId(f.key), style: formFieldLabel?.style },
+        label,
+        mandatory && ' *'));
 }

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>({ className, 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>({ execState, disabled, uc, }: UCFormSubmitControlProps<I, OPI0, OPI1>): ReactElement;

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

@@ -1,6 +1,8 @@
 import React, {} from 'react';
 import { useDIContext } from '../lib/react/DIContextProvider.js';
-export function UCFormSubmitControl({ className, execState, disabled, uc, }) {
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
+export function UCFormSubmitControl({ execState, disabled, uc, }) {
     const { wordingManager } = useDIContext();
-    return (React.createElement("input", { className: className, disabled: disabled, type: "submit", value: wordingManager.ucISubmit(uc.def, execState) }));
+    const { formSubmitControl } = useStyleContext();
+    return (React.createElement("input", { className: formSubmitControl?.className, disabled: disabled, style: formSubmitControl?.style, 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>({ className, ...propsWithoutClassName }: Props<OPI, T>): ReactElement;
+export declare function UCOutputFieldValue<OPI extends UCOPIBase, T extends DataType>(props: Props<OPI, T>): ReactElement;

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

@@ -1,6 +1,8 @@
 import React, {} from 'react';
+import { useStyleContext } from '../lib/react/StyleContextProvider.js';
 import { UCOutputFieldValueFragment, } from '../lib/react/UCOutputFieldValueFragment.js';
-export function UCOutputFieldValue({ className, ...propsWithoutClassName }) {
-    return (React.createElement("span", { className: className },
-        React.createElement(UCOutputFieldValueFragment, { ...propsWithoutClassName })));
+export function UCOutputFieldValue(props) {
+    const { outputFieldValue } = useStyleContext();
+    return (React.createElement("span", { className: outputFieldValue?.className, style: outputFieldValue?.style },
+        React.createElement(UCOutputFieldValueFragment, { ...props })));
 }

package/dist/esm/uc/impl/RNUCClientConfirmManager.d.ts

@@ -0,0 +1,10 @@
+import { WordingManager } from '../../i18n/index.js';
+import type { UCClientConfirmManager } from '../client.js';
+import type { UCDef } from '../def.js';
+import type { UCInput } from '../input.js';
+import type { UCOPIBase } from '../opi.js';
+export declare class RNUCClientConfirmManager implements UCClientConfirmManager {
+    private wordingManager;
+    constructor(wordingManager: WordingManager);
+    exec<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>(ucd: UCDef<I, OPI0, OPI1>): Promise<boolean>;
+}

package/dist/esm/uc/impl/RNUCClientConfirmManager.js

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { inject, injectable } from 'inversify';
+import { Alert } from 'react-native';
+import { WordingManager } from '../../i18n/index.js';
+let RNUCClientConfirmManager = class RNUCClientConfirmManager {
+    wordingManager;
+    constructor(wordingManager) {
+        this.wordingManager = wordingManager;
+    }
+    async exec(ucd) {
+        const { cancel, confirm, message, title } = this.wordingManager.ucClientConfirm(ucd);
+        return new Promise((resolve) => {
+            Alert.alert(title, message ?? undefined, [
+                {
+                    onPress: () => resolve(true),
+                    style: 'destructive',
+                    text: confirm,
+                },
+                {
+                    onPress: () => resolve(false),
+                    style: 'cancel',
+                    text: cancel,
+                },
+            ]);
+        });
+    }
+};
+RNUCClientConfirmManager = __decorate([
+    injectable(),
+    __param(0, inject(WordingManager)),
+    __metadata("design:paramtypes", [WordingManager])
+], RNUCClientConfirmManager);
+export { RNUCClientConfirmManager };

package/dist/esm/utils/ioc/bindRN.js

@@ -1,5 +1,10 @@
 import { BufferLibBufferManager } from '../../std/impl/BufferLibBufferManager.js';
+import { RNUCClientConfirmManager } from '../../uc/impl/RNUCClientConfirmManager.js';
 export function bindRN(container) {
     // std
     container.bind('BufferManager').to(BufferLibBufferManager);
+    // uc
+    container
+        .rebindSync('UCClientConfirmManager')
+        .to(RNUCClientConfirmManager);
 }

package/package.json

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