@sunggang/ui-lib 0.4.60 → 0.4.61

package/Form.cjs.js

@@ -8030,6 +8030,233 @@ var Textarea = function(param) {
         ]
     });
 };
+var FieldArray = function(param) {
+    var item = param.item;
+    var _useFormContext = index_esm.useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors, getValues = _useFormContext.getValues;
+    var _useFieldArray = index_esm.useFieldArray({
+        control: control,
+        name: item.name
+    }), fields = _useFieldArray.fields, append = _useFieldArray.append, remove = _useFieldArray.remove;
+    var config = item === null || item === void 0 ? void 0 : item.fieldArrayConfig;
+    var fieldConfigs = (config === null || config === void 0 ? void 0 : config.fields) || [];
+    var addButtonText = (config === null || config === void 0 ? void 0 : config.addButtonText) || "新增";
+    var removeButtonText = (config === null || config === void 0 ? void 0 : config.removeButtonText) || "刪除";
+    var maxItems = config === null || config === void 0 ? void 0 : config.maxItems;
+    var minItems = (config === null || config === void 0 ? void 0 : config.minItems) || 0;
+    var defaultItemCount = (config === null || config === void 0 ? void 0 : config.defaultItemCount) || 1;
+    var addButtonPosition = (config === null || config === void 0 ? void 0 : config.addButtonPosition) || "bottom";
+    var canAdd = !maxItems || fields.length < maxItems;
+    var canRemove = fields.length > minItems;
+    // 初始化：確保至少有 defaultItemCount 個項目
+    React__default["default"].useEffect(function() {
+        var currentValues = getValues(item.name);
+        if (!currentValues || currentValues.length === 0) {
+            var _loop = function(i) {
+                var newItem = {};
+                fieldConfigs.forEach(function(field) {
+                    newItem[field.name] = "";
+                });
+                append(newItem);
+            };
+            var itemsToAdd = defaultItemCount;
+            for(var i = 0; i < itemsToAdd; i++)_loop(i);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleAdd = function() {
+        if (canAdd) {
+            var newItem = {};
+            fieldConfigs.forEach(function(field) {
+                newItem[field.name] = "";
+            });
+            append(newItem);
+        }
+    };
+    var handleRemove = function(index) {
+        if (canRemove) {
+            remove(index);
+        }
+    };
+    var getFieldError = function(index, fieldName) {
+        var fieldPath = "".concat(item.name, ".").concat(index, ".").concat(fieldName);
+        var pathParts = fieldPath.split(".");
+        var error = errors;
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = pathParts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var part = _step.value;
+                if (error && error[part]) {
+                    error = error[part];
+                } else {
+                    return null;
+                }
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        return error;
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: [
+            (item === null || item === void 0 ? void 0 : item.className) || "w-full"
+        ].join(" "),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(FieldLabel.FieldLabel, {
+                item: item
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "space-y-4",
+                children: [
+                    fields.map(function(field, index) {
+                        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "border border-[#C8C8C8] rounded-xl p-4 bg-white overflow-scroll",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "flex items-start gap-2 flex-wrap lg:flex-nowrap",
+                                children: [
+                                    fieldConfigs.map(function(fieldConfig, fieldIndex) {
+                                        var _fieldConfig_validateOption;
+                                        var fieldName = "".concat(item.name, ".").concat(index, ".").concat(fieldConfig.name);
+                                        var fieldError = getFieldError(index, fieldConfig.name);
+                                        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            className: "flex-1 min-w-[200px]",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                    className: "font-medium mb-2 text-sm",
+                                                    children: [
+                                                        fieldConfig.label,
+                                                        (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                            className: "pl-1 text-[#EF5533] font-bold",
+                                                            children: "*"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(index_esm.Controller, {
+                                                    name: fieldName,
+                                                    control: control,
+                                                    rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
+                                                    render: function(param) {
+                                                        var controllerField = param.field;
+                                                        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                            className: "relative",
+                                                            children: [
+                                                                /*#__PURE__*/ jsxRuntime.jsx("input", _object_spread_props(_object_spread({}, controllerField), {
+                                                                    list: "".concat(fieldName, "-datalist"),
+                                                                    type: "text",
+                                                                    className: [
+                                                                        (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
+                                                                        "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
+                                                                    ].join(" "),
+                                                                    placeholder: fieldConfig.placeholder || fieldConfig.label,
+                                                                    disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
+                                                                })),
+                                                                fieldConfig.options && fieldConfig.options.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("datalist", {
+                                                                    id: "".concat(fieldName, "-datalist"),
+                                                                    children: fieldConfig.options.map(function(option, optIndex) {
+                                                                        return /*#__PURE__*/ jsxRuntime.jsx("option", {
+                                                                            value: option.value || option.name,
+                                                                            children: option.name
+                                                                        }, optIndex);
+                                                                    })
+                                                                })
+                                                            ]
+                                                        });
+                                                    }
+                                                }),
+                                                (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                    className: "pt-1 text-xs text-[#EF5533]",
+                                                    children: [
+                                                        "*",
+                                                        String(fieldError.message)
+                                                    ]
+                                                })
+                                            ]
+                                        }, fieldIndex);
+                                    }),
+                                    addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                                        type: "button",
+                                        onClick: handleAdd,
+                                        className: [
+                                            "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
+                                            "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
+                                            "transition-colors duration-200",
+                                            "flex items-center gap-2 whitespace-nowrap",
+                                            "mt-[30px]"
+                                        ].join(" "),
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
+                                                icon: "mdi:plus",
+                                                className: "w-5 h-5"
+                                            }),
+                                            addButtonText
+                                        ]
+                                    }),
+                                    canRemove && /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                                        type: "button",
+                                        onClick: function() {
+                                            return handleRemove(index);
+                                        },
+                                        className: [
+                                            "h-11 px-4 rounded-2xl border border-solid border-[#EF5533]",
+                                            "text-[#EF5533] bg-white hover:bg-[#FFF5F3]",
+                                            "transition-colors duration-200",
+                                            "flex items-center gap-2 whitespace-nowrap",
+                                            "mt-[30px]"
+                                        ].join(" "),
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
+                                                icon: "mdi:delete-outline",
+                                                className: "w-5 h-5"
+                                            }),
+                                            removeButtonText
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, field.id);
+                    }),
+                    addButtonPosition === "bottom" && canAdd && /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                        type: "button",
+                        onClick: handleAdd,
+                        className: [
+                            "h-11 px-6 rounded-2xl border border-solid border-[#6f6f6f]",
+                            "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
+                            "transition-colors duration-200",
+                            "flex items-center gap-2"
+                        ].join(" "),
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
+                                icon: "mdi:plus",
+                                className: "w-5 h-5"
+                            }),
+                            addButtonText
+                        ]
+                    }),
+                    maxItems && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "text-xs text-[#777777]",
+                        children: [
+                            "已新增 ",
+                            fields.length,
+                            " / ",
+                            maxItems,
+                            " 項"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
 var Fields = function(param) {
     var formConfig = param.formConfig, _param_fieldsClass = param.fieldsClass, fieldsClass = _param_fieldsClass === void 0 ? "gap-2" : _param_fieldsClass;
     return !!(formConfig === null || formConfig === void 0 ? void 0 : formConfig.length) && (formConfig === null || formConfig === void 0 ? void 0 : formConfig.map(function(item, index) {
@@ -8160,6 +8387,10 @@ var Row = function(param) {
                 return /*#__PURE__*/ React.createElement(FlatpickrField, _object_spread_props(_object_spread({}, baseConfig), {
                     key: "rowField-".concat(index)
                 }));
+            case "fieldArray":
+                return /*#__PURE__*/ React.createElement(FieldArray, _object_spread_props(_object_spread({}, baseConfig), {
+                    key: "rowField-".concat(index)
+                }));
             default:
                 return null;
         }
@@ -8180,7 +8411,8 @@ var Form = {
     CheckboxField: CheckboxField,
     BaseCkeditor: BaseCkeditor,
     Dropdown: DropdownList,
-    FlatpickrField: FlatpickrField
+    FlatpickrField: FlatpickrField,
+    FieldArray: FieldArray
 };
 
 function _array_like_to_array$1(arr, len) {

package/Form.esm.js

@@ -7,7 +7,7 @@ import { keyframes, jsx, css as css$2 } from '@emotion/react';
 import { createPortal } from 'react-dom';
 import { Icon } from '@iconify/react';
 import { Checkbox, RadioGroup, FormControlLabel, Radio } from '@mui/material';
-import { a as useFormContext, C as Controller } from './index.esm.esm.js';
+import { a as useFormContext, C as Controller, c as useFieldArray } from './index.esm.esm.js';
 import { d as dt } from './styled-components.esm.esm.js';
 import { _, v as validateMsg } from './common.esm.js';
 import { F as FieldLabel } from './FieldLabel.esm.js';
@@ -8003,6 +8003,233 @@ var Textarea = function(param) {
         ]
     });
 };
+var FieldArray = function(param) {
+    var item = param.item;
+    var _useFormContext = useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors, getValues = _useFormContext.getValues;
+    var _useFieldArray = useFieldArray({
+        control: control,
+        name: item.name
+    }), fields = _useFieldArray.fields, append = _useFieldArray.append, remove = _useFieldArray.remove;
+    var config = item === null || item === void 0 ? void 0 : item.fieldArrayConfig;
+    var fieldConfigs = (config === null || config === void 0 ? void 0 : config.fields) || [];
+    var addButtonText = (config === null || config === void 0 ? void 0 : config.addButtonText) || "新增";
+    var removeButtonText = (config === null || config === void 0 ? void 0 : config.removeButtonText) || "刪除";
+    var maxItems = config === null || config === void 0 ? void 0 : config.maxItems;
+    var minItems = (config === null || config === void 0 ? void 0 : config.minItems) || 0;
+    var defaultItemCount = (config === null || config === void 0 ? void 0 : config.defaultItemCount) || 1;
+    var addButtonPosition = (config === null || config === void 0 ? void 0 : config.addButtonPosition) || "bottom";
+    var canAdd = !maxItems || fields.length < maxItems;
+    var canRemove = fields.length > minItems;
+    // 初始化：確保至少有 defaultItemCount 個項目
+    React__default.useEffect(function() {
+        var currentValues = getValues(item.name);
+        if (!currentValues || currentValues.length === 0) {
+            var _loop = function(i) {
+                var newItem = {};
+                fieldConfigs.forEach(function(field) {
+                    newItem[field.name] = "";
+                });
+                append(newItem);
+            };
+            var itemsToAdd = defaultItemCount;
+            for(var i = 0; i < itemsToAdd; i++)_loop(i);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleAdd = function() {
+        if (canAdd) {
+            var newItem = {};
+            fieldConfigs.forEach(function(field) {
+                newItem[field.name] = "";
+            });
+            append(newItem);
+        }
+    };
+    var handleRemove = function(index) {
+        if (canRemove) {
+            remove(index);
+        }
+    };
+    var getFieldError = function(index, fieldName) {
+        var fieldPath = "".concat(item.name, ".").concat(index, ".").concat(fieldName);
+        var pathParts = fieldPath.split(".");
+        var error = errors;
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = pathParts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var part = _step.value;
+                if (error && error[part]) {
+                    error = error[part];
+                } else {
+                    return null;
+                }
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        return error;
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: [
+            (item === null || item === void 0 ? void 0 : item.className) || "w-full"
+        ].join(" "),
+        children: [
+            /*#__PURE__*/ jsx$1(FieldLabel, {
+                item: item
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "space-y-4",
+                children: [
+                    fields.map(function(field, index) {
+                        return /*#__PURE__*/ jsx$1("div", {
+                            className: "border border-[#C8C8C8] rounded-xl p-4 bg-white overflow-scroll",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-start gap-2 flex-wrap lg:flex-nowrap",
+                                children: [
+                                    fieldConfigs.map(function(fieldConfig, fieldIndex) {
+                                        var _fieldConfig_validateOption;
+                                        var fieldName = "".concat(item.name, ".").concat(index, ".").concat(fieldConfig.name);
+                                        var fieldError = getFieldError(index, fieldConfig.name);
+                                        return /*#__PURE__*/ jsxs("div", {
+                                            className: "flex-1 min-w-[200px]",
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "font-medium mb-2 text-sm",
+                                                    children: [
+                                                        fieldConfig.label,
+                                                        (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsx$1("span", {
+                                                            className: "pl-1 text-[#EF5533] font-bold",
+                                                            children: "*"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx$1(Controller, {
+                                                    name: fieldName,
+                                                    control: control,
+                                                    rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
+                                                    render: function(param) {
+                                                        var controllerField = param.field;
+                                                        return /*#__PURE__*/ jsxs("div", {
+                                                            className: "relative",
+                                                            children: [
+                                                                /*#__PURE__*/ jsx$1("input", _object_spread_props(_object_spread({}, controllerField), {
+                                                                    list: "".concat(fieldName, "-datalist"),
+                                                                    type: "text",
+                                                                    className: [
+                                                                        (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
+                                                                        "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
+                                                                    ].join(" "),
+                                                                    placeholder: fieldConfig.placeholder || fieldConfig.label,
+                                                                    disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
+                                                                })),
+                                                                fieldConfig.options && fieldConfig.options.length > 0 && /*#__PURE__*/ jsx$1("datalist", {
+                                                                    id: "".concat(fieldName, "-datalist"),
+                                                                    children: fieldConfig.options.map(function(option, optIndex) {
+                                                                        return /*#__PURE__*/ jsx$1("option", {
+                                                                            value: option.value || option.name,
+                                                                            children: option.name
+                                                                        }, optIndex);
+                                                                    })
+                                                                })
+                                                            ]
+                                                        });
+                                                    }
+                                                }),
+                                                (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxs("div", {
+                                                    className: "pt-1 text-xs text-[#EF5533]",
+                                                    children: [
+                                                        "*",
+                                                        String(fieldError.message)
+                                                    ]
+                                                })
+                                            ]
+                                        }, fieldIndex);
+                                    }),
+                                    addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        onClick: handleAdd,
+                                        className: [
+                                            "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
+                                            "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
+                                            "transition-colors duration-200",
+                                            "flex items-center gap-2 whitespace-nowrap",
+                                            "mt-[30px]"
+                                        ].join(" "),
+                                        children: [
+                                            /*#__PURE__*/ jsx$1(Icon, {
+                                                icon: "mdi:plus",
+                                                className: "w-5 h-5"
+                                            }),
+                                            addButtonText
+                                        ]
+                                    }),
+                                    canRemove && /*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        onClick: function() {
+                                            return handleRemove(index);
+                                        },
+                                        className: [
+                                            "h-11 px-4 rounded-2xl border border-solid border-[#EF5533]",
+                                            "text-[#EF5533] bg-white hover:bg-[#FFF5F3]",
+                                            "transition-colors duration-200",
+                                            "flex items-center gap-2 whitespace-nowrap",
+                                            "mt-[30px]"
+                                        ].join(" "),
+                                        children: [
+                                            /*#__PURE__*/ jsx$1(Icon, {
+                                                icon: "mdi:delete-outline",
+                                                className: "w-5 h-5"
+                                            }),
+                                            removeButtonText
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, field.id);
+                    }),
+                    addButtonPosition === "bottom" && canAdd && /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        onClick: handleAdd,
+                        className: [
+                            "h-11 px-6 rounded-2xl border border-solid border-[#6f6f6f]",
+                            "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
+                            "transition-colors duration-200",
+                            "flex items-center gap-2"
+                        ].join(" "),
+                        children: [
+                            /*#__PURE__*/ jsx$1(Icon, {
+                                icon: "mdi:plus",
+                                className: "w-5 h-5"
+                            }),
+                            addButtonText
+                        ]
+                    }),
+                    maxItems && /*#__PURE__*/ jsxs("div", {
+                        className: "text-xs text-[#777777]",
+                        children: [
+                            "已新增 ",
+                            fields.length,
+                            " / ",
+                            maxItems,
+                            " 項"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
 var Fields = function(param) {
     var formConfig = param.formConfig, _param_fieldsClass = param.fieldsClass, fieldsClass = _param_fieldsClass === void 0 ? "gap-2" : _param_fieldsClass;
     return !!(formConfig === null || formConfig === void 0 ? void 0 : formConfig.length) && (formConfig === null || formConfig === void 0 ? void 0 : formConfig.map(function(item, index) {
@@ -8133,6 +8360,10 @@ var Row = function(param) {
                 return /*#__PURE__*/ createElement(FlatpickrField, _object_spread_props(_object_spread({}, baseConfig), {
                     key: "rowField-".concat(index)
                 }));
+            case "fieldArray":
+                return /*#__PURE__*/ createElement(FieldArray, _object_spread_props(_object_spread({}, baseConfig), {
+                    key: "rowField-".concat(index)
+                }));
             default:
                 return null;
         }
@@ -8153,7 +8384,8 @@ var Form = {
     CheckboxField: CheckboxField,
     BaseCkeditor: BaseCkeditor,
     Dropdown: DropdownList,
-    FlatpickrField: FlatpickrField
+    FlatpickrField: FlatpickrField,
+    FieldArray: FieldArray
 };
 
 function _array_like_to_array$1(arr, len) {

package/index.cjs.css

@@ -1635,6 +1635,9 @@ video {
 .mt-5 {
   margin-top: 1.25rem;
 }
+.mt-\[30px\] {
+  margin-top: 30px;
+}
 .\!block {
   display: block !important;
 }
@@ -1902,6 +1905,9 @@ video {
 .min-w-\[16rem\] {
   min-width: 16rem;
 }
+.min-w-\[200px\] {
+  min-width: 200px;
+}
 .min-w-\[2rem\] {
   min-width: 2rem;
 }
@@ -2184,6 +2190,11 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2198,6 +2209,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -2313,6 +2327,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(101 101 101 / var(--tw-border-opacity, 1));
 }
+.border-\[\#6f6f6f\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(111 111 111 / var(--tw-border-opacity, 1));
+}
 .border-\[\#777777\] {
   --tw-border-opacity: 1;
   border-color: rgb(119 119 119 / var(--tw-border-opacity, 1));
@@ -2337,6 +2355,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
 }
+.border-\[\#EF5533\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 85 51 / var(--tw-border-opacity, 1));
+}
 .border-\[\#ccc\] {
   --tw-border-opacity: 1;
   border-color: rgb(204 204 204 / var(--tw-border-opacity, 1));
@@ -2478,6 +2500,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
 .bg-cyan-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
@@ -3565,6 +3591,14 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-\[\#F5F5F5\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-\[\#FFF5F3\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 245 243 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-\[\#d9d9e2\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(217 217 226 / var(--tw-bg-opacity, 1));
@@ -3584,6 +3618,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-cyan-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));

package/index.esm.css

@@ -1635,6 +1635,9 @@ video {
 .mt-5 {
   margin-top: 1.25rem;
 }
+.mt-\[30px\] {
+  margin-top: 30px;
+}
 .\!block {
   display: block !important;
 }
@@ -1902,6 +1905,9 @@ video {
 .min-w-\[16rem\] {
   min-width: 16rem;
 }
+.min-w-\[200px\] {
+  min-width: 200px;
+}
 .min-w-\[2rem\] {
   min-width: 2rem;
 }
@@ -2184,6 +2190,11 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2198,6 +2209,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -2313,6 +2327,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(101 101 101 / var(--tw-border-opacity, 1));
 }
+.border-\[\#6f6f6f\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(111 111 111 / var(--tw-border-opacity, 1));
+}
 .border-\[\#777777\] {
   --tw-border-opacity: 1;
   border-color: rgb(119 119 119 / var(--tw-border-opacity, 1));
@@ -2337,6 +2355,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
 }
+.border-\[\#EF5533\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 85 51 / var(--tw-border-opacity, 1));
+}
 .border-\[\#ccc\] {
   --tw-border-opacity: 1;
   border-color: rgb(204 204 204 / var(--tw-border-opacity, 1));
@@ -2478,6 +2500,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
 .bg-cyan-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
@@ -3565,6 +3591,14 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-\[\#F5F5F5\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-\[\#FFF5F3\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 245 243 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-\[\#d9d9e2\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(217 217 226 / var(--tw-bg-opacity, 1));
@@ -3584,6 +3618,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-cyan-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.4.60",
+  "version": "0.4.61",
   "sideEffects": [
     "*.css",
     "./src/style.css",

package/src/lib/Form/index.d.ts

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import React from 'react';
 import { FormItem, FormType } from './types';
 interface CkEditorConfig {
     uploadUrl?: string;
@@ -54,6 +55,9 @@ export interface FormModule {
     FlatpickrField: FC<{
         item: FormItem;
     }>;
+    FieldArray: FC<{
+        item: FormItem;
+    }>;
 }
 export declare const City: React.FC<FormType>;
 export declare const Textarea: React.FC<FormType>;

package/src/lib/Form/types.d.ts

@@ -9,6 +9,37 @@ export interface OptionGroup {
     value?: string;
     name?: string;
 }
+export interface FieldArrayField {
+    name: string;
+    label: string;
+    placeholder?: string;
+    options?: Option[];
+    validateOption?: {
+        pattern?: RegExp | {
+            value: RegExp;
+            message: string;
+        };
+        validateMsg?: string;
+        required?: boolean | string;
+        validate?: any;
+        min?: number | {
+            value: number;
+            message: string;
+        };
+        max?: number | {
+            value: number;
+            message: string;
+        };
+        minLength?: number | {
+            value: number;
+            message: string;
+        };
+        maxLength?: number | {
+            value: number;
+            message: string;
+        };
+    };
+}
 interface RadioOption {
     label?: string;
     value?: string;
@@ -137,6 +168,15 @@ export interface FormItem {
     flatpickrOptions?: FlatpickrOptions;
     flatpickrType?: 'time';
     onChange?: (value: any) => void;
+    fieldArrayConfig?: {
+        fields: FieldArrayField[];
+        addButtonText?: string;
+        removeButtonText?: string;
+        maxItems?: number;
+        minItems?: number;
+        defaultItemCount?: number;
+        addButtonPosition?: 'inline' | 'bottom';
+    };
 }
 export interface FormType {
     item: FormItem;