@esic-lab/data-core-ui 0.0.16 → 0.0.17

package/dist/index.js

@@ -680,7 +680,7 @@ function Switch({ label, checked, onChange, disabled }) {
       onChange(!checked);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-[10px]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-[10px]", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `body-1 ${disabled ? "opacity-50 select-none" : ""}`, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
@@ -922,17 +922,28 @@ function AntDataTable({
       onRowSelect && onRowSelect(newSelectedRowKeys);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_antd.Table,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_antd.ConfigProvider,
     {
-      dataSource,
-      columns,
-      rowSelection: rowCheckbox ? rowSelection : void 0,
-      pagination: { position: ["bottomCenter"], pageSize },
-      style: { width },
-      scroll: { y: height }
+      theme: {
+        components: {},
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_antd.Table,
+        {
+          dataSource,
+          columns,
+          rowSelection: rowCheckbox ? rowSelection : void 0,
+          pagination: { position: ["bottomCenter"], pageSize },
+          style: { width },
+          scroll: { y: height }
+        }
+      )
     }
-  );
+  ) });
 }
 
 // src/Calendar/Calendar/Calendar.tsx
@@ -1147,7 +1158,7 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 function InputField({
   value,
   onChange,
-  placeholder,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   title,
   require: require2,
   bottomText,
@@ -1156,7 +1167,8 @@ function InputField({
   errorMessage,
   addonBefore,
   addonAfter,
-  defaultValue
+  defaultValue,
+  className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_antd2.ConfigProvider,
@@ -1166,9 +1178,9 @@ function InputField({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1178,6 +1190,7 @@ function InputField({
             value,
             placeholder,
             disabled,
+            className: `body-1 w-full ${className ?? ""}`,
             onChange: (e) => onChange(e.target.value || void 0),
             allowClear: true,
             addonBefore,
@@ -1212,30 +1225,41 @@ function TextAreaInput({
   error,
   disabled
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "body-1 mb-[8px]", children: [
-      label,
-      " ",
-      required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-red-500", children: "\xA0*" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      TextArea,
-      {
-        value,
-        rows: height,
-        style: {
-          ...error && resizable ? { borderColor: "red" } : {},
-          ...disabled || !resizable ? { resize: "none" } : {}
-        },
-        placeholder,
-        maxLength,
-        showCount,
-        onChange: (e) => onChange(e.target.value),
-        disabled
-      }
-    ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-600 body-1", children: error })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_antd3.ConfigProvider,
+    {
+      theme: {
+        components: {},
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "body-1 mb-[8px]", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-red-500", children: "\xA0*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          TextArea,
+          {
+            value,
+            rows: height,
+            style: {
+              ...error && resizable ? { borderColor: "red" } : {},
+              ...disabled || !resizable ? { resize: "none" } : {}
+            },
+            placeholder,
+            maxLength,
+            showCount,
+            onChange: (e) => onChange(e.target.value),
+            disabled
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-600 body-1", children: error })
+      ] })
+    }
+  ) });
 }
 
 // src/ColorPicker/ColorPicker.tsx
@@ -1263,9 +1287,9 @@ function ColorPickerBasic({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1273,7 +1297,7 @@ function ColorPickerBasic({
           import_antd4.ColorPicker,
           {
             defaultFormat,
-            className,
+            className: `body-1 w-full ${className ?? ""}`,
             value,
             defaultValue: "#ffff",
             onChange,
@@ -1316,7 +1340,7 @@ function DatePickerBasic({
   bottomText,
   showError,
   errorMessage,
-  placeholder,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
   defaultValue,
   minDate,
@@ -1336,16 +1360,16 @@ function DatePickerBasic({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           import_antd5.DatePicker,
           {
-            className: `body-1 ${className ?? ""}`,
+            className: `body-1 w-full ${className ?? ""}`,
             value,
             placeholder,
             onChange,
@@ -1406,9 +1430,9 @@ function DatePickerRangePicker({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1418,7 +1442,7 @@ function DatePickerRangePicker({
             format: dateFormat,
             value,
             placeholder,
-            className: `body-1 ${className ?? ""}`,
+            className: `body-1 w-full ${className ?? ""}`,
             onChange,
             allowClear: true,
             disabled,
@@ -1443,17 +1467,7 @@ function DatePickerRangePicker({
 // src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
 var import_antd7 = require("antd");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function TimePickerBasic({
-  value,
-  onChange,
-  require: require2,
-  title,
-  bottomText,
-  showError,
-  errorMessage,
-  placeholder,
-  disabled
-}) {
+function TimePickerBasic({ value, onChange, require: require2, title, bottomText, showError, errorMessage, placeholder, disabled, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_antd7.ConfigProvider,
     {
@@ -1462,9 +1476,9 @@ function TimePickerBasic({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1472,7 +1486,7 @@ function TimePickerBasic({
           import_antd7.TimePicker,
           {
             format: "HH:mm",
-            className: "body-1",
+            className: `body-1 w-full ${className ?? ""}`,
             value,
             placeholder,
             onChange,
@@ -1502,7 +1516,8 @@ function TimePickerRangePicker({
   bottomText,
   showError,
   errorMessage,
-  disabled
+  disabled,
+  className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_antd8.ConfigProvider,
@@ -1512,9 +1527,9 @@ function TimePickerRangePicker({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1524,7 +1539,7 @@ function TimePickerRangePicker({
             format: "HH:mm",
             value,
             placeholder,
-            className: "body-1",
+            className: `body-1 w-full ${className ?? ""}`,
             onChange,
             allowClear: true,
             disabled
@@ -1546,7 +1561,7 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 function SelectField({
   value,
   onChange,
-  placeholder,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   title,
   require: require2,
   bottomText,
@@ -1558,26 +1573,20 @@ function SelectField({
   mode,
   prefix,
   prefixSize = 20,
-  handleSearch
+  handleSearch,
+  className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_antd9.ConfigProvider,
     {
       theme: {
-        components: {
-          Select: {
-            hoverBorderColor: "#D9D9D9",
-            activeBorderColor: "#D9D9D9",
-            activeOutlineColor: "#D9D9D9"
-          }
-        },
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1588,7 +1597,7 @@ function SelectField({
             value,
             defaultValue,
             onChange,
-            className: "body-3 flex justify-center w-full",
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
@@ -1616,7 +1625,7 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 function SelectFieldGroup({
   value,
   onChange,
-  placeholder,
+  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   title,
   require: require2,
   bottomText,
@@ -1628,26 +1637,20 @@ function SelectFieldGroup({
   mode,
   prefix,
   prefixSize = 20,
-  handleSearch
+  handleSearch,
+  className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_antd10.ConfigProvider,
     {
       theme: {
-        components: {
-          Select: {
-            hoverBorderColor: "#D9D9D9",
-            activeBorderColor: "#D9D9D9",
-            activeOutlineColor: "#D9D9D9"
-          }
-        },
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1658,7 +1661,7 @@ function SelectFieldGroup({
             value,
             defaultValue,
             onChange,
-            className: "body-3 flex justify-center w-full",
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
@@ -1716,7 +1719,9 @@ function SelectFieldStatus({
   bottomText,
   disabled,
   showError,
-  errorMessage
+  errorMessage,
+  options,
+  className
 }) {
   const selectedItem = status.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -1735,9 +1740,9 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1748,15 +1753,11 @@ function SelectFieldStatus({
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
-            className: "body-3 custom-select flex justify-center w-full",
+            className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
-            filterSort: (optionA, optionB) => (optionA?.label ?? "").toLowerCase().localeCompare((optionB?.label ?? "").toLowerCase()),
-            options: status.map((s) => ({
-              value: s.value,
-              label: s.label,
-              color: s.color
-            }))
+            filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
+            options
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
@@ -1790,7 +1791,8 @@ function SelectFieldStatusReport({
   bottomText,
   disabled,
   showError,
-  errorMessage
+  errorMessage,
+  className
 }) {
   const selectedItem = status2.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1809,9 +1811,9 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1822,7 +1824,7 @@ function SelectFieldStatusReport({
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
-            className: "body-3 custom-select flex justify-center w-full",
+            className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
             filterSort: (optionA, optionB) => (optionA?.label ?? "").toLowerCase().localeCompare((optionB?.label ?? "").toLowerCase()),
@@ -1856,6 +1858,7 @@ function SelectFieldTag({
   showError,
   errorMessage,
   value: controlledValue,
+  className,
   onChange
 }) {
   const [internalValue, setInternalValue] = (0, import_react8.useState)([]);
@@ -1883,20 +1886,13 @@ function SelectFieldTag({
     import_antd13.ConfigProvider,
     {
       theme: {
-        components: {
-          Select: {
-            hoverBorderColor: "#D9D9D9",
-            activeBorderColor: "#D9D9D9",
-            activeOutlineColor: "#D9D9D9"
-          }
-        },
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "container-input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "body-3", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "body-1", children: title }),
           " ",
           require2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
@@ -1904,7 +1900,7 @@ function SelectFieldTag({
           import_antd13.Select,
           {
             mode: "tags",
-            className: "flex justify-center w-full",
+            className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
             value,
             onChange: handleChange,