@akinon/akiform-builder 1.2.1 → 1.3.1

package/dist/esm/akiform-builder.d.ts

@@ -1,6 +1,7 @@
+import './index.css';
 import { FieldValues } from '@akinon/akiform';
 import React from 'react';
-import { AkiformBuilderProps, AkiformBuilderRef } from './types';
+import type { AkiformBuilderProps, AkiformBuilderRef } from './types';
 export declare const THROTTLE_DELAY = 300;
 export declare const AkiformBuilder: React.ForwardRefExoticComponent<AkiformBuilderProps<FieldValues> & React.RefAttributes<AkiformBuilderRef<FieldValues>>>;
 //# sourceMappingURL=akiform-builder.d.ts.map

package/dist/esm/akiform-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akiform-builder.d.ts","sourceRoot":"","sources":["../../src/akiform-builder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,WAAW,EAMZ,MAAM,iBAAiB,CAAC;AAUzB,OAAO,KAWN,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EAMlB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,cAAc,MAAM,CAAC;AAkIlC,eAAO,MAAM,cAAc,yHA8Q1B,CAAC"}
+{"version":3,"file":"akiform-builder.d.ts","sourceRoot":"","sources":["../../src/akiform-builder.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAML,WAAW,EAMZ,MAAM,iBAAiB,CAAC;AAczB,OAAO,KAWN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAQlB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,cAAc,MAAM,CAAC;AAgXlC,eAAO,MAAM,cAAc,yHA+V1B,CAAC"}

package/dist/esm/akiform-builder.js

@@ -9,36 +9,123 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import './index.css';
 import { Akiform, akivalResolver, FormItem, useFieldArray, useForm, useWatch } from '@akinon/akiform';
 import { akival } from '@akinon/akival';
+import { Icon } from '@akinon/icons';
 import { Button } from '@akinon/ui-button';
 import { Checkbox } from '@akinon/ui-checkbox';
 import { Collapse } from '@akinon/ui-collapse';
 import { DatePicker } from '@akinon/ui-date-picker';
+import { Divider } from '@akinon/ui-divider';
 import { Input, InputTextArea } from '@akinon/ui-input';
 import { InputNumber } from '@akinon/ui-input-number';
+import { Col, Row } from '@akinon/ui-layout';
 import { Select } from '@akinon/ui-select';
-import { Space } from '@akinon/ui-space';
+import { Text } from '@akinon/ui-typography';
+import clsx from 'clsx';
 import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { i18n } from './i18n';
 export const THROTTLE_DELAY = 300; // ms
+const checkIsDisabled = ({ field, formValues }) => {
+    var _a;
+    const configDisabledProperty = (_a = field.config) === null || _a === void 0 ? void 0 : _a.disabled;
+    return typeof configDisabledProperty === 'function'
+        ? configDisabledProperty(formValues)
+        : !!configDisabledProperty;
+};
+const checkIsVisible = ({ field, formValues }) => {
+    var _a;
+    const configVisibleProperty = (_a = field.config) === null || _a === void 0 ? void 0 : _a.visible;
+    return typeof configVisibleProperty === 'function'
+        ? configVisibleProperty(formValues)
+        : configVisibleProperty !== false;
+};
 const SectionComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
-    return (React.createElement(Collapse, { defaultActiveKey: field.defaultExpanded ? [field.key] : [], items: [
-            {
-                label: field.label,
-                key: field.key,
-                children: field.fields.map(nestedField => {
-                    var _a, _b;
-                    const isVisible = typeof ((_a = nestedField.config) === null || _a === void 0 ? void 0 : _a.visible) === 'function'
-                        ? nestedField.config.visible(formValues)
-                        : ((_b = nestedField.config) === null || _b === void 0 ? void 0 : _b.visible) !== false;
-                    if (!isVisible) {
-                        return null;
-                    }
-                    return (React.createElement(FormItem, { key: nestedField.key, control: control, name: nestedField.key, label: nestedField.label }, renderField(nestedField, control, formValues, formState, layout, layoutOptions)));
-                })
-            }
-        ] }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { errors } = formState;
+    if (field.collapsible) {
+        return (React.createElement(Collapse, { defaultActiveKey: field.defaultExpanded ? [field.key] : [], expandIcon: panelProps => ({
+                name: 'circle-down',
+                style: {
+                    color: 'var(--color-azure-500)',
+                    transform: panelProps.isActive ? 'rotate(-180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.3s'
+                },
+                size: 20
+            }), items: [
+                {
+                    label: (React.createElement("div", { className: "akiform-builder-form-actions" },
+                        React.createElement(Text, { strong: true }, field.label),
+                        Object.keys(errors).length > 0 ? (React.createElement(Text, { strong: true, type: "danger" }, i18n.t('an_error_occurred'))) : null)),
+                    key: field.key,
+                    children: field.fields.map(nestedField => {
+                        return renderFormItem({
+                            field: nestedField,
+                            control,
+                            formValues,
+                            formState,
+                            layout,
+                            layoutOptions
+                        });
+                    })
+                }
+            ] }));
+    }
+    else {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Divider, { orientation: "left", plain: true, plainOffset: 40 }, field.label),
+            field.fields.map(nestedField => {
+                return renderFormItem({
+                    field: nestedField,
+                    control,
+                    formValues,
+                    formState,
+                    layout,
+                    layoutOptions
+                });
+            })));
+    }
+};
+const RowComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    const { columnFields, rowProps } = field;
+    if (!(columnFields === null || columnFields === void 0 ? void 0 : columnFields.length))
+        return;
+    return (React.createElement(Row, Object.assign({}, rowProps), columnFields.map(columnField => {
+        const { columnProps } = columnField;
+        const isVisible = checkIsVisible({
+            field: columnField,
+            formValues
+        });
+        if (!isVisible)
+            return null;
+        return (React.createElement(Col, Object.assign({ key: columnField.key, flex: "1" }, columnProps),
+            React.createElement(ColumnComponent, { field: columnField, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions })));
+    })));
+};
+const ColumnComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    const { fields } = field;
+    if (!(fields === null || fields === void 0 ? void 0 : fields.length))
+        return;
+    return fields.map(rowField => {
+        const isVisible = checkIsVisible({
+            field: rowField,
+            formValues
+        });
+        if (!isVisible)
+            return null;
+        const isRowField = rowField.type === 'row';
+        return isRowField
+            ? renderField(rowField, control, formValues, formState, layout, layoutOptions)
+            : renderFormItem({
+                field: rowField,
+                control,
+                formValues,
+                formState,
+                layout,
+                layoutOptions
+            });
+    });
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderField = (field, control, formValues, 
@@ -50,15 +137,15 @@ formState, layout, layoutOptions) => {
     };
     switch (field.type) {
         case 'text':
-            return React.createElement(Input, Object.assign({ placeholder: field.placeholder }, commonProps));
+            return (React.createElement(Input, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
         case 'number':
-            return React.createElement(InputNumber, Object.assign({ placeholder: field.placeholder }, commonProps));
+            return (React.createElement(InputNumber, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
         case 'select':
             return (React.createElement(Select, Object.assign({ placeholder: field.placeholder, options: field.options }, commonProps)));
         case 'checkbox':
             return (React.createElement(Checkbox, Object.assign({ checked: formValues[field.key] }, commonProps), field.label));
         case 'date':
-            return React.createElement(DatePicker, Object.assign({ placeholder: field.placeholder }, commonProps));
+            return (React.createElement(DatePicker, Object.assign({ placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconColor: "var(--color-azure-500)", suffixIconSize: "16" }, commonProps)));
         case 'textarea':
             return React.createElement(InputTextArea, Object.assign({ placeholder: field.placeholder }, commonProps));
         case 'fieldArray':
@@ -71,13 +158,32 @@ formState, layout, layoutOptions) => {
             return React.createElement(Fragment, null);
         case 'section':
             return (React.createElement(SectionComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+        case 'row':
+            return (React.createElement(RowComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+        case 'column':
+            return (React.createElement(ColumnComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
         default:
             return React.createElement(Fragment, null);
     }
 };
+const renderFormItem = ({ field, control, formValues, formState, layout, layoutOptions, customVisibleCheck }) => {
+    const isVisible = customVisibleCheck
+        ? customVisibleCheck()
+        : checkIsVisible({
+            field,
+            formValues
+        });
+    if (!isVisible)
+        return null;
+    const isDisabled = checkIsDisabled({
+        field,
+        formValues
+    });
+    return (React.createElement(FormItem, { key: field.key, control: control, name: field.key, label: field.label, required: field.validation ? true : false, tooltip: field.tooltip, disabled: isDisabled, help: field.help, labelDescription: field.labelDescription }, renderField(field, control, formValues, formState, layout, layoutOptions)));
+};
 export const AkiformBuilder = forwardRef((_a, ref) => {
     var _b, _c;
-    var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange"]);
+    var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange, submitButtonProps, resetButtonProps } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange", "submitButtonProps", "resetButtonProps"]);
     const validationSchema = useMemo(() => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const schema = {};
@@ -107,6 +213,8 @@ export const AkiformBuilder = forwardRef((_a, ref) => {
     const prevFormValuesRef = useRef(null);
     const isInitialRenderRef = useRef(true);
     const throttleTimeoutRef = useRef(null);
+    const hasSubmitButton = !!onSubmit;
+    const hasFormActions = hasSubmitButton || showResetButton;
     const handleValueChange = useCallback((values) => {
         if (!controlled) {
             if (throttleTimeoutRef.current) {
@@ -212,39 +320,78 @@ export const AkiformBuilder = forwardRef((_a, ref) => {
             }
         }
     }));
-    return (React.createElement(Akiform, Object.assign({ onFinish: handleSubmit(onSubmit), onReset: handleReset, layout: layout }, formItemLayout, rest, { "data-testid": "akiform-builder", role: "form", "aria-label": i18n.t('formLabel') }),
-        fields.map(field => {
-            var _a, _b, _c, _d;
-            const isDisabled = typeof ((_a = field.config) === null || _a === void 0 ? void 0 : _a.disabled) === 'function'
-                ? field.config.disabled(formValues)
-                : (_b = field.config) === null || _b === void 0 ? void 0 : _b.disabled;
-            const isVisible = typeof ((_c = field.config) === null || _c === void 0 ? void 0 : _c.visible) === 'function'
-                ? field.config.visible(formValues)
-                : ((_d = field.config) === null || _d === void 0 ? void 0 : _d.visible) !== false;
-            if (!isVisible) {
-                return null;
-            }
-            if (field.type === 'section') {
-                return (React.createElement(SectionComponent, { key: field.key, field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+    const renderSubmitButton = () => {
+        const _a = submitButtonProps || {}, { children, block = false, className } = _a, otherSubmitButtonProps = __rest(_a, ["children", "block", "className"]);
+        const submitButtonClassName = clsx(className, {
+            'w-full': block
+        });
+        return (React.createElement(Button, Object.assign({ className: submitButtonClassName, type: "primary" }, otherSubmitButtonProps, { htmlType: "submit" }), children || i18n.t('submit')));
+    };
+    const renderShowResetButton = () => {
+        const _a = resetButtonProps || {}, { children, block = false, className, onClick } = _a, otherResetButtonProps = __rest(_a, ["children", "block", "className", "onClick"]);
+        const resetButtonClassName = clsx(className, {
+            'w-full': block
+        });
+        const handleOnClickReset = event => {
+            handleReset(event);
+            if (onClick) {
+                onClick(event);
             }
-            return (React.createElement(FormItem, { key: field.key, control: control, name: field.key, label: field.label, disabled: isDisabled }, renderField(field, control, formValues, formState, layout, layoutOptions)));
-        }),
-        React.createElement(FormItem, { control: control, name: 'form_actions', wrapperCol: layout === 'horizontal'
-                ? {
-                    offset: (_b = formItemLayout.labelCol) === null || _b === void 0 ? void 0 : _b.span,
-                    span: (_c = formItemLayout.wrapperCol) === null || _c === void 0 ? void 0 : _c.span
+        };
+        return (React.createElement(Button
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        , Object.assign({ 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onClick: handleOnClickReset, className: resetButtonClassName, type: "default" }, otherResetButtonProps, { htmlType: "reset" }), children || i18n.t('reset')));
+    };
+    const renderFormActions = () => {
+        return (React.createElement("div", { className: "akiform-builder-form-actions" },
+            hasSubmitButton && renderSubmitButton(),
+            showResetButton && renderShowResetButton()));
+    };
+    return (React.createElement("div", { className: "akiform-builder" },
+        React.createElement(Akiform, Object.assign({}, (hasSubmitButton && { onFinish: handleSubmit(onSubmit) }), { onReset: handleReset, layout: layout }, formItemLayout, rest, { "data-testid": "akiform-builder", role: "form", "aria-label": i18n.t('formLabel'), requiredMark: true }),
+            fields.map(field => {
+                const isVisible = checkIsVisible({
+                    field,
+                    formValues
+                });
+                if (!isVisible) {
+                    return null;
                 }
-                : undefined },
-            React.createElement(Space, null,
-                React.createElement(Button, { type: "primary", htmlType: "submit" }, i18n.t('submit')),
-                showResetButton && (
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                React.createElement(Button, { onClick: handleReset, htmlType: "reset" }, i18n.t('reset')))))));
+                switch (field.type) {
+                    case 'section':
+                        return (React.createElement(SectionComponent, { key: field.key, field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+                    case 'fieldArray':
+                        return (React.createElement("div", { className: "akiform-builder-field-array", key: field.key },
+                            React.createElement(Divider, { orientation: "left", plain: true, plainOffset: 40 },
+                                React.createElement("span", { id: `${field.key}-label` }, field.label)),
+                            renderField(field, control, formValues, formState, layout, layoutOptions)));
+                    case 'row':
+                        return renderField(field, control, formValues, formState, layout, layoutOptions);
+                    default:
+                        return renderFormItem({
+                            field,
+                            control,
+                            formValues,
+                            formState,
+                            layout,
+                            layoutOptions
+                        });
+                }
+            }),
+            hasFormActions && (React.createElement(FormItem, { control: control, name: 'form_actions', wrapperCol: layout === 'horizontal'
+                    ? {
+                        offset: (_b = formItemLayout.labelCol) === null || _b === void 0 ? void 0 : _b.span,
+                        span: (_c = formItemLayout.wrapperCol) === null || _c === void 0 ? void 0 : _c.span
+                    }
+                    : undefined }, renderFormActions())))));
 });
 AkiformBuilder.displayName = 'AkiformBuilder';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FieldArrayComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
-    const { fields, append, remove } = useFieldArray({
+    const { errors } = formState;
+    const { fields, append, remove, insert } = useFieldArray({
         control,
         name: field.key
     });
@@ -257,24 +404,52 @@ const FieldArrayComponent = ({ field, control, formValues, formState, layout, la
         {});
     };
     return (React.createElement("div", { role: "group", "aria-labelledby": `${field.key}-label` },
-        React.createElement("div", { id: `${field.key}-label`, className: "sr-only" }, field.label),
-        fields.map((item, index) => (React.createElement("div", { key: item.id },
-            field.fields.map(nestedField => {
-                var _a, _b;
-                const isVisible = typeof ((_a = nestedField.config) === null || _a === void 0 ? void 0 : _a.visible) === 'function'
-                    ? nestedField.config.visible(((_b = formValues[field.key]) === null || _b === void 0 ? void 0 : _b[index]) || {})
-                    : true;
-                if (!isVisible) {
-                    return null;
-                }
-                return (React.createElement(FormItem, { key: `${field.key}.${index}.${nestedField.key}`, control: control, name: `${field.key}.${index}.${nestedField.key}`, label: nestedField.label }, renderField(Object.assign(Object.assign({}, nestedField), { 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    key: `${field.key}.${index}.${nestedField.key}` }), control, formValues, formState, layout, layoutOptions)));
-            }),
-            React.createElement(Button, { onClick: () => remove(index), "aria-label": `Remove ${field.label} ${index + 1}` }, "Remove")))),
-        React.createElement(Button
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        , { 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onClick: () => append(createInitialValue()), "aria-label": `Add ${field.label}` }, "Add")));
+        !fields.length && (React.createElement("div", { className: "akiform-builder-form-actions akiform-builder-action-icon", "data-testid": `${field.key}-add-button`, onClick: () => append(createInitialValue()) },
+            React.createElement(Icon, { icon: "plus", size: 20, color: "var(--color-green-500)", "aria-label": i18n.t('add', { label: field.label }) }),
+            React.createElement(Text, { strong: true }, i18n.t('add', { label: field.label })))),
+        fields.map((item, index) => {
+            var _a;
+            return (React.createElement(Fragment, { key: item.id },
+                React.createElement(Collapse, { collapsible: "icon", defaultActiveKey: field.defaultExpanded ? [item.id] : [], expandIcon: panelProps => ({
+                        name: 'circle-down',
+                        style: {
+                            color: 'var(--color-azure-500)',
+                            transform: panelProps.isActive
+                                ? 'rotate(-180deg)'
+                                : 'rotate(0deg)',
+                            transition: 'transform 0.3s'
+                        },
+                        size: 20
+                    }), items: [
+                        {
+                            label: (React.createElement("div", { className: "akiform-builder-form-actions" },
+                                React.createElement(Text, { strong: true }, i18n.t('itemof', {
+                                    label: field.label,
+                                    count: index + 1,
+                                    ordinal: true
+                                })),
+                                React.createElement(Icon, { className: "akiform-builder-action-icon", onClick: () => remove(index), icon: "minus", size: 20, color: "var(--color-red-500)", "aria-label": i18n.t('remove', { label: field.label }) }),
+                                React.createElement(Icon, { className: "akiform-builder-action-icon", onClick: () => insert(index + 1, createInitialValue()), icon: "plus", size: 20, color: "var(--color-green-500)", "aria-label": i18n.t('add', { label: field.label }) }),
+                                ((_a = errors[field.key]) === null || _a === void 0 ? void 0 : _a[index]) ? (React.createElement(Text, { strong: true, type: "danger" }, i18n.t('an_error_occurred'))) : null)),
+                            key: field.key,
+                            children: field.fields.map(nestedField => {
+                                return renderFormItem({
+                                    field: Object.assign(Object.assign({}, nestedField), { key: `${field.key}.${index}.${nestedField.key}` }),
+                                    control,
+                                    formValues,
+                                    formState,
+                                    layout,
+                                    layoutOptions,
+                                    customVisibleCheck: () => {
+                                        var _a, _b;
+                                        return typeof ((_a = nestedField.config) === null || _a === void 0 ? void 0 : _a.visible) === 'function'
+                                            ? nestedField.config.visible(((_b = formValues[field.key]) === null || _b === void 0 ? void 0 : _b[index]) || {})
+                                            : true;
+                                    }
+                                });
+                            })
+                        }
+                    ] }),
+                React.createElement(Divider, { plain: true })));
+        })));
 };

package/dist/esm/field-builder.d.ts

@@ -1,9 +1,11 @@
 import { FieldPath, FieldValues } from '@akinon/akiform';
 import { AnySchema } from '@akinon/akival';
-import { FieldConfig, FieldType, FormField } from './types';
-type FieldTypeToBuilder<T extends FieldType, TFieldValues extends FieldValues = FieldValues> = T extends 'select' ? SelectFieldBuilder<TFieldValues> : T extends 'custom' ? CustomFieldBuilder<TFieldValues> : T extends 'section' ? SectionFieldBuilder<TFieldValues> : BaseFieldBuilder<TFieldValues>;
+import type { ColProps, RowProps } from '@akinon/ui-layout';
+import type { TooltipProps } from '@akinon/ui-tooltip';
+import type { FieldConfig, FieldType, FormField } from './types';
+type FieldTypeToBuilder<T extends FieldType, TFieldValues extends FieldValues = FieldValues> = T extends 'select' ? SelectFieldBuilder<TFieldValues> : T extends 'date' ? DateFieldBuilder<TFieldValues> : T extends 'custom' ? CustomFieldBuilder<TFieldValues> : T extends 'section' ? SectionFieldBuilder<TFieldValues> : T extends 'fieldArray' ? FieldArrayOrSectionFieldBuilder<TFieldValues> : T extends 'row' ? RowFieldBuilder<TFieldValues> : T extends 'column' ? ColumnFieldBuilder<TFieldValues> : BaseFieldBuilder<TFieldValues>;
 declare class BaseFieldBuilder<TFieldValues extends FieldValues = FieldValues> {
-    protected field: Partial<FormField<TFieldValues>>;
+    field: Partial<FormField<TFieldValues>>;
     key(key: FieldPath<TFieldValues>): this;
     label(label: string): this;
     type<T extends FieldType>(type: T): FieldTypeToBuilder<T, TFieldValues>;
@@ -11,6 +13,9 @@ declare class BaseFieldBuilder<TFieldValues extends FieldValues = FieldValues> {
     defaultValue(value: any): this;
     validation(schema: AnySchema): this;
     config(config: FieldConfig<TFieldValues>): this;
+    tooltip(tooltipProps: TooltipProps | string): this;
+    help(help: string): this;
+    labelDescription(labelDescription: string): this;
     build(): FormField<TFieldValues>;
 }
 declare class SelectFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
@@ -19,6 +24,9 @@ declare class SelectFieldBuilder<TFieldValues extends FieldValues = FieldValues>
         label: string;
     }>): this;
 }
+declare class DateFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    showTime(showTime: boolean): this;
+}
 declare class CustomFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
     render(renderFn: (props: {
         field: FormField<TFieldValues>;
@@ -26,10 +34,21 @@ declare class CustomFieldBuilder<TFieldValues extends FieldValues = FieldValues>
         control: any;
     }) => React.ReactElement): this;
 }
-declare class SectionFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
-    fields(fields: FormField<TFieldValues>[]): this;
+declare class FieldArrayOrSectionFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
     defaultExpanded(expanded: boolean): this;
+    fields(fields: FormField<TFieldValues>[]): this;
+}
+declare class SectionFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends FieldArrayOrSectionFieldBuilder<TFieldValues> {
+    collapsible(collapsible: boolean): this;
+}
+declare class RowFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    columnFields(columnFields: FormField<TFieldValues>[]): this;
+    rowProps(rowProps: RowProps): this;
+}
+declare class ColumnFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    fields(fields: FormField<TFieldValues>[]): this;
+    columnProps(columnProps: ColProps): this;
 }
-export declare function field<TFieldValues extends FieldValues = FieldValues>(): BaseFieldBuilder<TFieldValues> & SelectFieldBuilder<TFieldValues> & CustomFieldBuilder<TFieldValues> & SectionFieldBuilder<TFieldValues>;
+export declare function field<TFieldValues extends FieldValues = FieldValues>(): BaseFieldBuilder<TFieldValues> & SelectFieldBuilder<TFieldValues> & DateFieldBuilder<TFieldValues> & CustomFieldBuilder<TFieldValues> & SectionFieldBuilder<TFieldValues> & FieldArrayOrSectionFieldBuilder<TFieldValues>;
 export {};
 //# sourceMappingURL=field-builder.d.ts.map

package/dist/esm/field-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-builder.d.ts","sourceRoot":"","sources":["../../src/field-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE5D,KAAK,kBAAkB,CACrB,CAAC,SAAS,SAAS,EACnB,YAAY,SAAS,WAAW,GAAG,WAAW,IAC5C,CAAC,SAAS,QAAQ,GAClB,kBAAkB,CAAC,YAAY,CAAC,GAChC,CAAC,SAAS,QAAQ,GAChB,kBAAkB,CAAC,YAAY,CAAC,GAChC,CAAC,SAAS,SAAS,GACjB,mBAAmB,CAAC,YAAY,CAAC,GACjC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAEvC,cAAM,gBAAgB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IACnE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAM;IAEvD,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,YAAY,CAAC,GAAG,IAAI;IAKvC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,CAAC,EAAE,YAAY,CAAC;IAKvE,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAMtC,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAK9B,UAAU,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;IAKnC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,GAAG,IAAI;IAM/C,KAAK,IAAI,SAAS,CAAC,YAAY,CAAC;CAMjC;AAED,cAAM,kBAAkB,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI;CAKzE;AAED,cAAM,kBAAkB,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,MAAM,CACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAC/B,UAAU,EAAE,YAAY,CAAC;QAEzB,OAAO,EAAE,GAAG,CAAC;KACd,KAAK,KAAK,CAAC,YAAY,GACvB,IAAI;CAKR;AAED,cAAM,mBAAmB,CACvB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,IAAI;IAM/C,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;CAKzC;AAED,wBAAgB,KAAK,CACnB,YAAY,SAAS,WAAW,GAAG,WAAW,KAC3C,gBAAgB,CAAC,YAAY,CAAC,GACjC,kBAAkB,CAAC,YAAY,CAAC,GAChC,kBAAkB,CAAC,YAAY,CAAC,GAChC,mBAAmB,CAAC,YAAY,CAAC,CAmBlC"}
+{"version":3,"file":"field-builder.d.ts","sourceRoot":"","sources":["../../src/field-builder.ts"],"names":[],"mappings":"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"}

package/dist/esm/field-builder.js

@@ -32,9 +32,21 @@ class BaseFieldBuilder {
         this.field.config = config;
         return this;
     }
+    tooltip(tooltipProps) {
+        this.field.tooltip = tooltipProps;
+        return this;
+    }
+    help(help) {
+        this.field.help = help;
+        return this;
+    }
+    labelDescription(labelDescription) {
+        this.field.labelDescription = labelDescription;
+        return this;
+    }
     build() {
-        if (!this.field.key || !this.field.label || !this.field.type) {
-            throw new Error('Field must have at least a key, label, and type');
+        if (!this.field.key || !this.field.type) {
+            throw new Error('Field must have at least a key and type');
         }
         return this.field;
     }
@@ -46,6 +58,13 @@ class SelectFieldBuilder extends BaseFieldBuilder {
         return this;
     }
 }
+class DateFieldBuilder extends BaseFieldBuilder {
+    showTime(showTime) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.field.showTime = showTime;
+        return this;
+    }
+}
 class CustomFieldBuilder extends BaseFieldBuilder {
     render(renderFn) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,32 +72,79 @@ class CustomFieldBuilder extends BaseFieldBuilder {
         return this;
     }
 }
-class SectionFieldBuilder extends BaseFieldBuilder {
+class FieldArrayOrSectionFieldBuilder extends BaseFieldBuilder {
+    defaultExpanded(expanded) {
+        this.field.defaultExpanded = expanded;
+        return this;
+    }
+    fields(fields) {
+        if (this.field.type === 'fieldArray' || this.field.type === 'section') {
+            this.field.fields = fields;
+        }
+        else {
+            console.warn(`Fields can only be set for 'fieldArray' or 'section' types. Current type: ${this.field.type}`);
+        }
+        return this;
+    }
+}
+class SectionFieldBuilder extends FieldArrayOrSectionFieldBuilder {
+    collapsible(collapsible) {
+        this.field.collapsible = collapsible;
+        return this;
+    }
+}
+class RowFieldBuilder extends BaseFieldBuilder {
+    columnFields(columnFields) {
+        this.field.columnFields =
+            columnFields;
+        return this;
+    }
+    rowProps(rowProps) {
+        this.field.rowProps = rowProps;
+        return this;
+    }
+}
+class ColumnFieldBuilder extends BaseFieldBuilder {
     fields(fields) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.field.fields = fields;
         return this;
     }
-    defaultExpanded(expanded) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.field.defaultExpanded = expanded;
+    columnProps(columnProps) {
+        this.field.columnProps = columnProps;
         return this;
     }
 }
 export function field() {
     return new Proxy(new BaseFieldBuilder(), {
         get(target, prop) {
-            if (prop === 'options') {
-                return SelectFieldBuilder.prototype.options;
-            }
-            if (prop === 'render') {
-                return CustomFieldBuilder.prototype.render;
-            }
-            if (prop === 'fields' || prop === 'defaultExpanded') {
-                return SectionFieldBuilder.prototype[prop];
+            switch (prop) {
+                case 'options':
+                    return SelectFieldBuilder.prototype.options;
+                case 'showTime':
+                    return DateFieldBuilder.prototype.showTime;
+                case 'render':
+                    return CustomFieldBuilder.prototype.render;
+                case 'defaultExpanded':
+                    return FieldArrayOrSectionFieldBuilder.prototype.defaultExpanded;
+                case 'fields': {
+                    const fieldType = target.field.type;
+                    if (fieldType === 'column') {
+                        return ColumnFieldBuilder.prototype.fields;
+                    }
+                    return FieldArrayOrSectionFieldBuilder.prototype.fields;
+                }
+                case 'collapsible':
+                    return SectionFieldBuilder.prototype.collapsible;
+                case 'columnFields':
+                    return RowFieldBuilder.prototype.columnFields;
+                case 'rowProps':
+                    return RowFieldBuilder.prototype.rowProps;
+                case 'columnProps':
+                    return ColumnFieldBuilder.prototype.columnProps;
+                default:
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    return target[prop];
             }
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return target[prop];
         }
     });
 }

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

@@ -1,5 +1,2 @@
-export declare const i18n: {
-    t: (key: string, options?: import("i18next").TOptions) => string;
-    lng: string;
-};
+export declare const i18n: import("@akinon/akilocale").AkilocaleInstance;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/i18n/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/i18n/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI;4BAQszB,CAAC;;CADt0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/i18n/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,+CAOf,CAAC"}