@esic-lab/data-core-ui 0.0.41 → 0.0.42

package/dist/index.css

@@ -32,6 +32,7 @@
     --color-green-400: #69c57d;
     --color-green-500: #43b75d;
     --color-green-600: #3da755;
+    --color-blue-100: #b0deff;
     --color-blue-500: #0095ff;
     --color-blue-800: #00528c;
     --color-indigo-100: oklch(93% 0.034 272.788);
@@ -348,9 +349,15 @@
   .mr-\[8px\] {
     margin-right: 8px;
   }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -495,6 +502,9 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-\[10px\] {
     width: 10px;
   }
@@ -618,6 +628,9 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
   .grid-cols-\[1fr_50px\] {
     grid-template-columns: 1fr 50px;
   }
@@ -666,6 +679,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -977,6 +993,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .text-center {
+    text-align: center;
+  }
   .text-left {
     text-align: left;
   }
@@ -1093,6 +1112,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1288,6 +1316,13 @@
       }
     }
   }
+  .hover\:bg-blue-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-100);
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {

package/dist/index.d.mts

@@ -271,7 +271,7 @@ interface DatePickerBasicProps {
     className?: string;
     size?: "small" | "middle" | "large";
 }
-declare function DatePickerBasic({ value, onChange, required, label, error, placeholder, disabled, defaultValue, minDate, maxDate, disabledDate, className, size, }: DatePickerBasicProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerBasic({ value, onChange, label, required, error, disabled, placeholder, minDate, maxDate, disabledDate, }: DatePickerBasicProps): react_jsx_runtime.JSX.Element;
 
 interface ColorPickerProps {
     value: string | null;

package/dist/index.d.ts

@@ -271,7 +271,7 @@ interface DatePickerBasicProps {
     className?: string;
     size?: "small" | "middle" | "large";
 }
-declare function DatePickerBasic({ value, onChange, required, label, error, placeholder, disabled, defaultValue, minDate, maxDate, disabledDate, className, size, }: DatePickerBasicProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerBasic({ value, onChange, label, required, error, disabled, placeholder, minDate, maxDate, disabledDate, }: DatePickerBasicProps): react_jsx_runtime.JSX.Element;
 
 interface ColorPickerProps {
     value: string | null;

package/dist/index.js

@@ -1285,68 +1285,114 @@ function InputFieldNumber({
 }
 
 // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
-var import_antd5 = require("antd");
+var import_react8 = require("react");
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
+var import_buddhistEra = __toESM(require_buddhistEra());
 var import_date_fns = require("date-fns");
 var import_locale = require("date-fns/locale");
-var import_th_TH = __toESM(require("antd/es/date-picker/locale/th_TH"));
-var import_buddhistEra = __toESM(require_buddhistEra());
 var import_jsx_runtime23 = require("react/jsx-runtime");
 import_dayjs.default.extend(import_buddhistEra.default);
-var buddhistLocale = {
-  ...import_th_TH.default,
-  lang: {
-    ...import_th_TH.default.lang,
-    fieldDateFormat: "BBBB-MM-DD",
-    fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
-    yearFormat: "BBBB",
-    cellYearFormat: "BBBB"
-  }
-};
+import_dayjs.default.locale("th");
 function DatePickerBasic({
   value,
   onChange,
-  required,
   label,
+  required,
   error,
-  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
-  defaultValue,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   minDate,
   maxDate,
-  disabledDate,
-  className,
-  size = "middle"
+  disabledDate
 }) {
-  const formatToThaiBE = (date) => {
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const current = value ? (0, import_dayjs.default)(value) : null;
+  const today = (0, import_dayjs.default)();
+  const formatThaiBE = (date) => {
     const formatted = (0, import_date_fns.format)(date, "dd MMMM yyyy", { locale: import_locale.th });
-    const year = parseInt((0, import_date_fns.format)(date, "yyyy"));
-    const yearBE = year + 543;
-    return formatted.replace(/\d{4}$/, String(yearBE));
+    const year = parseInt((0, import_date_fns.format)(date, "yyyy")) + 543;
+    return formatted.replace(/\d{4}$/, String(year));
+  };
+  const monthNames = [
+    "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21",
+    "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C",
+    "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21",
+    "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19",
+    "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21",
+    "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19",
+    "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21",
+    "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21",
+    "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19",
+    "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21",
+    "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
+    "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
+  ];
+  const [calendar, setCalendar] = (0, import_react8.useState)(current || today);
+  const daysInMonth = calendar.daysInMonth();
+  const firstDayOfMonth = calendar.startOf("month").day();
+  const isDisabled = (date) => {
+    if (disabledDate && disabledDate(date.toDate())) return true;
+    if (minDate && date.isBefore((0, import_dayjs.default)(minDate), "day")) return true;
+    if (maxDate && date.isAfter((0, import_dayjs.default)(maxDate), "day")) return true;
+    return false;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "container-input", style: { fontFamily: "Kanit", fontSize: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+  const handleSelect = (d) => {
+    const selected = calendar.date(d);
+    if (isDisabled(selected)) return;
+    onChange(selected.toDate());
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { fontFamily: "Kanit", fontSize: 16 }, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mb-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "body-1", children: label }),
       required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-red-500", children: "*" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_antd5.DatePicker,
+      "div",
       {
-        className: `body-1 w-full ${className ?? ""}`,
-        placeholder,
-        disabled,
-        allowClear: true,
-        size,
-        value: value ? (0, import_dayjs.default)(value) : null,
-        defaultValue: defaultValue ? (0, import_dayjs.default)(defaultValue) : void 0,
-        minDate: minDate ? (0, import_dayjs.default)(minDate) : void 0,
-        maxDate: maxDate ? (0, import_dayjs.default)(maxDate) : void 0,
-        disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
-        onChange: (d) => onChange(d ? d.toDate() : null),
-        format: (d) => d ? formatToThaiBE(d.toDate()) : "",
-        locale: buddhistLocale,
-        style: { fontFamily: "Kanit", fontSize: 16 }
+        className: `border rounded px-3 py-2 cursor-pointer bg-white ${disabled ? "opacity-50" : ""}`,
+        onClick: () => !disabled && setOpen(!open),
+        children: value ? formatThaiBE(value) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-gray-400", children: placeholder })
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        className: "absolute z-50 mt-2 w-80 p-4 bg-white shadow-xl rounded-lg border",
+        style: { fontFamily: "Kanit", fontSize: 16 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between items-center mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setCalendar(calendar.subtract(1, "month")), className: "px-2", children: "\u25C0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "font-semibold", children: [
+              monthNames[calendar.month()],
+              " ",
+              calendar.year() + 543
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setCalendar(calendar.add(1, "month")), className: "px-2", children: "\u25B6" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid grid-cols-7 text-center text-gray-600 mb-2", children: ["\u0E2D\u0E32", "\u0E08", "\u0E2D", "\u0E1E", "\u0E1E\u0E24", "\u0E28", "\u0E2A"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: d }, d)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
+            Array(firstDayOfMonth).fill(null).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", {}, `empty-${i}`)),
+            Array.from({ length: daysInMonth }, (_, i) => i + 1).map((d) => {
+              const dateObj = calendar.date(d);
+              const disabled2 = isDisabled(dateObj);
+              const selected = current && dateObj.isSame(current, "day");
+              return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  onClick: () => !disabled2 && handleSelect(d),
+                  className: `py-1 rounded cursor-pointer 
+                    ${selected ? "bg-blue-500 text-white" : ""}
+                    ${disabled2 ? "text-gray-400 cursor-not-allowed" : "hover:bg-blue-100"}
+                  `,
+                  children: d
+                },
+                d
+              );
+            })
+          ] })
+        ]
       }
     ),
     error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-red-500 caption-1", children: error })
@@ -1354,7 +1400,7 @@ function DatePickerBasic({
 }
 
 // src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
-var import_antd6 = require("antd");
+var import_antd5 = require("antd");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function ColorPickerBasic({
   value,
@@ -1369,7 +1415,7 @@ function ColorPickerBasic({
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_antd6.ConfigProvider,
+    import_antd5.ConfigProvider,
     {
       theme: {
         token: {
@@ -1384,7 +1430,7 @@ function ColorPickerBasic({
           required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_antd6.ColorPicker,
+          import_antd5.ColorPicker,
           {
             defaultFormat,
             className: `body-1 w-full ${className ?? ""}`,
@@ -1413,7 +1459,7 @@ function ColorPickerBasic({
 }
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-var import_antd7 = require("antd");
+var import_antd6 = require("antd");
 
 // node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -2136,14 +2182,14 @@ function ColorPalettePickerBasic({
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35",
   onClear
 }) {
-  const { token } = import_antd7.theme.useToken();
+  const { token } = import_antd6.theme.useToken();
   const presets = genPresets({
     primary: generate(token.colorPrimary),
     red,
     green
   });
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_antd7.ConfigProvider,
+    import_antd6.ConfigProvider,
     {
       theme: {
         token: {
@@ -2158,7 +2204,7 @@ function ColorPalettePickerBasic({
           required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          import_antd7.ColorPicker,
+          import_antd6.ColorPicker,
           {
             defaultFormat,
             className: `body-1 w-full ${className ?? ""}`,
@@ -2189,7 +2235,7 @@ function ColorPalettePickerBasic({
 }
 
 // src/Select/SelectField/SelectField.tsx
-var import_antd8 = require("antd");
+var import_antd7 = require("antd");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function SelectField({
   value,
@@ -2209,7 +2255,7 @@ function SelectField({
   onClear
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_antd8.ConfigProvider,
+    import_antd7.ConfigProvider,
     {
       theme: {
         token: {
@@ -2224,7 +2270,7 @@ function SelectField({
           required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_antd8.Select,
+          import_antd7.Select,
           {
             showSearch: true,
             value,
@@ -2262,7 +2308,7 @@ function SelectField({
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-var import_antd9 = require("antd");
+var import_antd8 = require("antd");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function SelectFieldGroup({
   value,
@@ -2281,7 +2327,7 @@ function SelectFieldGroup({
   className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_antd9.ConfigProvider,
+    import_antd8.ConfigProvider,
     {
       theme: {
         token: {
@@ -2295,7 +2341,7 @@ function SelectFieldGroup({
           required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_antd9.Select,
+          import_antd8.Select,
           {
             showSearch: true,
             value,
@@ -2332,7 +2378,7 @@ function SelectFieldGroup({
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-var import_antd10 = require("antd");
+var import_antd9 = require("antd");
 
 // src/Select/SelectFieldStatus/StatusMockup.ts
 var status = [
@@ -2359,7 +2405,7 @@ function SelectFieldStatus({
 }) {
   const selectedItem = status.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_antd10.ConfigProvider,
+    import_antd9.ConfigProvider,
     {
       theme: {
         components: {
@@ -2381,7 +2427,7 @@ function SelectFieldStatus({
           required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_antd10.Select,
+          import_antd9.Select,
           {
             disabled,
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
@@ -2402,7 +2448,7 @@ function SelectFieldStatus({
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-var import_antd11 = require("antd");
+var import_antd10 = require("antd");
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status2 = [
@@ -2426,7 +2472,7 @@ function SelectFieldStatusReport({
 }) {
   const selectedItem = status2.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_antd11.ConfigProvider,
+    import_antd10.ConfigProvider,
     {
       theme: {
         components: {
@@ -2448,7 +2494,7 @@ function SelectFieldStatusReport({
           required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_antd11.Select,
+          import_antd10.Select,
           {
             disabled,
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
@@ -2469,8 +2515,8 @@ function SelectFieldStatusReport({
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-var import_antd12 = require("antd");
-var import_react8 = require("react");
+var import_antd11 = require("antd");
+var import_react9 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function SelectFieldTag({
   label,
@@ -2483,10 +2529,10 @@ function SelectFieldTag({
   onChange,
   onClear
 }) {
-  const [internalValue, setInternalValue] = (0, import_react8.useState)([]);
+  const [internalValue, setInternalValue] = (0, import_react9.useState)([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = (0, import_react8.useState)("");
+  const [searchWord, setSearchWord] = (0, import_react9.useState)("");
   const handleChange = (val) => {
     const trimValue = val.map((v) => v.trim());
     const filtered = trimValue.filter((v) => v.trim() !== "");
@@ -2505,7 +2551,7 @@ function SelectFieldTag({
     onChange?.([]);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_antd12.ConfigProvider,
+    import_antd11.ConfigProvider,
     {
       theme: {
         token: {
@@ -2519,7 +2565,7 @@ function SelectFieldTag({
           required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_antd12.Select,
+          import_antd11.Select,
           {
             mode: "tags",
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
@@ -2545,8 +2591,8 @@ function SelectFieldTag({
 
 // src/Select/SelectCustom/SelectCustom.tsx
 var import_icons_react8 = require("@tabler/icons-react");
-var import_antd13 = require("antd");
-var import_react9 = require("react");
+var import_antd12 = require("antd");
+var import_react10 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function SelectCustom({
   label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
@@ -2557,8 +2603,8 @@ function SelectCustom({
   error,
   onClear
 }) {
-  const [value, setValue] = (0, import_react9.useState)([]);
-  const [valueList, setValueList] = (0, import_react9.useState)([]);
+  const [value, setValue] = (0, import_react10.useState)([]);
+  const [valueList, setValueList] = (0, import_react10.useState)([]);
   const handleChange = (selectedValues) => {
     const newValues = selectedValues.filter((v) => !valueList.includes(v));
     setValueList((prev) => {
@@ -2577,7 +2623,7 @@ function SelectCustom({
   };
   const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_antd13.ConfigProvider,
+    import_antd12.ConfigProvider,
     {
       theme: {
         token: {
@@ -2592,7 +2638,7 @@ function SelectCustom({
           required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          import_antd13.Select,
+          import_antd12.Select,
           {
             value,
             onChange: handleChange,
@@ -2619,7 +2665,7 @@ function SelectCustom({
 }
 
 // src/SortFilter/SortFilter.tsx
-var import_antd14 = require("antd");
+var import_antd13 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -2650,7 +2696,7 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function SortFilter({
@@ -2660,11 +2706,11 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = (0, import_react10.useState)();
-  const [monthValue, setMonthValue] = (0, import_react10.useState)();
-  const [quarterValue, setQuartersValue] = (0, import_react10.useState)();
+  const [yearValue, setYearValue] = (0, import_react11.useState)();
+  const [monthValue, setMonthValue] = (0, import_react11.useState)();
+  const [quarterValue, setQuartersValue] = (0, import_react11.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_antd14.ConfigProvider,
+    import_antd13.ConfigProvider,
     {
       theme: {
         token: {
@@ -2738,7 +2784,7 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 var import_icons_react10 = require("@tabler/icons-react");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function FileUploader({
   onUpload,
@@ -2751,10 +2797,10 @@ function FileUploader({
   description,
   label
 }) {
-  const [fileList, setFileList] = (0, import_react11.useState)([]);
-  const [uploading, setUploading] = (0, import_react11.useState)(false);
-  const [dragActive, setDragActive] = (0, import_react11.useState)(false);
-  const inputRef = (0, import_react11.useRef)(null);
+  const [fileList, setFileList] = (0, import_react12.useState)([]);
+  const [uploading, setUploading] = (0, import_react12.useState)(false);
+  const [dragActive, setDragActive] = (0, import_react12.useState)(false);
+  const inputRef = (0, import_react12.useRef)(null);
   const validateFile = (file) => {
     if (accept && !accept.includes(file.type)) {
       onError?.(`Invalid file type. file: ${file.name}`);
@@ -2906,8 +2952,8 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
+var import_antd14 = require("antd");
 var import_antd15 = require("antd");
-var import_antd16 = require("antd");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function Breadcrumbs({
   items,
@@ -2917,7 +2963,7 @@ function Breadcrumbs({
   params
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_antd15.ConfigProvider,
+    import_antd14.ConfigProvider,
     {
       theme: {
         token: {
@@ -2925,7 +2971,7 @@ function Breadcrumbs({
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        import_antd16.Breadcrumb,
+        import_antd15.Breadcrumb,
         {
           items,
           separator,
@@ -2939,7 +2985,7 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-var import_antd17 = require("antd");
+var import_antd16 = require("antd");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
@@ -2949,7 +2995,7 @@ function HeadingPage({ Heading }) {
     year: "numeric"
   });
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_antd17.ConfigProvider,
+    import_antd16.ConfigProvider,
     {
       theme: {
         token: {
@@ -2968,8 +3014,8 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-var import_antd18 = require("antd");
-var import_react12 = require("react");
+var import_antd17 = require("antd");
+var import_react13 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function ProgressBar({
   percent = 0,
@@ -2983,8 +3029,8 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = (0, import_react12.useState)(0);
-  const progressRef = (0, import_react12.useRef)(null);
+  const [barWidth, setBarWidth] = (0, import_react13.useState)(0);
+  const progressRef = (0, import_react13.useRef)(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
   const defaultSize = type === "circle" ? 43 : size;
@@ -2992,7 +3038,7 @@ function ProgressBar({
     const minCheckpoint = Math.min(...checkpoints);
     strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
   }
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const inner = progressRef.current?.querySelector(".ant-progress-inner");
     if (!inner) return;
     const observer = new ResizeObserver(() => {
@@ -3002,7 +3048,7 @@ function ProgressBar({
     return () => observer.disconnect();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_antd18.ConfigProvider,
+    import_antd17.ConfigProvider,
     {
       theme: {
         token: {
@@ -3011,7 +3057,7 @@ function ProgressBar({
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_antd18.Progress,
+          import_antd17.Progress,
           {
             className: "w-full",
             percent,
@@ -3048,25 +3094,25 @@ function ProgressBar({
 }
 
 // src/KpiSection/KpiSection.tsx
-var import_antd19 = require("antd");
-var import_react14 = require("react");
+var import_antd18 = require("antd");
+var import_react15 = require("react");
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_cuid = __toESM(require("cuid"));
 function useGetKpiSection() {
-  const [nameKpi, setNameKpi] = (0, import_react13.useState)("");
-  const [kpiValue, setKpiValue] = (0, import_react13.useState)("");
-  const [unitValue, setUnitValue] = (0, import_react13.useState)("");
-  const [kpiList, setKpiList] = (0, import_react13.useState)([]);
-  const [editingBackup, setEditingBackup] = (0, import_react13.useState)({});
-  const [selected, setSelected] = (0, import_react13.useState)("2");
-  const [errors, setErrors] = (0, import_react13.useState)({
+  const [nameKpi, setNameKpi] = (0, import_react14.useState)("");
+  const [kpiValue, setKpiValue] = (0, import_react14.useState)("");
+  const [unitValue, setUnitValue] = (0, import_react14.useState)("");
+  const [kpiList, setKpiList] = (0, import_react14.useState)([]);
+  const [editingBackup, setEditingBackup] = (0, import_react14.useState)({});
+  const [selected, setSelected] = (0, import_react14.useState)("2");
+  const [errors, setErrors] = (0, import_react14.useState)({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = (0, import_react13.useState)({});
+  const [itemErrors, setItemErrors] = (0, import_react14.useState)({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3219,18 +3265,18 @@ function KpiSection({ type, onChangeKpiList }) {
     itemErrors,
     setItemErrors
   } = useGetKpiSection();
-  const [messageApi2, messageContainer] = import_antd19.message.useMessage();
-  const [hasShownError, setHasShownError] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const [messageApi2, messageContainer] = import_antd18.message.useMessage();
+  const [hasShownError, setHasShownError] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (onChangeKpiList) {
       onChangeKpiList(kpiList);
     }
   }, [kpiList]);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_antd19.ConfigProvider,
+    import_antd18.ConfigProvider,
     {
       theme: {
         token: {
@@ -3454,16 +3500,16 @@ function KpiSection({ type, onChangeKpiList }) {
 }
 
 // src/Modal/Modal/Modal.tsx
-var import_antd20 = require("antd");
+var import_antd19 = require("antd");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function AntDModal({ children, isOpen, width, onCancel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_antd20.Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_antd19.Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children }) }) });
 }
 
 // src/Indicator/Indicator/Indicator.tsx
 var import_icons_react12 = require("@tabler/icons-react");
-var import_react15 = require("react");
-var import_antd21 = require("antd");
+var import_react16 = require("react");
+var import_antd20 = require("antd");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function Indicator({
   option = [
@@ -3474,22 +3520,22 @@ function Indicator({
   arrayData,
   setArrayData
 }) {
-  const [valueSwitch, setValueSwitch] = (0, import_react15.useState)("TEXT");
-  const [cacheData, setCacheData] = (0, import_react15.useState)({
+  const [valueSwitch, setValueSwitch] = (0, import_react16.useState)("TEXT");
+  const [cacheData, setCacheData] = (0, import_react16.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = (0, import_react15.useState)({
+  const [cacheEditData, setCacheEditData] = (0, import_react16.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [editIndex, setEditIndex] = (0, import_react15.useState)(null);
+  const [editIndex, setEditIndex] = (0, import_react16.useState)(null);
   const handleAddIndicator = () => {
     if (cacheData.textValue.trim() === "") return;
     setArrayData([
@@ -3599,7 +3645,7 @@ function Indicator({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
           index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_antd21.Input,
+            import_antd20.Input,
             {
               className: "body-1 mt-2",
               variant: "underlined",
@@ -3610,7 +3656,7 @@ function Indicator({
           ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
           item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
             index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              import_antd21.Input,
+              import_antd20.Input,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
@@ -3620,7 +3666,7 @@ function Indicator({
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
             index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              import_antd21.Input,
+              import_antd20.Input,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
@@ -3649,11 +3695,11 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 var import_icons_react13 = require("@tabler/icons-react");
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = (0, import_react16.useState)(true);
-  const [filterArray, setFilterArray] = (0, import_react16.useState)([""]);
+  const [isAction, setIsAction] = (0, import_react17.useState)(true);
+  const [filterArray, setFilterArray] = (0, import_react17.useState)([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };

package/dist/index.mjs

@@ -1231,65 +1231,111 @@ function InputFieldNumber({
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
 var import_buddhistEra = __toESM(require_buddhistEra());
-import { DatePicker } from "antd";
+import { useState as useState6 } from "react";
 import { format } from "date-fns";
 import { th as thFns } from "date-fns/locale";
-import th from "antd/es/date-picker/locale/th_TH";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 import_dayjs.default.extend(import_buddhistEra.default);
-var buddhistLocale = {
-  ...th,
-  lang: {
-    ...th.lang,
-    fieldDateFormat: "BBBB-MM-DD",
-    fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
-    yearFormat: "BBBB",
-    cellYearFormat: "BBBB"
-  }
-};
+import_dayjs.default.locale("th");
 function DatePickerBasic({
   value,
   onChange,
-  required,
   label,
+  required,
   error,
-  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
-  defaultValue,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   minDate,
   maxDate,
-  disabledDate,
-  className,
-  size = "middle"
+  disabledDate
 }) {
-  const formatToThaiBE = (date) => {
+  const [open, setOpen] = useState6(false);
+  const current = value ? (0, import_dayjs.default)(value) : null;
+  const today = (0, import_dayjs.default)();
+  const formatThaiBE = (date) => {
     const formatted = format(date, "dd MMMM yyyy", { locale: thFns });
-    const year = parseInt(format(date, "yyyy"));
-    const yearBE = year + 543;
-    return formatted.replace(/\d{4}$/, String(yearBE));
+    const year = parseInt(format(date, "yyyy")) + 543;
+    return formatted.replace(/\d{4}$/, String(year));
   };
-  return /* @__PURE__ */ jsxs19("div", { className: "container-input", style: { fontFamily: "Kanit", fontSize: 16 }, children: [
-    /* @__PURE__ */ jsxs19("div", { children: [
+  const monthNames = [
+    "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21",
+    "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C",
+    "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21",
+    "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19",
+    "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21",
+    "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19",
+    "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21",
+    "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21",
+    "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19",
+    "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21",
+    "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
+    "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
+  ];
+  const [calendar, setCalendar] = useState6(current || today);
+  const daysInMonth = calendar.daysInMonth();
+  const firstDayOfMonth = calendar.startOf("month").day();
+  const isDisabled = (date) => {
+    if (disabledDate && disabledDate(date.toDate())) return true;
+    if (minDate && date.isBefore((0, import_dayjs.default)(minDate), "day")) return true;
+    if (maxDate && date.isAfter((0, import_dayjs.default)(maxDate), "day")) return true;
+    return false;
+  };
+  const handleSelect = (d) => {
+    const selected = calendar.date(d);
+    if (isDisabled(selected)) return;
+    onChange(selected.toDate());
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs19("div", { style: { fontFamily: "Kanit", fontSize: 16 }, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "mb-1", children: [
       /* @__PURE__ */ jsx23("span", { className: "body-1", children: label }),
       required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
     ] }),
     /* @__PURE__ */ jsx23(
-      DatePicker,
+      "div",
       {
-        className: `body-1 w-full ${className ?? ""}`,
-        placeholder,
-        disabled,
-        allowClear: true,
-        size,
-        value: value ? (0, import_dayjs.default)(value) : null,
-        defaultValue: defaultValue ? (0, import_dayjs.default)(defaultValue) : void 0,
-        minDate: minDate ? (0, import_dayjs.default)(minDate) : void 0,
-        maxDate: maxDate ? (0, import_dayjs.default)(maxDate) : void 0,
-        disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
-        onChange: (d) => onChange(d ? d.toDate() : null),
-        format: (d) => d ? formatToThaiBE(d.toDate()) : "",
-        locale: buddhistLocale,
-        style: { fontFamily: "Kanit", fontSize: 16 }
+        className: `border rounded px-3 py-2 cursor-pointer bg-white ${disabled ? "opacity-50" : ""}`,
+        onClick: () => !disabled && setOpen(!open),
+        children: value ? formatThaiBE(value) : /* @__PURE__ */ jsx23("span", { className: "text-gray-400", children: placeholder })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        className: "absolute z-50 mt-2 w-80 p-4 bg-white shadow-xl rounded-lg border",
+        style: { fontFamily: "Kanit", fontSize: 16 },
+        children: [
+          /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center mb-3", children: [
+            /* @__PURE__ */ jsx23("button", { onClick: () => setCalendar(calendar.subtract(1, "month")), className: "px-2", children: "\u25C0" }),
+            /* @__PURE__ */ jsxs19("div", { className: "font-semibold", children: [
+              monthNames[calendar.month()],
+              " ",
+              calendar.year() + 543
+            ] }),
+            /* @__PURE__ */ jsx23("button", { onClick: () => setCalendar(calendar.add(1, "month")), className: "px-2", children: "\u25B6" })
+          ] }),
+          /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-7 text-center text-gray-600 mb-2", children: ["\u0E2D\u0E32", "\u0E08", "\u0E2D", "\u0E1E", "\u0E1E\u0E24", "\u0E28", "\u0E2A"].map((d) => /* @__PURE__ */ jsx23("div", { children: d }, d)) }),
+          /* @__PURE__ */ jsxs19("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
+            Array(firstDayOfMonth).fill(null).map((_, i) => /* @__PURE__ */ jsx23("div", {}, `empty-${i}`)),
+            Array.from({ length: daysInMonth }, (_, i) => i + 1).map((d) => {
+              const dateObj = calendar.date(d);
+              const disabled2 = isDisabled(dateObj);
+              const selected = current && dateObj.isSame(current, "day");
+              return /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  onClick: () => !disabled2 && handleSelect(d),
+                  className: `py-1 rounded cursor-pointer 
+                    ${selected ? "bg-blue-500 text-white" : ""}
+                    ${disabled2 ? "text-gray-400 cursor-not-allowed" : "hover:bg-blue-100"}
+                  `,
+                  children: d
+                },
+                d
+              );
+            })
+          ] })
+        ]
       }
     ),
     error && /* @__PURE__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
@@ -2413,7 +2459,7 @@ function SelectFieldStatusReport({
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
 import { Select as Select5, ConfigProvider as ConfigProvider11 } from "antd";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectFieldTag({
   label,
@@ -2426,10 +2472,10 @@ function SelectFieldTag({
   onChange,
   onClear
 }) {
-  const [internalValue, setInternalValue] = useState6([]);
+  const [internalValue, setInternalValue] = useState7([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = useState6("");
+  const [searchWord, setSearchWord] = useState7("");
   const handleChange = (val) => {
     const trimValue = val.map((v) => v.trim());
     const filtered = trimValue.filter((v) => v.trim() !== "");
@@ -2489,7 +2535,7 @@ function SelectFieldTag({
 // src/Select/SelectCustom/SelectCustom.tsx
 import { IconTrash } from "@tabler/icons-react";
 import { Select as Select6, ConfigProvider as ConfigProvider12 } from "antd";
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectCustom({
   label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
@@ -2500,8 +2546,8 @@ function SelectCustom({
   error,
   onClear
 }) {
-  const [value, setValue] = useState7([]);
-  const [valueList, setValueList] = useState7([]);
+  const [value, setValue] = useState8([]);
+  const [valueList, setValueList] = useState8([]);
   const handleChange = (selectedValues) => {
     const newValues = selectedValues.filter((v) => !valueList.includes(v));
     setValueList((prev) => {
@@ -2593,7 +2639,7 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
 import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function SortFilter({
@@ -2603,9 +2649,9 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = useState8();
-  const [monthValue, setMonthValue] = useState8();
-  const [quarterValue, setQuartersValue] = useState8();
+  const [yearValue, setYearValue] = useState9();
+  const [monthValue, setMonthValue] = useState9();
+  const [quarterValue, setQuartersValue] = useState9();
   return /* @__PURE__ */ jsx32(
     ConfigProvider13,
     {
@@ -2681,7 +2727,7 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
-import { useRef as useRef2, useState as useState9 } from "react";
+import { useRef as useRef2, useState as useState10 } from "react";
 import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
@@ -2694,9 +2740,9 @@ function FileUploader({
   description,
   label
 }) {
-  const [fileList, setFileList] = useState9([]);
-  const [uploading, setUploading] = useState9(false);
-  const [dragActive, setDragActive] = useState9(false);
+  const [fileList, setFileList] = useState10([]);
+  const [uploading, setUploading] = useState10(false);
+  const [dragActive, setDragActive] = useState10(false);
   const inputRef = useRef2(null);
   const validateFile = (file) => {
     if (accept && !accept.includes(file.type)) {
@@ -2912,7 +2958,7 @@ function HeadingPage({ Heading }) {
 
 // src/Progress/ProgressBar.tsx
 import { ConfigProvider as ConfigProvider16, Progress } from "antd";
-import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState11 } from "react";
 import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
@@ -2926,7 +2972,7 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = useState10(0);
+  const [barWidth, setBarWidth] = useState11(0);
   const progressRef = useRef3(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
@@ -2992,24 +3038,24 @@ function ProgressBar({
 
 // src/KpiSection/KpiSection.tsx
 import { ConfigProvider as ConfigProvider17, message } from "antd";
-import { useEffect as useEffect3, useState as useState12 } from "react";
+import { useEffect as useEffect3, useState as useState13 } from "react";
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import cuid from "cuid";
 function useGetKpiSection() {
-  const [nameKpi, setNameKpi] = useState11("");
-  const [kpiValue, setKpiValue] = useState11("");
-  const [unitValue, setUnitValue] = useState11("");
-  const [kpiList, setKpiList] = useState11([]);
-  const [editingBackup, setEditingBackup] = useState11({});
-  const [selected, setSelected] = useState11("2");
-  const [errors, setErrors] = useState11({
+  const [nameKpi, setNameKpi] = useState12("");
+  const [kpiValue, setKpiValue] = useState12("");
+  const [unitValue, setUnitValue] = useState12("");
+  const [kpiList, setKpiList] = useState12([]);
+  const [editingBackup, setEditingBackup] = useState12({});
+  const [selected, setSelected] = useState12("2");
+  const [errors, setErrors] = useState12({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = useState11({});
+  const [itemErrors, setItemErrors] = useState12({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3163,7 +3209,7 @@ function KpiSection({ type, onChangeKpiList }) {
     setItemErrors
   } = useGetKpiSection();
   const [messageApi2, messageContainer] = message.useMessage();
-  const [hasShownError, setHasShownError] = useState12(false);
+  const [hasShownError, setHasShownError] = useState13(false);
   useEffect3(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
@@ -3405,7 +3451,7 @@ function AntDModal({ children, isOpen, width, onCancel }) {
 
 // src/Indicator/Indicator/Indicator.tsx
 import { IconCheck as IconCheck3, IconCirclePlus as IconCirclePlus2, IconPencil as IconPencil2, IconTrash as IconTrash4, IconX as IconX3 } from "@tabler/icons-react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { Input as Input4 } from "antd";
 import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 function Indicator({
@@ -3417,22 +3463,22 @@ function Indicator({
   arrayData,
   setArrayData
 }) {
-  const [valueSwitch, setValueSwitch] = useState13("TEXT");
-  const [cacheData, setCacheData] = useState13({
+  const [valueSwitch, setValueSwitch] = useState14("TEXT");
+  const [cacheData, setCacheData] = useState14({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = useState13({
+  const [cacheEditData, setCacheEditData] = useState14({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [editIndex, setEditIndex] = useState13(null);
+  const [editIndex, setEditIndex] = useState14(null);
   const handleAddIndicator = () => {
     if (cacheData.textValue.trim() === "") return;
     setArrayData([
@@ -3592,11 +3638,11 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 import { IconCheck as IconCheck4, IconFilter as IconFilter2, IconTrash as IconTrash5 } from "@tabler/icons-react";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = useState14(true);
-  const [filterArray, setFilterArray] = useState14([""]);
+  const [isAction, setIsAction] = useState15(true);
+  const [filterArray, setFilterArray] = useState15([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",