@firecms/ui 3.0.0-rc.2 → 3.0.0-rc.4

package/dist/components/Badge.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type BadgeColor = "primary" | "secondary" | "error";
+export type BadgeColor = "primary" | "secondary" | "warning" | "error";
 export interface BadgeProps {
     color?: BadgeColor;
     children: React.ReactNode;

package/dist/index.es.js

@@ -27718,251 +27718,122 @@ function Typography(t0) {
   }
   return t15;
 }
-const DateTimeField = (t0) => {
-  const $ = c(57);
-  const {
-    value,
-    label,
-    onChange,
-    disabled,
-    clearable,
-    mode: t1,
-    error,
-    size: t2,
-    className,
-    style,
-    inputClassName,
-    invisible
-  } = t0;
-  const mode = t1 === void 0 ? "date" : t1;
-  const size = t2 === void 0 ? "large" : t2;
+const DateTimeField = ({
+  value,
+  label,
+  onChange,
+  disabled,
+  clearable,
+  mode = "date",
+  error,
+  size = "large",
+  className,
+  style,
+  inputClassName,
+  invisible
+}) => {
   const inputRef = useRef(null);
   const [focused, setFocused] = useState(false);
+  const [internalValue, setInternalValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
   const invalidValue = value !== void 0 && value !== null && !(value instanceof Date);
   useInjectStyles("DateTimeField", inputStyles);
-  let t3;
-  if ($[0] !== onChange) {
-    t3 = (e) => {
-      e.preventDefault();
+  const handleClear = (e) => {
+    e.preventDefault();
+    setInternalValue("");
+    setIsTyping(false);
+    onChange?.(null);
+  };
+  const valueAsInputValue = (dateValue, mode_0) => {
+    if (!dateValue) {
+      return "";
+    }
+    const pad = (n) => n.toString().padStart(2, "0");
+    const year = dateValue.getFullYear();
+    const month = pad(dateValue.getMonth() + 1);
+    const day = pad(dateValue.getDate());
+    if (mode_0 === "date") {
+      return `${year}-${month}-${day}`;
+    } else {
+      const hours = pad(dateValue.getHours());
+      const minutes = pad(dateValue.getMinutes());
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+    }
+  };
+  const handleInputChange = (e_0) => {
+    const inputValue = e_0.target.value;
+    setInternalValue(inputValue);
+    setIsTyping(true);
+    if (!inputValue) {
       onChange?.(null);
-    };
-    $[0] = onChange;
-    $[1] = t3;
-  } else {
-    t3 = $[1];
-  }
-  const handleClear = t3;
-  const valueAsInputValue = _temp2$1;
-  let t4;
-  if ($[2] !== mode || $[3] !== onChange) {
-    t4 = (e_0) => {
-      const inputValue = e_0.target.value;
-      if (!inputValue) {
-        onChange?.(null);
-        return;
+      return;
+    }
+    try {
+      const parsed = new Date(inputValue);
+      if (isNaN(parsed.getTime())) {
+        throw new Error("Invalid date");
       }
       let newDate;
-      try {
-        if (mode === "date_time") {
-          const [datePart, timePart] = inputValue.split("T");
-          const [year_0, month_0, day_0] = datePart.split("-").map(Number);
-          const [hours_0, minutes_0] = timePart.split(":").map(Number);
-          newDate = new Date(year_0, month_0 - 1, day_0, hours_0, minutes_0);
-        } else {
-          const [year_1, month_1, day_1] = inputValue.split("-").map(Number);
-          newDate = new Date(year_1, month_1 - 1, day_1);
-        }
-      } catch (t52) {
-        newDate = null;
+      if (mode === "date") {
+        const userTimezoneOffset = parsed.getTimezoneOffset() * 6e4;
+        newDate = new Date(parsed.getTime() + userTimezoneOffset);
+      } else {
+        newDate = parsed;
       }
       onChange?.(newDate);
-    };
-    $[2] = mode;
-    $[3] = onChange;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  const handleInputChange = t4;
-  let t5;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /* @__PURE__ */ jsx("style", { children: inputStyles });
-    $[5] = t5;
-  } else {
-    t5 = $[5];
-  }
-  const t6 = !invisible && fieldBackgroundMixin;
-  const t7 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
-  const t8 = size === "smallest";
-  const t9 = size === "small";
-  const t10 = size === "medium";
-  const t11 = size === "large";
-  let t12;
-  if ($[6] !== className || $[7] !== t10 || $[8] !== t11 || $[9] !== t6 || $[10] !== t7 || $[11] !== t8 || $[12] !== t9) {
-    t12 = cls("rounded-md relative max-w-full", t6, t7, {
-      "min-h-[28px]": t8,
-      "min-h-[32px]": t9,
-      "min-h-[42px]": t10,
-      "min-h-[64px]": t11
-    }, className);
-    $[6] = className;
-    $[7] = t10;
-    $[8] = t11;
-    $[9] = t6;
-    $[10] = t7;
-    $[11] = t8;
-    $[12] = t9;
-    $[13] = t12;
-  } else {
-    t12 = $[13];
-  }
-  let t13;
-  if ($[14] !== disabled) {
-    t13 = () => {
+    } catch (e_1) {
+      return;
+    }
+  };
+  const handleFocus = () => {
+    setFocused(true);
+    setIsTyping(true);
+    setInternalValue(valueAsInputValue(value ?? null, mode));
+  };
+  const handleBlur = () => {
+    setFocused(false);
+    setIsTyping(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: inputStyles }),
+    /* @__PURE__ */ jsxs("div", { className: cls("rounded-md relative max-w-full", !invisible && fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+      "min-h-[28px]": size === "smallest",
+      "min-h-[32px]": size === "small",
+      "min-h-[42px]": size === "medium",
+      "min-h-[64px]": size === "large"
+    }, className), style, onClick: () => {
       if (!disabled) {
         inputRef.current?.focus();
       }
-    };
-    $[14] = disabled;
-    $[15] = t13;
-  } else {
-    t13 = $[15];
-  }
-  let t14;
-  if ($[16] !== disabled || $[17] !== error || $[18] !== focused || $[19] !== label) {
-    t14 = label && /* @__PURE__ */ jsx(InputLabel, { className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""), shrink: true, children: label });
-    $[16] = disabled;
-    $[17] = error;
-    $[18] = focused;
-    $[19] = label;
-    $[20] = t14;
-  } else {
-    t14 = $[20];
-  }
-  const t15 = mode === "date_time" ? "datetime-local" : "date";
-  const t16 = valueAsInputValue(value ?? null, mode);
-  let t17;
-  let t18;
-  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-    t17 = () => setFocused(true);
-    t18 = () => setFocused(false);
-    $[21] = t17;
-    $[22] = t18;
-  } else {
-    t17 = $[21];
-    t18 = $[22];
-  }
-  const t19 = clearable ? "pr-14" : "pr-12";
-  const t20 = size === "smallest";
-  const t21 = size === "small";
-  const t22 = size === "medium";
-  const t23 = size === "large";
-  let t24;
-  if ($[23] !== disabled || $[24] !== inputClassName || $[25] !== label || $[26] !== t19 || $[27] !== t20 || $[28] !== t21 || $[29] !== t22 || $[30] !== t23) {
-    t24 = cls("w-full outline-none bg-transparent leading-normal text-base px-3", t19, "rounded-md", {
-      "min-h-[28px]": t20,
-      "min-h-[32px]": t21,
-      "min-h-[42px]": t22,
-      "min-h-[64px]": t23
-    }, label ? "pt-8 pb-2" : "py-2", inputClassName, disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500");
-    $[23] = disabled;
-    $[24] = inputClassName;
-    $[25] = label;
-    $[26] = t19;
-    $[27] = t20;
-    $[28] = t21;
-    $[29] = t22;
-    $[30] = t23;
-    $[31] = t24;
-  } else {
-    t24 = $[31];
-  }
-  let t25;
-  if ($[32] !== disabled || $[33] !== handleInputChange || $[34] !== t15 || $[35] !== t16 || $[36] !== t24) {
-    t25 = /* @__PURE__ */ jsx("input", { ref: inputRef, type: t15, value: t16, onChange: handleInputChange, onFocus: t17, onBlur: t18, disabled, className: t24 });
-    $[32] = disabled;
-    $[33] = handleInputChange;
-    $[34] = t15;
-    $[35] = t16;
-    $[36] = t24;
-    $[37] = t25;
-  } else {
-    t25 = $[37];
-  }
-  let t26;
-  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-    t26 = (e_2) => {
-      e_2.stopPropagation();
-      inputRef.current?.showPicker();
-    };
-    $[38] = t26;
-  } else {
-    t26 = $[38];
-  }
-  let t27;
-  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
-    t27 = /* @__PURE__ */ jsx(IconButton, { onClick: t26, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsx(CalendarMonthIcon, { color: "disabled" }) });
-    $[39] = t27;
-  } else {
-    t27 = $[39];
-  }
-  let t28;
-  if ($[40] !== clearable || $[41] !== handleClear || $[42] !== value) {
-    t28 = clearable && value && /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
-    $[40] = clearable;
-    $[41] = handleClear;
-    $[42] = value;
-    $[43] = t28;
-  } else {
-    t28 = $[43];
-  }
-  let t29;
-  if ($[44] !== style || $[45] !== t12 || $[46] !== t13 || $[47] !== t14 || $[48] !== t25 || $[49] !== t28) {
-    t29 = /* @__PURE__ */ jsxs("div", { className: t12, style, onClick: t13, children: [
-      t14,
-      t25,
-      t27,
-      t28
-    ] });
-    $[44] = style;
-    $[45] = t12;
-    $[46] = t13;
-    $[47] = t14;
-    $[48] = t25;
-    $[49] = t28;
-    $[50] = t29;
-  } else {
-    t29 = $[50];
-  }
-  let t30;
-  if ($[51] !== invalidValue || $[52] !== value) {
-    t30 = invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
+    }, children: [
+      label && /* @__PURE__ */ jsx(
+        InputLabel,
+        {
+          className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""),
+          shrink: true,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx("input", { ref: inputRef, type: mode === "date_time" ? "datetime-local" : "date", value: isTyping ? internalValue : valueAsInputValue(value ?? null, mode), onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled, className: cls("w-full outline-none bg-transparent leading-normal text-base px-3", clearable ? "pr-14" : "pr-12", "rounded-md", {
+        "min-h-[28px]": size === "smallest",
+        "min-h-[32px]": size === "small",
+        "min-h-[42px]": size === "medium",
+        "min-h-[64px]": size === "large"
+      }, label ? "pt-8 pb-2" : "py-2", inputClassName, disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500") }),
+      /* @__PURE__ */ jsx(IconButton, { onClick: (e_2) => {
+        e_2.stopPropagation();
+        inputRef.current?.showPicker();
+      }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsx(CalendarMonthIcon, { color: "disabled" }) }),
+      clearable && value && /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    ] }),
+    invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
       /* @__PURE__ */ jsx(ErrorIcon, { size: "small", color: "error" }),
       /* @__PURE__ */ jsxs("div", { className: "pl-2", children: [
         /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "Invalid date value for this field" }),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
       ] })
-    ] });
-    $[51] = invalidValue;
-    $[52] = value;
-    $[53] = t30;
-  } else {
-    t30 = $[53];
-  }
-  let t31;
-  if ($[54] !== t29 || $[55] !== t30) {
-    t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t5,
-      t29,
-      t30
-    ] });
-    $[54] = t29;
-    $[55] = t30;
-    $[56] = t31;
-  } else {
-    t31 = $[56];
-  }
-  return t31;
+    ] })
+  ] });
 };
 const inputStyles = `
     /* Hide the default calendar icon in Chrome, Safari, Edge, Opera */
@@ -27977,25 +27848,6 @@ const inputStyles = `
         -moz-appearance:textfield;
     }
   `;
-function _temp$3(n) {
-  return n.toString().padStart(2, "0");
-}
-function _temp2$1(dateValue, mode_0) {
-  if (!dateValue) {
-    return "";
-  }
-  const pad = _temp$3;
-  const year = dateValue.getFullYear();
-  const month = pad(dateValue.getMonth() + 1);
-  const day = pad(dateValue.getDate());
-  if (mode_0 === "date") {
-    return `${year}-${month}-${day}`;
-  } else {
-    const hours = pad(dateValue.getHours());
-    const minutes = pad(dateValue.getMinutes());
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-  }
-}
 const widthClasses = {
   xs: "max-w-xs min-w-xs w-xs",
   sm: "max-w-sm min-w-sm w-sm",
@@ -28126,7 +27978,7 @@ const Dialog = (t0) => {
   const t22 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
   let t23;
   if ($[16] !== className || $[17] !== t17 || $[18] !== t18 || $[19] !== t19 || $[20] !== t20 || $[21] !== t21 || $[22] !== t22) {
-    t23 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t17, t18, "text-surface-accent-900 dark:text-white", "justify-center items-center", t19, "ease-in-out duration-200", t20, t21, t22, className);
+    t23 = cls(paperMixin, "rounded-2xl", "z-30", "relative", "overflow-hidden", "outline-none focus:outline-none", t17, t18, "text-surface-accent-900 dark:text-white", "justify-center items-center", t19, "ease-in-out duration-200", t20, t21, t22, className);
     $[16] = className;
     $[17] = t17;
     $[18] = t18;
@@ -28200,7 +28052,7 @@ function DialogActions(t0) {
   const t3 = translucent ? "backdrop-blur-sm" : "";
   let t4;
   if ($[0] !== className || $[1] !== position || $[2] !== t3) {
-    t4 = cls(defaultBorderMixin, "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60", t3, className);
+    t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60", t3, className);
     $[0] = className;
     $[1] = position;
     $[2] = t3;
@@ -28242,7 +28094,7 @@ function DialogContent(t0) {
   let t2;
   if ($[2] !== className || $[3] !== includeMargin) {
     t2 = cls("flex-grow", {
-      "my-6 mx-6": includeMargin
+      "my-8 mx-8": includeMargin
     }, className);
     $[2] = className;
     $[3] = includeMargin;
@@ -28303,7 +28155,7 @@ function DialogTitle(t0) {
   let t4;
   if ($[8] !== className || $[9] !== includeMargin) {
     t4 = cls({
-      "mt-6 mx-6": includeMargin
+      "mt-8 mx-8": includeMargin
     }, className);
     $[8] = className;
     $[9] = includeMargin;
@@ -28901,7 +28753,7 @@ const Menu = React__default.forwardRef((t0, ref) => {
   }
   let t3;
   if ($[3] !== className) {
-    t3 = cls(paperMixin, focusedDisabled, "shadow py-2 z-30", className);
+    t3 = cls(paperMixin, focusedDisabled, "py-2 z-30", className);
     $[3] = className;
     $[4] = t3;
   } else {
@@ -28956,7 +28808,7 @@ function MenuItem(t0) {
   } = t0;
   const dense = t1 === void 0 ? false : t1;
   const t2 = onClick && "cursor-pointer";
-  const t3 = dense ? "px-3 py-1.5" : "px-4 py-2";
+  const t3 = dense ? "px-4 py-1.5" : "px-4 py-2";
   let t4;
   if ($[0] !== className || $[1] !== t2 || $[2] !== t3) {
     t4 = cls(t2, "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4", t3, className);
@@ -32090,6 +31942,8 @@ const getColor = (color) => {
       return "bg-primary";
     case "secondary":
       return "bg-secondary";
+    case "warning":
+      return "bg-orange-500";
     case "error":
       return "bg-red-500";
     default: