@undefine-ui/design-system 3.10.0 → 3.10.2

package/dist/index.cjs

@@ -168,12 +168,22 @@ __export(index_exports, {
   defaultSettings: () => defaultSettings,
   dialogClasses: () => dialogClasses,
   drawerClasses: () => drawerClasses,
+  endOfDayTimestamp: () => endOfDayTimestamp,
   error: () => error,
   fCurrency: () => fCurrency,
   fData: () => fData,
+  fDate: () => fDate,
+  fDateRangeShortLabel: () => fDateRangeShortLabel,
+  fDateTime: () => fDateTime,
+  fIsAfter: () => fIsAfter,
+  fIsBetween: () => fIsBetween,
+  fIsSame: () => fIsSame,
   fNumber: () => fNumber,
   fPercent: () => fPercent,
   fShortenNumber: () => fShortenNumber,
+  fTime: () => fTime,
+  fTimestamp: () => fTimestamp,
+  fToNow: () => fToNow,
   feedbackDialogClasses: () => feedbackDialogClasses,
   fileData: () => fileData,
   fileNameByUrl: () => fileNameByUrl,
@@ -219,6 +229,7 @@ __export(index_exports, {
   shadows: () => shadows,
   snakeCase: () => snakeCase,
   splitFullname: () => splitFullname,
+  startOfDayTimestamp: () => startOfDayTimestamp,
   stylesMode: () => stylesMode,
   success: () => success,
   surface: () => surface,
@@ -295,6 +306,218 @@ var sentenceCase = (string) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
+// src/libs/format-time.ts
+var import_date_fns = require("date-fns");
+var fDate = (date, newFormat) => {
+  const fm = newFormat || "dd MMM, yyyy";
+  if (typeof date === "number") {
+    try {
+      return (0, import_date_fns.format)((0, import_date_fns.fromUnixTime)(date), fm);
+    } catch (error2) {
+      console.error("Error formatting Unix timestamp:", error2);
+      return "";
+    }
+  }
+  if (date instanceof Date || typeof date === "string") {
+    try {
+      return (0, import_date_fns.format)(new Date(date), fm);
+    } catch (error2) {
+      console.error("Error formatting date:", error2);
+      return "";
+    }
+  }
+  return "";
+};
+var fTime = (date) => {
+  if (date) {
+    try {
+      if (typeof date === "number") {
+        return (0, import_date_fns.format)((0, import_date_fns.fromUnixTime)(date), "p");
+      }
+      return (0, import_date_fns.format)(new Date(date), "p");
+    } catch (error2) {
+      console.error("Error formatting time:", error2);
+      return "";
+    }
+  }
+  return "";
+};
+var fDateTime = (date, newFormat) => {
+  const fm = newFormat || "dd MMM yyyy p";
+  if (date) {
+    try {
+      if (typeof date === "number") {
+        return (0, import_date_fns.format)((0, import_date_fns.fromUnixTime)(date), fm);
+      }
+      return (0, import_date_fns.format)(new Date(date), fm);
+    } catch (error2) {
+      console.error("Error formatting date-time:", error2);
+      return "";
+    }
+  }
+  return "";
+};
+var fTimestamp = (date) => {
+  if (date) {
+    try {
+      if (typeof date === "number") {
+        return date > 9466848e5 ? date : date * 1e3;
+      }
+      return (0, import_date_fns.getTime)(new Date(date));
+    } catch (error2) {
+      console.error("Error getting timestamp:", error2);
+      return "";
+    }
+  }
+  return "";
+};
+var fToNow = (date) => {
+  if (date) {
+    try {
+      if (typeof date === "number") {
+        return (0, import_date_fns.formatDistanceToNow)((0, import_date_fns.fromUnixTime)(date), { addSuffix: true });
+      }
+      return (0, import_date_fns.formatDistanceToNow)(new Date(date), { addSuffix: true });
+    } catch (error2) {
+      console.error("Error formatting time distance:", error2);
+      return "";
+    }
+  }
+  return "";
+};
+var startOfDayTimestamp = (date) => {
+  if (date) {
+    try {
+      let dateObj;
+      if (typeof date === "number") {
+        dateObj = (0, import_date_fns.fromUnixTime)(date);
+      } else {
+        dateObj = new Date(date);
+      }
+      if (Number.isNaN(dateObj.getTime())) {
+        throw new Error("Invalid date input");
+      }
+      const start = (0, import_date_fns.startOfDay)(dateObj);
+      return Math.floor((0, import_date_fns.getTime)(start) / 1e3);
+    } catch (error2) {
+      console.error("Error calculating start of day timestamp:", error2);
+      return 0;
+    }
+  }
+  return 0;
+};
+var endOfDayTimestamp = (date) => {
+  if (date) {
+    try {
+      let dateObj;
+      if (typeof date === "number") {
+        dateObj = (0, import_date_fns.fromUnixTime)(date);
+      } else {
+        dateObj = new Date(date);
+      }
+      if (Number.isNaN(dateObj.getTime())) {
+        throw new Error("Invalid date input");
+      }
+      const end = (0, import_date_fns.endOfDay)(dateObj);
+      return Math.floor((0, import_date_fns.getTime)(end) / 1e3);
+    } catch (error2) {
+      console.error("Error calculating end of day timestamp:", error2);
+      return 0;
+    }
+  }
+  return 0;
+};
+var fIsBetween = (inputDate, startDate, endDate) => {
+  if (!inputDate || !startDate || !endDate) {
+    return false;
+  }
+  try {
+    const input = typeof inputDate === "string" ? (0, import_date_fns.parseISO)(inputDate) : new Date(inputDate);
+    const start = typeof startDate === "string" ? (0, import_date_fns.parseISO)(startDate) : new Date(startDate);
+    const end = typeof endDate === "string" ? (0, import_date_fns.parseISO)(endDate) : new Date(endDate);
+    if (!(0, import_date_fns.isValid)(input) || !(0, import_date_fns.isValid)(start) || !(0, import_date_fns.isValid)(end)) {
+      return false;
+    }
+    const inputTime = input.getTime();
+    const startTime = start.getTime();
+    const endTime = end.getTime();
+    return inputTime >= startTime && inputTime <= endTime;
+  } catch (error2) {
+    console.error("Error checking if date is between:", error2);
+    return false;
+  }
+};
+var fIsAfter = (startDate, endDate) => {
+  if (!startDate || !endDate) {
+    return false;
+  }
+  try {
+    const start = typeof startDate === "string" ? (0, import_date_fns.parseISO)(startDate) : new Date(startDate);
+    const end = typeof endDate === "string" ? (0, import_date_fns.parseISO)(endDate) : new Date(endDate);
+    if (!(0, import_date_fns.isValid)(start) || !(0, import_date_fns.isValid)(end)) {
+      return "Invalid time value";
+    }
+    return (0, import_date_fns.isAfter)(start, end);
+  } catch (error2) {
+    console.error("Error comparing dates:", error2);
+    return false;
+  }
+};
+var fIsSame = (startDate, endDate, units = "year") => {
+  if (!startDate || !endDate) {
+    return false;
+  }
+  try {
+    const start = typeof startDate === "string" ? (0, import_date_fns.parseISO)(startDate) : new Date(startDate);
+    const end = typeof endDate === "string" ? (0, import_date_fns.parseISO)(endDate) : new Date(endDate);
+    if (!(0, import_date_fns.isValid)(start) || !(0, import_date_fns.isValid)(end)) {
+      return "Invalid time value";
+    }
+    switch (units) {
+      case "day":
+        return (0, import_date_fns.isSameDay)(start, end);
+      case "month":
+        return (0, import_date_fns.isSameMonth)(start, end);
+      case "year":
+      default:
+        return (0, import_date_fns.isSameYear)(start, end);
+    }
+  } catch (error2) {
+    console.error("Error checking if dates are the same:", error2);
+    return false;
+  }
+};
+var fDateRangeShortLabel = (startDate, endDate, initial = false) => {
+  if (!startDate || !endDate) return "Invalid time value";
+  try {
+    const start = typeof startDate === "string" ? (0, import_date_fns.parseISO)(startDate) : new Date(startDate);
+    const end = typeof endDate === "string" ? (0, import_date_fns.parseISO)(endDate) : new Date(endDate);
+    const isValidDate = (0, import_date_fns.isValid)(start) && (0, import_date_fns.isValid)(end);
+    const dateIsAfter = fIsAfter(start, end);
+    if (!isValidDate || dateIsAfter === "Invalid time value" || dateIsAfter) {
+      return "Invalid time value";
+    }
+    let label = `${fDate(start)} - ${fDate(end)}`;
+    if (initial) {
+      return label;
+    }
+    const sameYear = fIsSame(start, end, "year");
+    const sameMonth = fIsSame(start, end, "month");
+    const sameDay = fIsSame(start, end, "day");
+    if (sameYear && !sameMonth) {
+      label = `${fDate(start, "dd MMM")} - ${fDate(end)}`;
+    } else if (sameYear && sameMonth && !sameDay) {
+      label = `${fDate(start, "dd")} - ${fDate(end)}`;
+    } else if (sameYear && sameMonth && sameDay) {
+      label = `${fDate(end)}`;
+    }
+    return label;
+  } catch (error2) {
+    console.error("Error formatting date range:", error2);
+    return "Invalid time value";
+  }
+};
+
 // src/libs/format-number.ts
 var processInput = (inputValue) => {
   if (inputValue == null || Number.isNaN(Number(inputValue))) return null;
@@ -380,9 +603,12 @@ var fData = (inputValue) => {
 
 // src/libs/fullname-utils.ts
 var getInitials = (name) => {
-  const names = name?.split(" ");
-  const initials = names?.map((n) => n.charAt(0)?.toUpperCase())?.join("");
-  return initials;
+  if (!name?.trim()) return "CN";
+  const words = name.trim().split(/\s+/);
+  if (words.length === 1) {
+    return words[0].slice(0, 2).toUpperCase();
+  }
+  return words.slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
 };
 var splitFullname = (name) => {
   if (!name) {
@@ -8795,7 +9021,7 @@ FilterDropdown.displayName = "FilterDropdown";
 
 // src/components/Toolbar/DateRangeDropdown.tsx
 var import_react22 = require("react");
-var import_date_fns2 = require("date-fns");
+var import_date_fns3 = require("date-fns");
 var import_Popover3 = __toESM(require("@mui/material/Popover"), 1);
 
 // src/components/Toolbar/ToolbarDatePickerButton.tsx
@@ -8809,7 +9035,7 @@ var ToolbarDatePickerButton = ({
 
 // src/components/DateRangePicker/index.tsx
 var import_react21 = require("react");
-var import_date_fns = require("date-fns");
+var import_date_fns2 = require("date-fns");
 var import_Box17 = __toESM(require("@mui/material/Box"), 1);
 var import_Radio3 = __toESM(require("@mui/material/Radio"), 1);
 var import_Button4 = __toESM(require("@mui/material/Button"), 1);
@@ -8835,20 +9061,20 @@ function getDateRangeFromPreset(preset) {
   const today = /* @__PURE__ */ new Date();
   switch (preset) {
     case "today":
-      return { start: (0, import_date_fns.startOfDay)(today), end: (0, import_date_fns.endOfDay)(today) };
+      return { start: (0, import_date_fns2.startOfDay)(today), end: (0, import_date_fns2.endOfDay)(today) };
     case "yesterday":
       return {
-        start: (0, import_date_fns.startOfDay)((0, import_date_fns.subDays)(today, 1)),
-        end: (0, import_date_fns.endOfDay)((0, import_date_fns.subDays)(today, 1))
+        start: (0, import_date_fns2.startOfDay)((0, import_date_fns2.subDays)(today, 1)),
+        end: (0, import_date_fns2.endOfDay)((0, import_date_fns2.subDays)(today, 1))
       };
     case "last7days":
-      return { start: (0, import_date_fns.startOfDay)((0, import_date_fns.subDays)(today, 6)), end: (0, import_date_fns.endOfDay)(today) };
+      return { start: (0, import_date_fns2.startOfDay)((0, import_date_fns2.subDays)(today, 6)), end: (0, import_date_fns2.endOfDay)(today) };
     case "last30days":
-      return { start: (0, import_date_fns.startOfDay)((0, import_date_fns.subDays)(today, 29)), end: (0, import_date_fns.endOfDay)(today) };
+      return { start: (0, import_date_fns2.startOfDay)((0, import_date_fns2.subDays)(today, 29)), end: (0, import_date_fns2.endOfDay)(today) };
     case "last6months":
-      return { start: (0, import_date_fns.startOfDay)((0, import_date_fns.subMonths)(today, 6)), end: (0, import_date_fns.endOfDay)(today) };
+      return { start: (0, import_date_fns2.startOfDay)((0, import_date_fns2.subMonths)(today, 6)), end: (0, import_date_fns2.endOfDay)(today) };
     case "lastyear":
-      return { start: (0, import_date_fns.startOfDay)((0, import_date_fns.subYears)(today, 1)), end: (0, import_date_fns.endOfDay)(today) };
+      return { start: (0, import_date_fns2.startOfDay)((0, import_date_fns2.subYears)(today, 1)), end: (0, import_date_fns2.endOfDay)(today) };
     case "alltime":
       return { start: null, end: null };
     case "custom":
@@ -8894,7 +9120,7 @@ var DateRangePicker = (0, import_react21.forwardRef)(
         if (selectingDate === "start") {
           setTempRange((prev) => ({
             start: date,
-            end: prev.end && (0, import_date_fns.isAfter)(date, prev.end) ? null : prev.end
+            end: prev.end && (0, import_date_fns2.isAfter)(date, prev.end) ? null : prev.end
           }));
           setSelectingDate("end");
         } else {
@@ -8914,15 +9140,15 @@ var DateRangePicker = (0, import_react21.forwardRef)(
     const handleEndDateClick = (0, import_react21.useCallback)(() => {
       setSelectingDate("end");
     }, []);
-    const formattedStartDate = tempRange.start ? (0, import_date_fns.format)(tempRange.start, dateFormat) : "";
-    const formattedEndDate = tempRange.end ? (0, import_date_fns.format)(tempRange.end, dateFormat) : "";
+    const formattedStartDate = tempRange.start ? (0, import_date_fns2.format)(tempRange.start, dateFormat) : "";
+    const formattedEndDate = tempRange.end ? (0, import_date_fns2.format)(tempRange.end, dateFormat) : "";
     const leftCalendarMonth = (0, import_react21.useMemo)(() => {
       if (tempRange.start) return tempRange.start;
       return /* @__PURE__ */ new Date();
     }, [tempRange.start]);
     const rightCalendarMonth = (0, import_react21.useMemo)(() => {
       if (tempRange.end) return tempRange.end;
-      return (0, import_date_fns.addMonths)(/* @__PURE__ */ new Date(), 1);
+      return (0, import_date_fns2.addMonths)(/* @__PURE__ */ new Date(), 1);
     }, [tempRange.end]);
     return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       import_Box17.default,
@@ -9097,8 +9323,8 @@ function DateRangeDropdown({
     if (preset === "custom" && value?.start && value?.end) {
       const startYear = value.start.getFullYear();
       const endYear = value.end.getFullYear();
-      const startStr = startYear !== endYear ? (0, import_date_fns2.format)(value.start, "MMM d, yyyy") : (0, import_date_fns2.format)(value.start, "MMM d");
-      const endStr = (0, import_date_fns2.format)(value.end, "MMM d, yyyy");
+      const startStr = startYear !== endYear ? (0, import_date_fns3.format)(value.start, "MMM d, yyyy") : (0, import_date_fns3.format)(value.start, "MMM d");
+      const endStr = (0, import_date_fns3.format)(value.end, "MMM d, yyyy");
       return `${startStr} - ${endStr}`;
     }
     const presetsToSearch = presets ?? defaultPresets;
@@ -10188,7 +10414,7 @@ var RHFToggleButton = ({
 // src/components/HookForm/RHFDateRangePicker.tsx
 var import_react25 = require("react");
 var import_react_hook_form10 = require("react-hook-form");
-var import_date_fns3 = require("date-fns");
+var import_date_fns4 = require("date-fns");
 var import_Box23 = __toESM(require("@mui/material/Box"), 1);
 var import_Popover4 = __toESM(require("@mui/material/Popover"), 1);
 var import_TextField6 = __toESM(require("@mui/material/TextField"), 1);
@@ -10221,11 +10447,11 @@ function RHFDateRangePicker({
       const presetOption = presets.find((p) => p.value === value.preset);
       if (presetOption) return presetOption.label;
     }
-    if (value.start && value.end && (0, import_date_fns3.isValid)(value.start) && (0, import_date_fns3.isValid)(value.end)) {
+    if (value.start && value.end && (0, import_date_fns4.isValid)(value.start) && (0, import_date_fns4.isValid)(value.end)) {
       const startYear = value.start.getFullYear();
       const endYear = value.end.getFullYear();
-      const startStr = startYear !== endYear ? (0, import_date_fns3.format)(value.start, dateFormat) : (0, import_date_fns3.format)(value.start, "MMM d");
-      const endStr = (0, import_date_fns3.format)(value.end, dateFormat);
+      const startStr = startYear !== endYear ? (0, import_date_fns4.format)(value.start, dateFormat) : (0, import_date_fns4.format)(value.start, "MMM d");
+      const endStr = (0, import_date_fns4.format)(value.end, dateFormat);
       return `${startStr} - ${endStr}`;
     }
     return "";
@@ -11005,7 +11231,7 @@ var RHFDatePickerComponent = ({
   slotProps,
   helperText,
   clearable = false,
-  format: format4 = "MMM d, yyyy",
+  format: format5 = "MMM d, yyyy",
   ...other
 }) => {
   const { control } = (0, import_react_hook_form13.useFormContext)();
@@ -11031,7 +11257,7 @@ var RHFDatePickerComponent = ({
           value: field.value ?? null,
           onChange: (newValue) => field.onChange(newValue),
           enableAccessibleFieldDOMStructure: false,
-          format: format4,
+          format: format5,
           open: isOpen,
           onClose: () => setIsOpen(false),
           slots: {
@@ -11069,7 +11295,7 @@ var RHFTimePickerComponent = ({
   slotProps,
   helperText,
   clearable = false,
-  format: format4 = "h:mma",
+  format: format5 = "h:mma",
   ...other
 }) => {
   const { control } = (0, import_react_hook_form13.useFormContext)();
@@ -11095,7 +11321,7 @@ var RHFTimePickerComponent = ({
           value: field.value ?? null,
           onChange: (newValue) => field.onChange(newValue),
           enableAccessibleFieldDOMStructure: false,
-          format: format4,
+          format: format5,
           open: isOpen,
           onClose: () => setIsOpen(false),
           slots: {
@@ -11133,7 +11359,7 @@ var RHFDateTimePickerComponent = ({
   slotProps,
   helperText,
   clearable = false,
-  format: format4 = "MMM d, yyyy h:mma",
+  format: format5 = "MMM d, yyyy h:mma",
   ...other
 }) => {
   const { control } = (0, import_react_hook_form13.useFormContext)();
@@ -11159,7 +11385,7 @@ var RHFDateTimePickerComponent = ({
           value: field.value ?? null,
           onChange: (newValue) => field.onChange(newValue),
           enableAccessibleFieldDOMStructure: false,
-          format: format4,
+          format: format5,
           open: isOpen,
           onClose: () => setIsOpen(false),
           slots: {
@@ -12688,12 +12914,22 @@ __reExport(index_exports, components_exports2, module.exports);
   defaultSettings,
   dialogClasses,
   drawerClasses,
+  endOfDayTimestamp,
   error,
   fCurrency,
   fData,
+  fDate,
+  fDateRangeShortLabel,
+  fDateTime,
+  fIsAfter,
+  fIsBetween,
+  fIsSame,
   fNumber,
   fPercent,
   fShortenNumber,
+  fTime,
+  fTimestamp,
+  fToNow,
   feedbackDialogClasses,
   fileData,
   fileNameByUrl,
@@ -12739,6 +12975,7 @@ __reExport(index_exports, components_exports2, module.exports);
   shadows,
   snakeCase,
   splitFullname,
+  startOfDayTimestamp,
   stylesMode,
   success,
   surface,