shad-m 1.0.0

package/dist/common/interactive/copy-tooltip.mjs

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useCallback, useEffect } from 'react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, TooltipArrow } from '../../components/tooltip';
+import { cn } from '../../lib/utils';
+
+const CopyTooltip = React.forwardRef(
+  ({
+    // Trigger props
+    trigger,
+    triggerAsChild = false,
+    triggerClassName,
+    // Tooltip behavior props
+    delayDuration = 700,
+    open: controlledOpen,
+    onOpenChange: controlledOnOpenChange,
+    defaultOpen = false,
+    disableHoverableContent = true,
+    // Arrow props
+    showArrow = true,
+    arrowClassName,
+    // Content props
+    children,
+    text,
+    responseContent = "\u0110\xE3 sao ch\xE9p",
+    contentClassName,
+    childrenClassName,
+    // Copy behavior props
+    onCopySuccess,
+    onCopyError,
+    resetDelay = 2e3,
+    // Tooltip provider props
+    skipDelayDuration = 300,
+    // Other props
+    className,
+    ...props
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const [status, setStatus] = useState("idle");
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : internalOpen && status !== "idle";
+    const setOpen = isControlled ? controlledOnOpenChange : setInternalOpen;
+    const handleOpenChange = useCallback(
+      (newOpen) => {
+        setOpen?.(newOpen);
+      },
+      [setOpen]
+    );
+    const copyToClipboard = useCallback(
+      async (textToCopy) => {
+        try {
+          await navigator.clipboard.writeText(textToCopy);
+          setStatus("copied");
+          setInternalOpen(true);
+          onCopySuccess?.(textToCopy);
+          return true;
+        } catch (error) {
+          const err = error;
+          setStatus("failed");
+          setInternalOpen(true);
+          onCopyError?.(err);
+          console.error("Failed to copy text to clipboard:", err);
+          return false;
+        }
+      },
+      [onCopySuccess, onCopyError]
+    );
+    const handleTriggerClick = useCallback(
+      (event) => {
+        event.preventDefault();
+        if (text) {
+          copyToClipboard(text);
+        }
+      },
+      [text, copyToClipboard]
+    );
+    useEffect(() => {
+      if (status === "copied" || status === "failed") {
+        const timeout = setTimeout(() => {
+          setStatus("idle");
+          setInternalOpen(false);
+        }, resetDelay);
+        return () => clearTimeout(timeout);
+      }
+    }, [status, resetDelay]);
+    return /* @__PURE__ */ jsx(
+      TooltipProvider,
+      {
+        delayDuration,
+        skipDelayDuration,
+        disableHoverableContent,
+        children: /* @__PURE__ */ jsxs(
+          Tooltip,
+          {
+            open,
+            onOpenChange: handleOpenChange,
+            defaultOpen: false,
+            delayDuration,
+            disableHoverableContent,
+            children: [
+              trigger && /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  asChild: triggerAsChild,
+                  className: cn("cursor-pointer", triggerClassName),
+                  onClick: handleTriggerClick,
+                  children: trigger
+                }
+              ),
+              children && /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  asChild: triggerAsChild,
+                  className: cn("cursor-pointer", triggerClassName),
+                  onClick: handleTriggerClick,
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                TooltipContent,
+                {
+                  ref,
+                  showArrow,
+                  className: cn("flex flex-col px-3 py-1", className, contentClassName),
+                  ...props,
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: cn(childrenClassName), children: responseContent }),
+                    showArrow && /* @__PURE__ */ jsx(TooltipArrow, { className: cn("fill-foreground !h-[5px] !w-[8px]", arrowClassName) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+CopyTooltip.displayName = "CopyTooltip";
+var copy_tooltip_default = CopyTooltip;
+
+export { CopyTooltip, copy_tooltip_default as default };
+//# sourceMappingURL=copy-tooltip.mjs.map
+//# sourceMappingURL=copy-tooltip.mjs.map

package/dist/common/interactive/copy-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/copy-tooltip.tsx"],"names":[],"mappings":"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","file":"copy-tooltip.mjs","sourcesContent":["import React, { ComponentPropsWithoutRef, useCallback, useEffect, useState } from 'react';\nimport {\n  Tooltip,\n  TooltipArrow,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../../components/tooltip';\nimport { type CopyStatus } from '../../hooks/useCopyToClipboard';\nimport { cn } from '../../lib/utils';\n\nexport interface CopyTooltipProps extends ComponentPropsWithoutRef<typeof TooltipContent> {\n  // Trigger props\n  trigger?: React.ReactNode;\n  triggerAsChild?: boolean;\n  triggerClassName?: string;\n\n  // Content props\n  children?: React.ReactNode;\n  text?: string;\n  responseContent?: string;\n  contentClassName?: string;\n  childrenClassName?: string;\n\n  // Tooltip behavior props\n  delayDuration?: number;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n  disableHoverableContent?: boolean;\n\n  // Arrow props\n  showArrow?: boolean;\n  arrowClassName?: string;\n\n  // Copy behavior props\n  onCopySuccess?: (text: string) => void;\n  onCopyError?: (error: Error) => void;\n  resetDelay?: number;\n\n  // Tooltip provider props\n  skipDelayDuration?: number;\n}\n\nconst CopyTooltip = React.forwardRef<React.ElementRef<typeof TooltipContent>, CopyTooltipProps>(\n  (\n    {\n      // Trigger props\n      trigger,\n      triggerAsChild = false,\n      triggerClassName,\n\n      // Tooltip behavior props\n      delayDuration = 700,\n      open: controlledOpen,\n      onOpenChange: controlledOnOpenChange,\n      defaultOpen = false,\n      disableHoverableContent = true,\n\n      // Arrow props\n      showArrow = true,\n      arrowClassName,\n\n      // Content props\n      children,\n      text,\n      responseContent = 'Đã sao chép',\n      contentClassName,\n      childrenClassName,\n\n      // Copy behavior props\n      onCopySuccess,\n      onCopyError,\n      resetDelay = 2000,\n\n      // Tooltip provider props\n      skipDelayDuration = 300,\n\n      // Other props\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const [status, setStatus] = useState<CopyStatus>('idle');\n\n    // Use controlled or uncontrolled state\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen && status !== 'idle';\n    const setOpen = isControlled ? controlledOnOpenChange : setInternalOpen;\n\n    const handleOpenChange = useCallback(\n      (newOpen: boolean) => {\n        setOpen?.(newOpen);\n      },\n      [setOpen],\n    );\n\n    const copyToClipboard = useCallback(\n      async (textToCopy: string): Promise<boolean> => {\n        try {\n          await navigator.clipboard.writeText(textToCopy);\n          setStatus('copied');\n          setInternalOpen(true);\n          onCopySuccess?.(textToCopy);\n          return true;\n        } catch (error) {\n          const err = error as Error;\n          setStatus('failed');\n          setInternalOpen(true);\n          onCopyError?.(err);\n          console.error('Failed to copy text to clipboard:', err);\n          return false;\n        }\n      },\n      [onCopySuccess, onCopyError],\n    );\n\n    const handleTriggerClick = useCallback(\n      (event: React.MouseEvent) => {\n        event.preventDefault();\n        if (text) {\n          copyToClipboard(text);\n        }\n      },\n      [text, copyToClipboard],\n    );\n\n    // Reset status after specified delay\n    useEffect(() => {\n      if (status === 'copied' || status === 'failed') {\n        const timeout = setTimeout(() => {\n          setStatus('idle');\n          setInternalOpen(false);\n        }, resetDelay);\n\n        return () => clearTimeout(timeout);\n      }\n    }, [status, resetDelay]);\n\n    return (\n      <TooltipProvider\n        delayDuration={delayDuration}\n        skipDelayDuration={skipDelayDuration}\n        disableHoverableContent={disableHoverableContent}\n      >\n        <Tooltip\n          open={open}\n          onOpenChange={handleOpenChange}\n          defaultOpen={false}\n          delayDuration={delayDuration}\n          disableHoverableContent={disableHoverableContent}\n        >\n          {trigger && (\n            <TooltipTrigger\n              asChild={triggerAsChild}\n              className={cn('cursor-pointer', triggerClassName)}\n              onClick={handleTriggerClick}\n            >\n              {trigger}\n            </TooltipTrigger>\n          )}\n          {children && (\n            <TooltipTrigger\n              asChild={triggerAsChild}\n              className={cn('cursor-pointer', triggerClassName)}\n              onClick={handleTriggerClick}\n            >\n              {children}\n            </TooltipTrigger>\n          )}\n          <TooltipContent\n            ref={ref}\n            showArrow={showArrow}\n            className={cn('flex flex-col px-3 py-1', className, contentClassName)}\n            {...props}\n          >\n            <div className={cn(childrenClassName)}>{responseContent}</div>\n            {showArrow && (\n              <TooltipArrow className={cn('fill-foreground !h-[5px] !w-[8px]', arrowClassName)} />\n            )}\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    );\n  },\n);\n\nCopyTooltip.displayName = 'CopyTooltip';\n\nexport { CopyTooltip };\nexport default CopyTooltip;\n"]}

package/dist/common/interactive/date-field.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+export interface DateFieldProps {
+    /**
+     * The selected date value
+     * Can be a Date object or a string in 'dd/MM/yyyy' format
+     */
+    value?: Date | string | null;
+    /**
+     * Default date value
+     */
+    defaultValue?: Date | string;
+    /**
+     * Callback fired when the date value changes
+     */
+    onChange?: (date: Date | null) => void;
+    /**
+     * Callback fired when the input value changes (raw string)
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * Input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Input label
+     */
+    label?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is in error state
+     */
+    isError?: boolean;
+    /**
+     * Error message to display
+     */
+    errorText?: string;
+    /**
+     * Help text to display
+     */
+    helpText?: string;
+    /**
+     * Input size
+     */
+    size?: 'default' | 'lg';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Input CSS classes
+     */
+    inputClassName?: string;
+    /**
+     * Minimum date allowed
+     */
+    minDate?: Date;
+    /**
+     * Maximum date allowed
+     */
+    maxDate?: Date;
+    /**
+     * Whether to show calendar icon
+     */
+    showCalendarIcon?: boolean;
+    /**
+     * Whether to show clear button
+     */
+    showClearButton?: boolean;
+    /**
+     * Custom date format (default: 'dd/MM/yyyy')
+     */
+    format?: string;
+    /**
+     * Whether to enable strict validation
+     */
+    strictValidation?: boolean;
+    /**
+     * Inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback when calendar icon is clicked
+     */
+    onCalendarIconClick?: () => void;
+    /**
+     * Callback when clear button is clicked
+     */
+    onClearValue?: () => void;
+    /**
+     * Callback when input is clicked
+     */
+    onInputClick?: () => void;
+}
+export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=date-field.d.ts.map

package/dist/common/interactive/date-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../../src/common/interactive/date-field.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAiID,eAAO,MAAM,SAAS,yFA8QrB,CAAC"}

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":"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","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"]}