shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/date-field.js

@@ -0,0 +1,303 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var input = require('@/components/input');
+var icons = require('@/icons');
+var utils = require('@/lib/utils');
+var dateFns = require('date-fns');
+var locale = require('date-fns/locale');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const parseStringToDate = (dateStr, format2 = "dd/MM/yyyy") => {
+  if (!dateStr) return null;
+  try {
+    const parsedDate = dateFns.parse(dateStr, format2, /* @__PURE__ */ new Date());
+    return dateFns.isValid(parsedDate) ? parsedDate : null;
+  } catch (error) {
+    return null;
+  }
+};
+const getDateValue = (value, format2 = "dd/MM/yyyy") => {
+  if (!value) return null;
+  if (typeof value === "string") return parseStringToDate(value, format2);
+  return value instanceof Date ? value : null;
+};
+const formatDateToString = (date, dateFormat = "dd/MM/yyyy") => {
+  if (!date || !dateFns.isValid(date)) return "";
+  try {
+    return dateFns.format(date, dateFormat, { locale: locale.vi });
+  } catch (error) {
+    return "";
+  }
+};
+const formatDateInput = (input) => {
+  const digitsOnly = input.replace(/\D/g, "");
+  if (digitsOnly.length <= 2) {
+    return digitsOnly;
+  } else if (digitsOnly.length <= 4) {
+    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2)}`;
+  } else if (digitsOnly.length <= 8) {
+    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}/${digitsOnly.slice(4)}`;
+  } else {
+    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}/${digitsOnly.slice(4, 8)}`;
+  }
+};
+const validateDateInput = (input, dateFormat = "dd/MM/yyyy", minDate, maxDate, strictValidation = false) => {
+  if (!input) return { isValid: true };
+  if (strictValidation && input.length !== 10) {
+    return { isValid: false, error: "Vui l\xF2ng nh\u1EADp \u0111\u1EA7y \u0111\u1EE7 ng\xE0y th\xE1ng (dd/MM/yyyy)" };
+  }
+  if (input.length < 10) {
+    return { isValid: true };
+  }
+  const parts = input.split("/");
+  if (parts.length !== 3) {
+    return { isValid: false, error: "\u0110\u1ECBnh d\u1EA1ng ng\xE0y kh\xF4ng h\u1EE3p l\u1EC7" };
+  }
+  const day = parseInt(parts[0] || "0", 10);
+  const month = parseInt(parts[1] || "0", 10);
+  const year = parseInt(parts[2] || "0", 10);
+  if (isNaN(day) || day < 1 || day > 31) {
+    return { isValid: false, error: "Ng\xE0y ph\u1EA3i t\u1EEB 01 \u0111\u1EBFn 31" };
+  }
+  if (isNaN(month) || month < 1 || month > 12) {
+    return { isValid: false, error: "Th\xE1ng ph\u1EA3i t\u1EEB 01 \u0111\u1EBFn 12" };
+  }
+  if (isNaN(year) || year < 1900 || year > 2099) {
+    return { isValid: false, error: "N\u0103m ph\u1EA3i t\u1EEB 1900 \u0111\u1EBFn 2099" };
+  }
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return { isValid: false, error: "Ng\xE0y kh\xF4ng t\u1ED3n t\u1EA1i" };
+  }
+  if (minDate && date < minDate) {
+    return {
+      isValid: false,
+      error: `Ng\xE0y kh\xF4ng \u0111\u01B0\u1EE3c nh\u1ECF h\u01A1n ${formatDateToString(minDate, dateFormat)}`
+    };
+  }
+  if (maxDate && date > maxDate) {
+    return {
+      isValid: false,
+      error: `Ng\xE0y kh\xF4ng \u0111\u01B0\u1EE3c l\u1EDBn h\u01A1n ${formatDateToString(maxDate, dateFormat)}`
+    };
+  }
+  return { isValid: true };
+};
+const DateField = React__namespace.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    onInputChange,
+    placeholder = "dd/MM/yyyy",
+    label,
+    disabled = false,
+    isError = false,
+    errorText,
+    helpText,
+    size = "default",
+    className,
+    inputClassName,
+    minDate,
+    maxDate,
+    showCalendarIcon = true,
+    showClearButton = true,
+    format: dateFormat = "dd/MM/yyyy",
+    strictValidation = false,
+    style,
+    onCalendarIconClick,
+    onClearValue,
+    onInputClick,
+    ...props
+  }, ref) => {
+    const initialDate = getDateValue(value || defaultValue, dateFormat);
+    const initialInputValue = formatDateToString(initialDate, dateFormat);
+    const [inputValue, setInputValue] = React__namespace.useState(initialInputValue);
+    const [internalError, setInternalError] = React__namespace.useState("");
+    const [isFocused, setIsFocused] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+      const dateValue = getDateValue(value, dateFormat);
+      const formattedValue = formatDateToString(dateValue, dateFormat);
+      setInputValue(formattedValue);
+    }, [value, dateFormat]);
+    const handleInputChange = React__namespace.useCallback(
+      (e) => {
+        const rawValue = e.target.value;
+        const formattedValue = formatDateInput(rawValue);
+        setInputValue(formattedValue);
+        onInputChange?.(formattedValue);
+        const validation = validateDateInput(
+          formattedValue,
+          dateFormat,
+          minDate,
+          maxDate,
+          strictValidation
+        );
+        if (validation.isValid) {
+          setInternalError("");
+          if (formattedValue.length === 10) {
+            const parsedDate = parseStringToDate(formattedValue, dateFormat);
+            if (parsedDate) {
+              onChange?.(parsedDate);
+            } else {
+              onChange?.(null);
+            }
+          }
+        } else {
+          setInternalError(validation.error || "");
+          if (formattedValue.length === 10) {
+            onChange?.(null);
+          }
+        }
+      },
+      [onChange, onInputChange, dateFormat, minDate, maxDate, strictValidation]
+    );
+    const handleInputClick = React__namespace.useCallback(
+      (e) => {
+        const input = e.currentTarget;
+        if (!input || !inputValue) {
+          onInputClick?.();
+          return;
+        }
+        const cursorPosition = input.selectionStart || 0;
+        let selectionStart = 0;
+        let selectionEnd = 0;
+        if (cursorPosition <= 2) {
+          selectionStart = 0;
+          selectionEnd = 2;
+        } else if (cursorPosition <= 5) {
+          selectionStart = 3;
+          selectionEnd = 5;
+        } else {
+          selectionStart = 6;
+          selectionEnd = 10;
+        }
+        setTimeout(() => {
+          input.setSelectionRange(selectionStart, selectionEnd);
+        }, 0);
+        onInputClick?.();
+      },
+      [inputValue, onInputClick]
+    );
+    const handleFocus = React__namespace.useCallback(
+      (e) => {
+        setIsFocused(true);
+        if (inputValue) {
+          const input = e.currentTarget;
+          setTimeout(() => {
+            input.setSelectionRange(0, 2);
+          }, 0);
+        }
+      },
+      [inputValue]
+    );
+    const handleBlur = React__namespace.useCallback(() => {
+      setIsFocused(false);
+      if (inputValue) {
+        const validation = validateDateInput(inputValue, dateFormat, minDate, maxDate, true);
+        if (!validation.isValid) {
+          setInternalError(validation.error || "");
+        }
+      }
+    }, [inputValue, dateFormat, minDate, maxDate]);
+    const handleClear = React__namespace.useCallback(() => {
+      setInputValue("");
+      setInternalError("");
+      onChange?.(null);
+      onInputChange?.("");
+      onClearValue?.();
+    }, [onChange, onInputChange, onClearValue]);
+    const handleKeyPress = React__namespace.useCallback((e) => {
+      if (!/[\d/]/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) {
+        e.preventDefault();
+      }
+    }, []);
+    const handleKeyDown = React__namespace.useCallback(
+      (e) => {
+        const input = e.currentTarget;
+        const cursorPosition = input.selectionStart || 0;
+        const selectionLength = (input.selectionEnd || 0) - (input.selectionStart || 0);
+        const isSegmentSelected = selectionLength > 0;
+        if (e.key === "ArrowLeft" && isSegmentSelected) {
+          e.preventDefault();
+          if (cursorPosition <= 2) {
+            input.setSelectionRange(6, 10);
+          } else if (cursorPosition <= 5) {
+            input.setSelectionRange(0, 2);
+          } else {
+            input.setSelectionRange(3, 5);
+          }
+        } else if (e.key === "ArrowRight" && isSegmentSelected) {
+          e.preventDefault();
+          if (cursorPosition <= 2) {
+            input.setSelectionRange(3, 5);
+          } else if (cursorPosition <= 5) {
+            input.setSelectionRange(6, 10);
+          } else {
+            input.setSelectionRange(0, 2);
+          }
+        } else {
+          handleKeyPress(e);
+        }
+      },
+      [handleKeyPress]
+    );
+    const hasError = isError || !!internalError;
+    const displayErrorText = errorText || internalError;
+    const displayHelpText = isFocused && !hasError ? helpText || `\u0110\u1ECBnh d\u1EA1ng: ${dateFormat.toLowerCase()}` : helpText;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        ref,
+        type: "text",
+        value: inputValue,
+        onChange: handleInputChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onClick: handleInputClick,
+        placeholder,
+        label,
+        disabled,
+        isError: hasError,
+        errorText: displayErrorText,
+        helpText: displayHelpText,
+        size,
+        className: utils.cn("w-full", className),
+        inputClassName: utils.cn("font-mono w-full min-w-0 flex-1", inputClassName),
+        showRemoveIcon: showClearButton && !!inputValue && !disabled,
+        onClearValue: handleClear,
+        buttonIcon: showCalendarIcon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cursor-pointer", "data-calendar-icon": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CalendarOutlinedIcon, { className: "h-5 w-5" }) }) : void 0,
+        maxLength: 10,
+        style: { width: "100%", ...style },
+        ...props
+      }
+    );
+  }
+);
+DateField.displayName = "DateField";
+
+exports.DateField = DateField;
+//# sourceMappingURL=date-field.js.map
+//# sourceMappingURL=date-field.js.map

package/dist/common/interactive/date-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/date-field.tsx"],"names":["format","parse","isValid","vi","React","jsx","Input","cn","CalendarOutlinedIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkIA,MAAM,iBAAA,GAAoB,CAAC,OAAA,EAAiBA,OAAAA,GAAiB,YAAA,KAA8B;AACzF,EAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AACrB,EAAA,IAAI;AACF,IAAA,MAAM,aAAaC,aAAA,CAAM,OAAA,EAASD,OAAAA,kBAAQ,IAAI,MAAM,CAAA;AACpD,IAAA,OAAOE,eAAA,CAAQ,UAAU,CAAA,GAAI,UAAA,GAAa,IAAA;AAAA,EAC5C,SAAS,KAAA,EAAO;AACd,IAAA,OAAO,IAAA;AAAA,EACT;AACF,CAAA;AAKA,MAAM,YAAA,GAAe,CACnB,KAAA,EACAF,OAAAA,GAAiB,YAAA,KACD;AAChB,EAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AACnB,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,iBAAA,CAAkB,OAAOA,OAAM,CAAA;AACrE,EAAA,OAAO,KAAA,YAAiB,OAAO,KAAA,GAAQ,IAAA;AACzC,CAAA;AAKA,MAAM,kBAAA,GAAqB,CAAC,IAAA,EAAmB,UAAA,GAAqB,YAAA,KAAyB;AAC3F,EAAA,IAAI,CAAC,IAAA,IAAQ,CAACE,eAAA,CAAQ,IAAI,GAAG,OAAO,EAAA;AACpC,EAAA,IAAI;AACF,IAAA,OAAOF,eAAO,IAAA,EAAM,UAAA,EAAY,EAAE,MAAA,EAAQG,WAAI,CAAA;AAAA,EAChD,SAAS,KAAA,EAAO;AACd,IAAA,OAAO,EAAA;AAAA,EACT;AACF,CAAA;AAKA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAA0B;AAEjD,EAAA,MAAM,UAAA,GAAa,KAAA,CAAM,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA;AAG1C,EAAA,IAAI,UAAA,CAAW,UAAU,CAAA,EAAG;AAC1B,IAAA,OAAO,UAAA;AAAA,EACT,CAAA,MAAA,IAAW,UAAA,CAAW,MAAA,IAAU,CAAA,EAAG;AACjC,IAAA,OAAO,CAAA,EAAG,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA,EAAI,UAAA,CAAW,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AAAA,EACzD,CAAA,MAAA,IAAW,UAAA,CAAW,MAAA,IAAU,CAAA,EAAG;AACjC,IAAA,OAAO,GAAG,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA,EAAI,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA,EAAI,UAAA,CAAW,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AAAA,EACnF,CAAA,MAAO;AAEL,IAAA,OAAO,GAAG,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA,EAAI,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA,EAAI,WAAW,KAAA,CAAM,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA;AAAA,EACtF;AACF,CAAA;AAKA,MAAM,iBAAA,GAAoB,CACxB,KAAA,EACA,UAAA,GAAqB,cACrB,OAAA,EACA,OAAA,EACA,mBAA4B,KAAA,KACa;AACzC,EAAA,IAAI,CAAC,KAAA,EAAO,OAAO,EAAE,SAAS,IAAA,EAAK;AAGnC,EAAA,IAAI,gBAAA,IAAoB,KAAA,CAAM,MAAA,KAAW,EAAA,EAAI;AAC3C,IAAA,OAAO,EAAE,OAAA,EAAS,KAAA,EAAO,KAAA,EAAO,gFAAA,EAA+C;AAAA,EACjF;AAGA,EAAA,IAAI,KAAA,CAAM,SAAS,EAAA,EAAI;AACrB,IAAA,OAAO,EAAE,SAAS,IAAA,EAAK;AAAA,EACzB;AAGA,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,GAAG,CAAA;AAC7B,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,OAAO,EAAE,OAAA,EAAS,KAAA,EAAO,KAAA,EAAO,4DAAA,EAA8B;AAAA,EAChE;AAEA,EAAA,MAAM,MAAM,QAAA,CAAS,KAAA,CAAM,CAAC,CAAA,IAAK,KAAK,EAAE,CAAA;AACxC,EAAA,MAAM,QAAQ,QAAA,CAAS,KAAA,CAAM,CAAC,CAAA,IAAK,KAAK,EAAE,CAAA;AAC1C,EAAA,MAAM,OAAO,QAAA,CAAS,KAAA,CAAM,CAAC,CAAA,IAAK,KAAK,EAAE,CAAA;AAGzC,EAAA,IAAI,MAAM,GAAG,CAAA,IAAK,GAAA,GAAM,CAAA,IAAK,MAAM,EAAA,EAAI;AACrC,IAAA,OAAO,EAAE,OAAA,EAAS,KAAA,EAAO,KAAA,EAAO,+CAAA,EAAyB;AAAA,EAC3D;AAEA,EAAA,IAAI,MAAM,KAAK,CAAA,IAAK,KAAA,GAAQ,CAAA,IAAK,QAAQ,EAAA,EAAI;AAC3C,IAAA,OAAO,EAAE,OAAA,EAAS,KAAA,EAAO,KAAA,EAAO,gDAAA,EAA0B;AAAA,EAC5D;AAEA,EAAA,IAAI,MAAM,IAAI,CAAA,IAAK,IAAA,GAAO,IAAA,IAAQ,OAAO,IAAA,EAAM;AAC7C,IAAA,OAAO,EAAE,OAAA,EAAS,KAAA,EAAO,KAAA,EAAO,oDAAA,EAA4B;AAAA,EAC9D;AAGA,EAAA,MAAM,OAAO,IAAI,IAAA,CAAK,IAAA,EAAM,KAAA,GAAQ,GAAG,GAAG,CAAA;AAC1C,EAAA,IAAI,IAAA,CAAK,WAAA,EAAY,KAAM,IAAA,IAAQ,IAAA,CAAK,QAAA,EAAS,KAAM,KAAA,GAAQ,CAAA,IAAK,IAAA,CAAK,OAAA,EAAQ,KAAM,GAAA,EAAK;AAC1F,IAAA,OAAO,EAAE,OAAA,EAAS,KAAA,EAAO,KAAA,EAAO,oCAAA,EAAqB;AAAA,EACvD;AAGA,EAAA,IAAI,OAAA,IAAW,OAAO,OAAA,EAAS;AAC7B,IAAA,OAAO;AAAA,MACL,OAAA,EAAS,KAAA;AAAA,MACT,KAAA,EAAO,CAAA,uDAAA,EAA2B,kBAAA,CAAmB,OAAA,EAAS,UAAU,CAAC,CAAA;AAAA,KAC3E;AAAA,EACF;AAGA,EAAA,IAAI,OAAA,IAAW,OAAO,OAAA,EAAS;AAC7B,IAAA,OAAO;AAAA,MACL,OAAA,EAAS,KAAA;AAAA,MACT,KAAA,EAAO,CAAA,uDAAA,EAA2B,kBAAA,CAAmB,OAAA,EAAS,UAAU,CAAC,CAAA;AAAA,KAC3E;AAAA,EACF;AAEA,EAAA,OAAO,EAAE,SAAS,IAAA,EAAK;AACzB,CAAA;AAEO,MAAM,YAAYC,gBAAA,CAAM,UAAA;AAAA,EAC7B,CACE;AAAA,IACE,KAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA,GAAc,YAAA;AAAA,IACd,KAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,OAAA,GAAU,KAAA;AAAA,IACV,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA,GAAO,SAAA;AAAA,IACP,SAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA,GAAmB,IAAA;AAAA,IACnB,eAAA,GAAkB,IAAA;AAAA,IAClB,QAAQ,UAAA,GAAa,YAAA;AAAA,IACrB,gBAAA,GAAmB,KAAA;AAAA,IACnB,KAAA;AAAA,IACA,mBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IAEA,GAAG;AAAA,KAEL,GAAA,KACG;AAEH,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,KAAA,IAAS,YAAA,EAAc,UAAU,CAAA;AAClE,IAAA,MAAM,iBAAA,GAAoB,kBAAA,CAAmB,WAAA,EAAa,UAAU,CAAA;AAGpE,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,gBAAA,CAAM,SAAS,iBAAiB,CAAA;AACpE,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,gBAAA,CAAM,SAAiB,EAAE,CAAA;AACnE,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,gBAAA,CAAM,SAAS,KAAK,CAAA;AAGtD,IAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,MAAA,MAAM,SAAA,GAAY,YAAA,CAAa,KAAA,EAAO,UAAU,CAAA;AAChD,MAAA,MAAM,cAAA,GAAiB,kBAAA,CAAmB,SAAA,EAAW,UAAU,CAAA;AAC/D,MAAA,aAAA,CAAc,cAAc,CAAA;AAAA,IAC9B,CAAA,EAAG,CAAC,KAAA,EAAO,UAAU,CAAC,CAAA;AAGtB,IAAA,MAAM,oBAAoBA,gBAAA,CAAM,WAAA;AAAA,MAC9B,CAAC,CAAA,KAA2C;AAC1C,QAAA,MAAM,QAAA,GAAW,EAAE,MAAA,CAAO,KAAA;AAC1B,QAAA,MAAM,cAAA,GAAiB,gBAAgB,QAAQ,CAAA;AAE/C,QAAA,aAAA,CAAc,cAAc,CAAA;AAC5B,QAAA,aAAA,GAAgB,cAAc,CAAA;AAG9B,QAAA,MAAM,UAAA,GAAa,iBAAA;AAAA,UACjB,cAAA;AAAA,UACA,UAAA;AAAA,UACA,OAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACF;AAEA,QAAA,IAAI,WAAW,OAAA,EAAS;AACtB,UAAA,gBAAA,CAAiB,EAAE,CAAA;AAGnB,UAAA,IAAI,cAAA,CAAe,WAAW,EAAA,EAAI;AAChC,YAAA,MAAM,UAAA,GAAa,iBAAA,CAAkB,cAAA,EAAgB,UAAU,CAAA;AAC/D,YAAA,IAAI,UAAA,EAAY;AACd,cAAA,QAAA,GAAW,UAAU,CAAA;AAAA,YACvB,CAAA,MAAO;AAEL,cAAA,QAAA,GAAW,IAAI,CAAA;AAAA,YACjB;AAAA,UACF;AAAA,QAEF,CAAA,MAAO;AACL,UAAA,gBAAA,CAAiB,UAAA,CAAW,SAAS,EAAE,CAAA;AAEvC,UAAA,IAAI,cAAA,CAAe,WAAW,EAAA,EAAI;AAChC,YAAA,QAAA,GAAW,IAAI,CAAA;AAAA,UACjB;AAAA,QACF;AAAA,MACF,CAAA;AAAA,MACA,CAAC,QAAA,EAAU,aAAA,EAAe,UAAA,EAAY,OAAA,EAAS,SAAS,gBAAgB;AAAA,KAC1E;AAGA,IAAA,MAAM,mBAAmBA,gBAAA,CAAM,WAAA;AAAA,MAC7B,CAAC,CAAA,KAA0C;AACzC,QAAA,MAAM,QAAQ,CAAA,CAAE,aAAA;AAChB,QAAA,IAAI,CAAC,KAAA,IAAS,CAAC,UAAA,EAAY;AAEzB,UAAA,YAAA,IAAe;AACf,UAAA;AAAA,QACF;AAGA,QAAA,MAAM,cAAA,GAAiB,MAAM,cAAA,IAAkB,CAAA;AAK/C,QAAA,IAAI,cAAA,GAAiB,CAAA;AACrB,QAAA,IAAI,YAAA,GAAe,CAAA;AAEnB,QAAA,IAAI,kBAAkB,CAAA,EAAG;AAEvB,UAAA,cAAA,GAAiB,CAAA;AACjB,UAAA,YAAA,GAAe,CAAA;AAAA,QACjB,CAAA,MAAA,IAAW,kBAAkB,CAAA,EAAG;AAE9B,UAAA,cAAA,GAAiB,CAAA;AACjB,UAAA,YAAA,GAAe,CAAA;AAAA,QACjB,CAAA,MAAO;AAEL,UAAA,cAAA,GAAiB,CAAA;AACjB,UAAA,YAAA,GAAe,EAAA;AAAA,QACjB;AAGA,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,KAAA,CAAM,iBAAA,CAAkB,gBAAgB,YAAY,CAAA;AAAA,QACtD,GAAG,CAAC,CAAA;AAGJ,QAAA,YAAA,IAAe;AAAA,MACjB,CAAA;AAAA,MACA,CAAC,YAAY,YAAY;AAAA,KAC3B;AAGA,IAAA,MAAM,cAAcA,gBAAA,CAAM,WAAA;AAAA,MACxB,CAAC,CAAA,KAA0C;AACzC,QAAA,YAAA,CAAa,IAAI,CAAA;AAGjB,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,MAAM,QAAQ,CAAA,CAAE,aAAA;AAEhB,UAAA,UAAA,CAAW,MAAM;AACf,YAAA,KAAA,CAAM,iBAAA,CAAkB,GAAG,CAAC,CAAA;AAAA,UAC9B,GAAG,CAAC,CAAA;AAAA,QACN;AAAA,MACF,CAAA;AAAA,MACA,CAAC,UAAU;AAAA,KACb;AAGA,IAAA,MAAM,UAAA,GAAaA,gBAAA,CAAM,WAAA,CAAY,MAAM;AACzC,MAAA,YAAA,CAAa,KAAK,CAAA;AAGlB,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,MAAM,aAAa,iBAAA,CAAkB,UAAA,EAAY,UAAA,EAAY,OAAA,EAAS,SAAS,IAAI,CAAA;AACnF,QAAA,IAAI,CAAC,WAAW,OAAA,EAAS;AACvB,UAAA,gBAAA,CAAiB,UAAA,CAAW,SAAS,EAAE,CAAA;AAAA,QACzC;AAAA,MACF;AAAA,IACF,GAAG,CAAC,UAAA,EAAY,UAAA,EAAY,OAAA,EAAS,OAAO,CAAC,CAAA;AAG7C,IAAA,MAAM,WAAA,GAAcA,gBAAA,CAAM,WAAA,CAAY,MAAM;AAC1C,MAAA,aAAA,CAAc,EAAE,CAAA;AAChB,MAAA,gBAAA,CAAiB,EAAE,CAAA;AACnB,MAAA,QAAA,GAAW,IAAI,CAAA;AACf,MAAA,aAAA,GAAgB,EAAE,CAAA;AAClB,MAAA,YAAA,IAAe;AAAA,IACjB,CAAA,EAAG,CAAC,QAAA,EAAU,aAAA,EAAe,YAAY,CAAC,CAAA;AAG1C,IAAA,MAAM,cAAA,GAAiBA,gBAAA,CAAM,WAAA,CAAY,CAAC,CAAA,KAA6C;AAErF,MAAA,IACE,CAAC,OAAA,CAAQ,IAAA,CAAK,CAAA,CAAE,GAAG,KACnB,CAAC,CAAC,WAAA,EAAa,QAAA,EAAU,aAAa,YAAA,EAAc,KAAK,EAAE,QAAA,CAAS,CAAA,CAAE,GAAG,CAAA,EACzE;AACA,QAAA,CAAA,CAAE,cAAA,EAAe;AAAA,MACnB;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAGL,IAAA,MAAM,gBAAgBA,gBAAA,CAAM,WAAA;AAAA,MAC1B,CAAC,CAAA,KAA6C;AAC5C,QAAA,MAAM,QAAQ,CAAA,CAAE,aAAA;AAChB,QAAA,MAAM,cAAA,GAAiB,MAAM,cAAA,IAAkB,CAAA;AAC/C,QAAA,MAAM,eAAA,GAAA,CAAmB,KAAA,CAAM,YAAA,IAAgB,CAAA,KAAM,MAAM,cAAA,IAAkB,CAAA,CAAA;AAG7E,QAAA,MAAM,oBAAoB,eAAA,GAAkB,CAAA;AAE5C,QAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,WAAA,IAAe,iBAAA,EAAmB;AAC9C,UAAA,CAAA,CAAE,cAAA,EAAe;AAEjB,UAAA,IAAI,kBAAkB,CAAA,EAAG;AAEvB,YAAA,KAAA,CAAM,iBAAA,CAAkB,GAAG,EAAE,CAAA;AAAA,UAC/B,CAAA,MAAA,IAAW,kBAAkB,CAAA,EAAG;AAE9B,YAAA,KAAA,CAAM,iBAAA,CAAkB,GAAG,CAAC,CAAA;AAAA,UAC9B,CAAA,MAAO;AAEL,YAAA,KAAA,CAAM,iBAAA,CAAkB,GAAG,CAAC,CAAA;AAAA,UAC9B;AAAA,QACF,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,YAAA,IAAgB,iBAAA,EAAmB;AACtD,UAAA,CAAA,CAAE,cAAA,EAAe;AAEjB,UAAA,IAAI,kBAAkB,CAAA,EAAG;AAEvB,YAAA,KAAA,CAAM,iBAAA,CAAkB,GAAG,CAAC,CAAA;AAAA,UAC9B,CAAA,MAAA,IAAW,kBAAkB,CAAA,EAAG;AAE9B,YAAA,KAAA,CAAM,iBAAA,CAAkB,GAAG,EAAE,CAAA;AAAA,UAC/B,CAAA,MAAO;AAEL,YAAA,KAAA,CAAM,iBAAA,CAAkB,GAAG,CAAC,CAAA;AAAA,UAC9B;AAAA,QACF,CAAA,MAAO;AAEL,UAAA,cAAA,CAAe,CAAC,CAAA;AAAA,QAClB;AAAA,MACF,CAAA;AAAA,MACA,CAAC,cAAc;AAAA,KACjB;AAGA,IAAA,MAAM,QAAA,GAAW,OAAA,IAAW,CAAC,CAAC,aAAA;AAC9B,IAAA,MAAM,mBAAmB,SAAA,IAAa,aAAA;AAGtC,IAAA,MAAM,eAAA,GACJ,aAAa,CAAC,QAAA,GAAW,YAAY,CAAA,0BAAA,EAAc,UAAA,CAAW,WAAA,EAAa,CAAA,CAAA,GAAK,QAAA;AAElF,IAAA,uBACEC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,MAAA;AAAA,QACL,KAAA,EAAO,UAAA;AAAA,QACP,QAAA,EAAU,iBAAA;AAAA,QACV,OAAA,EAAS,WAAA;AAAA,QACT,MAAA,EAAQ,UAAA;AAAA,QACR,SAAA,EAAW,aAAA;AAAA,QACX,OAAA,EAAS,gBAAA;AAAA,QACT,WAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA,EAAS,QAAA;AAAA,QACT,SAAA,EAAW,gBAAA;AAAA,QACX,QAAA,EAAU,eAAA;AAAA,QACV,IAAA;AAAA,QACA,SAAA,EAAWC,QAAA,CAAG,QAAA,EAAU,SAAS,CAAA;AAAA,QACjC,cAAA,EAAgBA,QAAA,CAAG,iCAAA,EAAmC,cAAc,CAAA;AAAA,QACpE,cAAA,EAAgB,eAAA,IAAmB,CAAC,CAAC,cAAc,CAAC,QAAA;AAAA,QACpD,YAAA,EAAc,WAAA;AAAA,QACd,UAAA,EACE,gBAAA,mBACEF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EAAiB,oBAAA,EAAkB,IAAA,EAChD,QAAA,kBAAAA,cAAA,CAACG,0BAAA,EAAA,EAAqB,SAAA,EAAU,SAAA,EAAU,GAC5C,CAAA,GACE,MAAA;AAAA,QAEN,SAAA,EAAW,EAAA;AAAA,QACX,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,GAAG,KAAA,EAAM;AAAA,QAChC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"date-field.js","sourcesContent":["'use client';\n\nimport { Input } from '@/components/input';\nimport { CalendarOutlinedIcon } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { format, isValid, parse } from 'date-fns';\nimport { vi } from 'date-fns/locale';\nimport * as React from 'react';\n\nexport interface DateFieldProps {\n  /**\n   * The selected date value\n   * Can be a Date object or a string in 'dd/MM/yyyy' format\n   */\n  value?: Date | string | null;\n\n  /**\n   * Default date value\n   */\n  defaultValue?: Date | string;\n\n  /**\n   * Callback fired when the date value changes\n   */\n  onChange?: (date: Date | null) => void;\n\n  /**\n   * Callback fired when the input value changes (raw string)\n   */\n  onInputChange?: (value: string) => void;\n\n  /**\n   * Input placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * Input label\n   */\n  label?: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the input is in error state\n   */\n  isError?: boolean;\n\n  /**\n   * Error message to display\n   */\n  errorText?: string;\n\n  /**\n   * Help text to display\n   */\n  helpText?: string;\n\n  /**\n   * Input size\n   */\n  size?: 'default' | 'lg';\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n\n  /**\n   * Input CSS classes\n   */\n  inputClassName?: string;\n\n  /**\n   * Minimum date allowed\n   */\n  minDate?: Date;\n\n  /**\n   * Maximum date allowed\n   */\n  maxDate?: Date;\n\n  /**\n   * Whether to show calendar icon\n   */\n  showCalendarIcon?: boolean;\n\n  /**\n   * Whether to show clear button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Custom date format (default: 'dd/MM/yyyy')\n   */\n  format?: string;\n\n  /**\n   * Whether to enable strict validation\n   */\n  strictValidation?: boolean;\n\n  /**\n   * Inline styles\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Callback when calendar icon is clicked\n   */\n  onCalendarIconClick?: () => void;\n\n  /**\n   * Callback when clear button is clicked\n   */\n  onClearValue?: () => void;\n\n  /**\n   * Callback when input is clicked\n   */\n  onInputClick?: () => void;\n}\n\n/**\n * Converts a date string in dd/MM/yyyy format to a Date object\n */\nconst parseStringToDate = (dateStr: string, format: string = 'dd/MM/yyyy'): Date | null => {\n  if (!dateStr) return null;\n  try {\n    const parsedDate = parse(dateStr, format, new Date());\n    return isValid(parsedDate) ? parsedDate : null;\n  } catch (error) {\n    return null;\n  }\n};\n\n/**\n * Gets a Date object from either a Date or a string\n */\nconst getDateValue = (\n  value: Date | string | null | undefined,\n  format: string = 'dd/MM/yyyy',\n): Date | null => {\n  if (!value) return null;\n  if (typeof value === 'string') return parseStringToDate(value, format);\n  return value instanceof Date ? value : null;\n};\n\n/**\n * Formats a date to string\n */\nconst formatDateToString = (date: Date | null, dateFormat: string = 'dd/MM/yyyy'): string => {\n  if (!date || !isValid(date)) return '';\n  try {\n    return format(date, dateFormat, { locale: vi });\n  } catch (error) {\n    return '';\n  }\n};\n\n/**\n * Smart date input formatter that handles partial input\n */\nconst formatDateInput = (input: string): string => {\n  // Remove all non-digit characters\n  const digitsOnly = input.replace(/\\D/g, '');\n\n  // Apply dd/MM/yyyy format progressively\n  if (digitsOnly.length <= 2) {\n    return digitsOnly;\n  } else if (digitsOnly.length <= 4) {\n    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2)}`;\n  } else if (digitsOnly.length <= 8) {\n    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}/${digitsOnly.slice(4)}`;\n  } else {\n    // Limit to 8 digits (ddMMyyyy)\n    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}/${digitsOnly.slice(4, 8)}`;\n  }\n};\n\n/**\n * Validate date input with strict rules\n */\nconst validateDateInput = (\n  input: string,\n  dateFormat: string = 'dd/MM/yyyy',\n  minDate?: Date,\n  maxDate?: Date,\n  strictValidation: boolean = false,\n): { isValid: boolean; error?: string } => {\n  if (!input) return { isValid: true };\n\n  // Check if input is complete (dd/MM/yyyy = 10 characters)\n  if (strictValidation && input.length !== 10) {\n    return { isValid: false, error: 'Vui lòng nhập đầy đủ ngày tháng (dd/MM/yyyy)' };\n  }\n\n  // For incomplete input, don't show error yet\n  if (input.length < 10) {\n    return { isValid: true };\n  }\n\n  // Parse components manually for strict validation\n  const parts = input.split('/');\n  if (parts.length !== 3) {\n    return { isValid: false, error: 'Định dạng ngày không hợp lệ' };\n  }\n\n  const day = parseInt(parts[0] || '0', 10);\n  const month = parseInt(parts[1] || '0', 10);\n  const year = parseInt(parts[2] || '0', 10);\n\n  // Validate ranges\n  if (isNaN(day) || day < 1 || day > 31) {\n    return { isValid: false, error: 'Ngày phải từ 01 đến 31' };\n  }\n\n  if (isNaN(month) || month < 1 || month > 12) {\n    return { isValid: false, error: 'Tháng phải từ 01 đến 12' };\n  }\n\n  if (isNaN(year) || year < 1900 || year > 2099) {\n    return { isValid: false, error: 'Năm phải từ 1900 đến 2099' };\n  }\n\n  // Check if date is valid (e.g., 31/02/2023 is invalid)\n  const date = new Date(year, month - 1, day);\n  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {\n    return { isValid: false, error: 'Ngày không tồn tại' };\n  }\n\n  // Check min date\n  if (minDate && date < minDate) {\n    return {\n      isValid: false,\n      error: `Ngày không được nhỏ hơn ${formatDateToString(minDate, dateFormat)}`,\n    };\n  }\n\n  // Check max date\n  if (maxDate && date > maxDate) {\n    return {\n      isValid: false,\n      error: `Ngày không được lớn hơn ${formatDateToString(maxDate, dateFormat)}`,\n    };\n  }\n\n  return { isValid: true };\n};\n\nexport const DateField = React.forwardRef<HTMLInputElement, DateFieldProps>(\n  (\n    {\n      value,\n      defaultValue,\n      onChange,\n      onInputChange,\n      placeholder = 'dd/MM/yyyy',\n      label,\n      disabled = false,\n      isError = false,\n      errorText,\n      helpText,\n      size = 'default',\n      className,\n      inputClassName,\n      minDate,\n      maxDate,\n      showCalendarIcon = true,\n      showClearButton = true,\n      format: dateFormat = 'dd/MM/yyyy',\n      strictValidation = false,\n      style,\n      onCalendarIconClick,\n      onClearValue,\n      onInputClick,\n\n      ...props\n    },\n    ref,\n  ) => {\n    // Convert initial value to date\n    const initialDate = getDateValue(value || defaultValue, dateFormat);\n    const initialInputValue = formatDateToString(initialDate, dateFormat);\n\n    // Internal state\n    const [inputValue, setInputValue] = React.useState(initialInputValue);\n    const [internalError, setInternalError] = React.useState<string>('');\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    // Update input value when external value changes\n    React.useEffect(() => {\n      const dateValue = getDateValue(value, dateFormat);\n      const formattedValue = formatDateToString(dateValue, dateFormat);\n      setInputValue(formattedValue);\n    }, [value, dateFormat]);\n\n    // Handle input change\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const rawValue = e.target.value;\n        const formattedValue = formatDateInput(rawValue);\n\n        setInputValue(formattedValue);\n        onInputChange?.(formattedValue);\n\n        // Validate and parse date\n        const validation = validateDateInput(\n          formattedValue,\n          dateFormat,\n          minDate,\n          maxDate,\n          strictValidation,\n        );\n\n        if (validation.isValid) {\n          setInternalError('');\n\n          // Only parse and set date if input is complete (10 characters)\n          if (formattedValue.length === 10) {\n            const parsedDate = parseStringToDate(formattedValue, dateFormat);\n            if (parsedDate) {\n              onChange?.(parsedDate);\n            } else {\n              // Only clear if the complete input is invalid\n              onChange?.(null);\n            }\n          }\n          // Don't clear date for incomplete input - let user continue typing\n        } else {\n          setInternalError(validation.error || '');\n          // Only call onChange with null for complete invalid dates\n          if (formattedValue.length === 10) {\n            onChange?.(null);\n          }\n        }\n      },\n      [onChange, onInputChange, dateFormat, minDate, maxDate, strictValidation],\n    );\n\n    // Handle input click - segmented selection based on cursor position\n    const handleInputClick = React.useCallback(\n      (e: React.MouseEvent<HTMLInputElement>) => {\n        const input = e.currentTarget;\n        if (!input || !inputValue) {\n          // Call external onClick handler if provided\n          onInputClick?.();\n          return;\n        }\n\n        // Get cursor position\n        const cursorPosition = input.selectionStart || 0;\n\n        // Determine which segment to select based on cursor position\n        // Format: dd/MM/yyyy (10 characters)\n        // Positions: 01/34/6789\n        let selectionStart = 0;\n        let selectionEnd = 0;\n\n        if (cursorPosition <= 2) {\n          // Day segment (positions 0-1)\n          selectionStart = 0;\n          selectionEnd = 2;\n        } else if (cursorPosition <= 5) {\n          // Month segment (positions 3-4)\n          selectionStart = 3;\n          selectionEnd = 5;\n        } else {\n          // Year segment (positions 6-9)\n          selectionStart = 6;\n          selectionEnd = 10;\n        }\n\n        // Select the segment\n        setTimeout(() => {\n          input.setSelectionRange(selectionStart, selectionEnd);\n        }, 0);\n\n        // Call external onClick handler if provided\n        onInputClick?.();\n      },\n      [inputValue, onInputClick],\n    );\n\n    // Handle focus with segmented selection\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n\n        // Select first segment (day) when focusing\n        if (inputValue) {\n          const input = e.currentTarget;\n          // Use setTimeout to ensure selection happens after focus\n          setTimeout(() => {\n            input.setSelectionRange(0, 2); // Select day segment\n          }, 0);\n        }\n      },\n      [inputValue],\n    );\n\n    // Handle blur\n    const handleBlur = React.useCallback(() => {\n      setIsFocused(false);\n\n      // On blur, validate more strictly\n      if (inputValue) {\n        const validation = validateDateInput(inputValue, dateFormat, minDate, maxDate, true);\n        if (!validation.isValid) {\n          setInternalError(validation.error || '');\n        }\n      }\n    }, [inputValue, dateFormat, minDate, maxDate]);\n\n    // Handle clear\n    const handleClear = React.useCallback(() => {\n      setInputValue('');\n      setInternalError('');\n      onChange?.(null);\n      onInputChange?.('');\n      onClearValue?.();\n    }, [onChange, onInputChange, onClearValue]);\n\n    // Handle key press\n    const handleKeyPress = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n      // Allow only digits and forward slash\n      if (\n        !/[\\d/]/.test(e.key) &&\n        !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)\n      ) {\n        e.preventDefault();\n      }\n    }, []);\n\n    // Handle key down for segment navigation\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        const input = e.currentTarget;\n        const cursorPosition = input.selectionStart || 0;\n        const selectionLength = (input.selectionEnd || 0) - (input.selectionStart || 0);\n\n        // Check if we have a segment selected\n        const isSegmentSelected = selectionLength > 0;\n\n        if (e.key === 'ArrowLeft' && isSegmentSelected) {\n          e.preventDefault();\n          // Move to previous segment\n          if (cursorPosition <= 2) {\n            // At day segment, go to year segment (wrap around)\n            input.setSelectionRange(6, 10);\n          } else if (cursorPosition <= 5) {\n            // At month segment, go to day\n            input.setSelectionRange(0, 2);\n          } else {\n            // At year segment, go to month\n            input.setSelectionRange(3, 5);\n          }\n        } else if (e.key === 'ArrowRight' && isSegmentSelected) {\n          e.preventDefault();\n          // Move to next segment\n          if (cursorPosition <= 2) {\n            // At day segment, go to month\n            input.setSelectionRange(3, 5);\n          } else if (cursorPosition <= 5) {\n            // At month segment, go to year\n            input.setSelectionRange(6, 10);\n          } else {\n            // At year segment, go to day (wrap around)\n            input.setSelectionRange(0, 2);\n          }\n        } else {\n          // Call original key press handler for other keys\n          handleKeyPress(e);\n        }\n      },\n      [handleKeyPress],\n    );\n\n    // Determine error state and message\n    const hasError = isError || !!internalError;\n    const displayErrorText = errorText || internalError;\n\n    // Show help text with format hint when focused and no error\n    const displayHelpText =\n      isFocused && !hasError ? helpText || `Định dạng: ${dateFormat.toLowerCase()}` : helpText;\n\n    return (\n      <Input\n        ref={ref}\n        type=\"text\"\n        value={inputValue}\n        onChange={handleInputChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onClick={handleInputClick}\n        placeholder={placeholder}\n        label={label}\n        disabled={disabled}\n        isError={hasError}\n        errorText={displayErrorText}\n        helpText={displayHelpText}\n        size={size}\n        className={cn('w-full', className)}\n        inputClassName={cn('font-mono w-full min-w-0 flex-1', inputClassName)}\n        showRemoveIcon={showClearButton && !!inputValue && !disabled}\n        onClearValue={handleClear}\n        buttonIcon={\n          showCalendarIcon ? (\n            <div className=\"cursor-pointer\" data-calendar-icon>\n              <CalendarOutlinedIcon className=\"h-5 w-5\" />\n            </div>\n          ) : undefined\n        }\n        maxLength={10} // dd/MM/yyyy = 10 characters\n        style={{ width: '100%', ...style }}\n        {...props}\n      />\n    );\n  },\n);\n\nDateField.displayName = 'DateField';\n"]}

package/dist/common/interactive/date-field.mjs

@@ -0,0 +1,281 @@
+import { jsx } from 'react/jsx-runtime';
+import { Input } from '@/components/input';
+import { CalendarOutlinedIcon } from '@/icons';
+import { cn } from '@/lib/utils';
+import { isValid, format, parse } from 'date-fns';
+import { vi } from 'date-fns/locale';
+import * as React from 'react';
+
+const parseStringToDate = (dateStr, format2 = "dd/MM/yyyy") => {
+  if (!dateStr) return null;
+  try {
+    const parsedDate = parse(dateStr, format2, /* @__PURE__ */ new Date());
+    return isValid(parsedDate) ? parsedDate : null;
+  } catch (error) {
+    return null;
+  }
+};
+const getDateValue = (value, format2 = "dd/MM/yyyy") => {
+  if (!value) return null;
+  if (typeof value === "string") return parseStringToDate(value, format2);
+  return value instanceof Date ? value : null;
+};
+const formatDateToString = (date, dateFormat = "dd/MM/yyyy") => {
+  if (!date || !isValid(date)) return "";
+  try {
+    return format(date, dateFormat, { locale: vi });
+  } catch (error) {
+    return "";
+  }
+};
+const formatDateInput = (input) => {
+  const digitsOnly = input.replace(/\D/g, "");
+  if (digitsOnly.length <= 2) {
+    return digitsOnly;
+  } else if (digitsOnly.length <= 4) {
+    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2)}`;
+  } else if (digitsOnly.length <= 8) {
+    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}/${digitsOnly.slice(4)}`;
+  } else {
+    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}/${digitsOnly.slice(4, 8)}`;
+  }
+};
+const validateDateInput = (input, dateFormat = "dd/MM/yyyy", minDate, maxDate, strictValidation = false) => {
+  if (!input) return { isValid: true };
+  if (strictValidation && input.length !== 10) {
+    return { isValid: false, error: "Vui l\xF2ng nh\u1EADp \u0111\u1EA7y \u0111\u1EE7 ng\xE0y th\xE1ng (dd/MM/yyyy)" };
+  }
+  if (input.length < 10) {
+    return { isValid: true };
+  }
+  const parts = input.split("/");
+  if (parts.length !== 3) {
+    return { isValid: false, error: "\u0110\u1ECBnh d\u1EA1ng ng\xE0y kh\xF4ng h\u1EE3p l\u1EC7" };
+  }
+  const day = parseInt(parts[0] || "0", 10);
+  const month = parseInt(parts[1] || "0", 10);
+  const year = parseInt(parts[2] || "0", 10);
+  if (isNaN(day) || day < 1 || day > 31) {
+    return { isValid: false, error: "Ng\xE0y ph\u1EA3i t\u1EEB 01 \u0111\u1EBFn 31" };
+  }
+  if (isNaN(month) || month < 1 || month > 12) {
+    return { isValid: false, error: "Th\xE1ng ph\u1EA3i t\u1EEB 01 \u0111\u1EBFn 12" };
+  }
+  if (isNaN(year) || year < 1900 || year > 2099) {
+    return { isValid: false, error: "N\u0103m ph\u1EA3i t\u1EEB 1900 \u0111\u1EBFn 2099" };
+  }
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return { isValid: false, error: "Ng\xE0y kh\xF4ng t\u1ED3n t\u1EA1i" };
+  }
+  if (minDate && date < minDate) {
+    return {
+      isValid: false,
+      error: `Ng\xE0y kh\xF4ng \u0111\u01B0\u1EE3c nh\u1ECF h\u01A1n ${formatDateToString(minDate, dateFormat)}`
+    };
+  }
+  if (maxDate && date > maxDate) {
+    return {
+      isValid: false,
+      error: `Ng\xE0y kh\xF4ng \u0111\u01B0\u1EE3c l\u1EDBn h\u01A1n ${formatDateToString(maxDate, dateFormat)}`
+    };
+  }
+  return { isValid: true };
+};
+const DateField = React.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    onInputChange,
+    placeholder = "dd/MM/yyyy",
+    label,
+    disabled = false,
+    isError = false,
+    errorText,
+    helpText,
+    size = "default",
+    className,
+    inputClassName,
+    minDate,
+    maxDate,
+    showCalendarIcon = true,
+    showClearButton = true,
+    format: dateFormat = "dd/MM/yyyy",
+    strictValidation = false,
+    style,
+    onCalendarIconClick,
+    onClearValue,
+    onInputClick,
+    ...props
+  }, ref) => {
+    const initialDate = getDateValue(value || defaultValue, dateFormat);
+    const initialInputValue = formatDateToString(initialDate, dateFormat);
+    const [inputValue, setInputValue] = React.useState(initialInputValue);
+    const [internalError, setInternalError] = React.useState("");
+    const [isFocused, setIsFocused] = React.useState(false);
+    React.useEffect(() => {
+      const dateValue = getDateValue(value, dateFormat);
+      const formattedValue = formatDateToString(dateValue, dateFormat);
+      setInputValue(formattedValue);
+    }, [value, dateFormat]);
+    const handleInputChange = React.useCallback(
+      (e) => {
+        const rawValue = e.target.value;
+        const formattedValue = formatDateInput(rawValue);
+        setInputValue(formattedValue);
+        onInputChange?.(formattedValue);
+        const validation = validateDateInput(
+          formattedValue,
+          dateFormat,
+          minDate,
+          maxDate,
+          strictValidation
+        );
+        if (validation.isValid) {
+          setInternalError("");
+          if (formattedValue.length === 10) {
+            const parsedDate = parseStringToDate(formattedValue, dateFormat);
+            if (parsedDate) {
+              onChange?.(parsedDate);
+            } else {
+              onChange?.(null);
+            }
+          }
+        } else {
+          setInternalError(validation.error || "");
+          if (formattedValue.length === 10) {
+            onChange?.(null);
+          }
+        }
+      },
+      [onChange, onInputChange, dateFormat, minDate, maxDate, strictValidation]
+    );
+    const handleInputClick = React.useCallback(
+      (e) => {
+        const input = e.currentTarget;
+        if (!input || !inputValue) {
+          onInputClick?.();
+          return;
+        }
+        const cursorPosition = input.selectionStart || 0;
+        let selectionStart = 0;
+        let selectionEnd = 0;
+        if (cursorPosition <= 2) {
+          selectionStart = 0;
+          selectionEnd = 2;
+        } else if (cursorPosition <= 5) {
+          selectionStart = 3;
+          selectionEnd = 5;
+        } else {
+          selectionStart = 6;
+          selectionEnd = 10;
+        }
+        setTimeout(() => {
+          input.setSelectionRange(selectionStart, selectionEnd);
+        }, 0);
+        onInputClick?.();
+      },
+      [inputValue, onInputClick]
+    );
+    const handleFocus = React.useCallback(
+      (e) => {
+        setIsFocused(true);
+        if (inputValue) {
+          const input = e.currentTarget;
+          setTimeout(() => {
+            input.setSelectionRange(0, 2);
+          }, 0);
+        }
+      },
+      [inputValue]
+    );
+    const handleBlur = React.useCallback(() => {
+      setIsFocused(false);
+      if (inputValue) {
+        const validation = validateDateInput(inputValue, dateFormat, minDate, maxDate, true);
+        if (!validation.isValid) {
+          setInternalError(validation.error || "");
+        }
+      }
+    }, [inputValue, dateFormat, minDate, maxDate]);
+    const handleClear = React.useCallback(() => {
+      setInputValue("");
+      setInternalError("");
+      onChange?.(null);
+      onInputChange?.("");
+      onClearValue?.();
+    }, [onChange, onInputChange, onClearValue]);
+    const handleKeyPress = React.useCallback((e) => {
+      if (!/[\d/]/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) {
+        e.preventDefault();
+      }
+    }, []);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        const input = e.currentTarget;
+        const cursorPosition = input.selectionStart || 0;
+        const selectionLength = (input.selectionEnd || 0) - (input.selectionStart || 0);
+        const isSegmentSelected = selectionLength > 0;
+        if (e.key === "ArrowLeft" && isSegmentSelected) {
+          e.preventDefault();
+          if (cursorPosition <= 2) {
+            input.setSelectionRange(6, 10);
+          } else if (cursorPosition <= 5) {
+            input.setSelectionRange(0, 2);
+          } else {
+            input.setSelectionRange(3, 5);
+          }
+        } else if (e.key === "ArrowRight" && isSegmentSelected) {
+          e.preventDefault();
+          if (cursorPosition <= 2) {
+            input.setSelectionRange(3, 5);
+          } else if (cursorPosition <= 5) {
+            input.setSelectionRange(6, 10);
+          } else {
+            input.setSelectionRange(0, 2);
+          }
+        } else {
+          handleKeyPress(e);
+        }
+      },
+      [handleKeyPress]
+    );
+    const hasError = isError || !!internalError;
+    const displayErrorText = errorText || internalError;
+    const displayHelpText = isFocused && !hasError ? helpText || `\u0110\u1ECBnh d\u1EA1ng: ${dateFormat.toLowerCase()}` : helpText;
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "text",
+        value: inputValue,
+        onChange: handleInputChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onClick: handleInputClick,
+        placeholder,
+        label,
+        disabled,
+        isError: hasError,
+        errorText: displayErrorText,
+        helpText: displayHelpText,
+        size,
+        className: cn("w-full", className),
+        inputClassName: cn("font-mono w-full min-w-0 flex-1", inputClassName),
+        showRemoveIcon: showClearButton && !!inputValue && !disabled,
+        onClearValue: handleClear,
+        buttonIcon: showCalendarIcon ? /* @__PURE__ */ jsx("div", { className: "cursor-pointer", "data-calendar-icon": true, children: /* @__PURE__ */ jsx(CalendarOutlinedIcon, { className: "h-5 w-5" }) }) : void 0,
+        maxLength: 10,
+        style: { width: "100%", ...style },
+        ...props
+      }
+    );
+  }
+);
+DateField.displayName = "DateField";
+
+export { DateField };
+//# sourceMappingURL=date-field.mjs.map
+//# sourceMappingURL=date-field.mjs.map