@firecms/ui 3.0.1 → 3.1.0-canary.02232f4

package/dist/styles.d.ts

@@ -1,12 +1,12 @@
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60";
-export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
-export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
-export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
-export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
-export declare const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-export declare const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-export declare const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
-export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
-export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
+export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
+export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
+export declare const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
+export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
+export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
+export declare const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40 ";
+export declare const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40";
+export declare const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
+export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.1",
+  "version": "3.1.0-canary.02232f4",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -48,7 +48,7 @@
     "prepublishOnly": "run-s build",
     "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
     "test:lint": "eslint \"src/**\" --quiet",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
     "generateIcons": "bun --esm src/scripts/generateIcons.ts"
   },
@@ -80,8 +80,8 @@
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=18.3.1 || >=19.0.0",
+    "react-dom": ">=18.3.1 || >=19.0.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.2.0",
@@ -91,8 +91,8 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^20.19.17",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
@@ -114,7 +114,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "72d951d01d15ef5a7efcde6c63839f65964d2f7a",
+  "gitHead": "6281205d9f39f85991e1d8533474bfb9a542ed03",
   "publishConfig": {
     "access": "public"
   }

package/src/components/BooleanSwitch.tsx

@@ -42,10 +42,10 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 }}
             className={cls(
                 size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[44px] h-[26px] min-w-[44px] min-h-[26px]",
-                "outline-none rounded-full relative shadow-sm",
+                "outline-none outline-hidden rounded-full relative shadow-sm",
                 value ? (disabled
-                    ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700"
-                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700",
+                    ? "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700"
+                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700",
                 className
             )}
             {...props}

package/src/components/BooleanSwitchWithLabel.tsx

@@ -18,6 +18,7 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     fullWidth?: boolean,
     className?: string,
     inputClassName?: string,
+    switchAdornment?: React.ReactNode,
 };
 
 /**
@@ -37,6 +38,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                                                                           className,
                                                                           fullWidth = true,
                                                                           inputClassName,
+                                                                          switchAdornment,
                                                                           ...props
                                                                       }: BooleanSwitchWithLabelProps) {
 
@@ -100,6 +102,8 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 {...props}
             />
 
+            {switchAdornment}
+
             <div className={cls(
                 "flex-grow",
                 position === "end" ? "mr-4" : "ml-4",

package/src/components/Button.tsx

@@ -28,6 +28,7 @@ const ButtonInner = React.memo(React.forwardRef<
        fullWidth = false,
        component: Component,
        color = "neutral",
+       loading,
        ...props
    }: ButtonProps<any>, ref) => {
 
@@ -46,14 +47,14 @@ const ButtonInner = React.memo(React.forwardRef<
         "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants
-        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
-        "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
-        "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
+        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
+        "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
+        "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": variant === "text" && color === "error" && !disabled,
         "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
         "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "text" && color === "neutral" && !disabled,
 
         // Outlined Variants
-        "border border-primary text-primary hover:text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
+        "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
         "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
         "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": variant === "outlined" && color === "text" && !disabled,
@@ -63,7 +64,7 @@ const ButtonInner = React.memo(React.forwardRef<
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": variant === "text" && disabled,
         "border border-surface-500 opacity-50": variant === "outlined" && disabled,
-        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": variant === "filled" && disabled,
+        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-70 bg-surface-300/70 dark:bg-surface-500/70": variant === "filled" && disabled,
     });
 
     const sizeClasses = cls(

package/src/components/Card.tsx

@@ -6,17 +6,17 @@ import { cls } from "../util";
 type CardProps = {
     children: React.ReactNode;
     style?: React.CSSProperties;
-    onClick?: () => void;
+    onClick?: (e?: React.MouseEvent) => void;
     className?: string;
 };
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({
-                                                              children,
-                                                              className,
-                                                              onClick,
-                                                              style,
-                                                              ...props
-                                                          }, ref) => {
+    children,
+    className,
+    onClick,
+    style,
+    ...props
+}, ref) => {
     const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
         if (e.key === "Enter" || e.key === " ") {
             onClick?.();

package/src/components/Checkbox.tsx

@@ -71,7 +71,7 @@ export const Checkbox = React.memo(({
                 padding ? paddingClasses[size] : "",
                 outerSizeClasses[size],
                 "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-                onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75" : "",
+                onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "",
                 onCheckedChange ? "cursor-pointer" : "cursor-default"
             )}>
                 <div

package/src/components/Chip.tsx

@@ -29,7 +29,7 @@ const sizeClassNames = {
 /**
  * @group Preview components
  */
-export function Chip({
+export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function Chip({
                          children,
                          colorScheme,
                          error,
@@ -39,11 +39,12 @@ export function Chip({
                          size = "large",
                          className,
                          style
-                     }: ChipProps) {
+                     }: ChipProps, ref) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
+            ref={ref}
             className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 "items-center",
@@ -67,4 +68,4 @@ export function Chip({
             {icon}
         </div>
     );
-}
+});

package/src/components/ColorPicker.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { CHIP_COLORS, cls } from "../util";
+import { ChipColorKey, ChipColorScheme } from "./Chip";
+import { CheckIcon } from "../icons";
+import { Tooltip } from "./Tooltip";
+
+export interface ColorPickerProps {
+    /**
+     * Currently selected color key
+     */
+    value?: ChipColorKey;
+    /**
+     * Callback when color selection changes. Passes undefined when "Auto" is selected.
+     */
+    onChange: (colorKey: ChipColorKey | undefined) => void;
+    /**
+     * Size of the color swatches
+     */
+    size?: "small" | "medium";
+    /**
+     * Whether to show the "Auto" option that clears the selection
+     */
+    allowClear?: boolean;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled?: boolean;
+}
+
+// Base colors in display order
+const BASE_COLORS = ["blue", "cyan", "teal", "green", "yellow", "orange", "red", "pink", "purple", "gray"] as const;
+
+// Variants in display order (darker to lighter for better visual flow)
+const VARIANTS = ["Darker", "Dark", "Light", "Lighter"] as const;
+
+// Helper to get readable name from color key
+function getColorDisplayName(colorKey: ChipColorKey): string {
+    // Convert camelCase to readable format: "blueLighter" -> "Blue Lighter"
+    const base = colorKey.replace(/(Lighter|Light|Dark|Darker)$/, "");
+    const variant = colorKey.replace(base, "");
+    return `${base.charAt(0).toUpperCase()}${base.slice(1)} ${variant}`;
+}
+
+/**
+ * A color picker component that displays a grid of predefined CHIP_COLORS.
+ * Used for selecting colors for enum values, tags, and other chip-based UI elements.
+ * 
+ * @group Form components
+ */
+export function ColorPicker({
+    value,
+    onChange,
+    size = "medium",
+    allowClear = true,
+    disabled = false
+}: ColorPickerProps) {
+
+    const swatchSize = size === "small" ? "w-5 h-5" : "w-6 h-6";
+    const checkSize = size === "small" ? 12 : 14;
+
+    return (
+        <div className="flex flex-col gap-2">
+            {allowClear && (
+                <button
+                    type="button"
+                    disabled={disabled}
+                    onClick={() => onChange(undefined)}
+                    className={cls(
+                        "flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors",
+                        "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800",
+                        disabled && "opacity-50 cursor-not-allowed",
+                        !value && "bg-surface-accent-100 dark:bg-surface-accent-800 font-medium"
+                    )}
+                >
+                    <div className={cls(
+                        swatchSize,
+                        "rounded-full border-2 border-dashed border-surface-accent-400 dark:border-surface-accent-600",
+                        "flex items-center justify-center"
+                    )}>
+                        {!value && <CheckIcon size={checkSize} />}
+                    </div>
+                    <span className="text-surface-accent-700 dark:text-surface-accent-300">
+                        Auto (based on ID)
+                    </span>
+                </button>
+            )}
+
+            <div className="grid grid-cols-10 gap-1">
+                {VARIANTS.map((variant) => (
+                    BASE_COLORS.map((base) => {
+                        const colorKey = `${base}${variant}` as ChipColorKey;
+                        const colorScheme = CHIP_COLORS[colorKey] as ChipColorScheme;
+                        const isSelected = value === colorKey;
+                        const displayName = getColorDisplayName(colorKey);
+
+                        return (
+                            <Tooltip
+                                key={colorKey}
+                                title={displayName}
+                                delayDuration={300}
+                            >
+                                <button
+                                    type="button"
+                                    disabled={disabled}
+                                    onClick={() => onChange(colorKey)}
+                                    className={cls(
+                                        swatchSize,
+                                        "rounded-full transition-all flex items-center justify-center",
+                                        "hover:scale-110 hover:shadow-md",
+                                        "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1",
+                                        disabled && "opacity-50 cursor-not-allowed hover:scale-100",
+                                        isSelected && "ring-2 ring-primary ring-offset-1"
+                                    )}
+                                    style={{
+                                        backgroundColor: colorScheme.color,
+                                    }}
+                                    aria-label={displayName}
+                                    aria-pressed={isSelected}
+                                >
+                                    {isSelected && (
+                                        <CheckIcon
+                                            size={checkSize}
+                                            style={{ color: colorScheme.text }}
+                                        />
+                                    )}
+                                </button>
+                            </Tooltip>
+                        );
+                    })
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/components/DateTimeField.tsx

@@ -23,27 +23,35 @@ export type DateTimeFieldProps = {
     inputClassName?: string;
     invisible?: boolean;
     locale?: string;
+    /**
+     * IANA timezone string (e.g., "America/New_York", "Europe/London").
+     * Used to display and input dates in the specified timezone.
+     * The value passed to onChange will always be in UTC.
+     * If not provided, uses the user's local timezone.
+     */
+    timezone?: string;
 };
 
 export const DateTimeField: React.FC<DateTimeFieldProps> = ({
-                                                                value,
-                                                                label,
-                                                                onChange,
-                                                                disabled,
-                                                                clearable,
-                                                                mode = "date",
-                                                                error,
-                                                                size = "large",
-                                                                className,
-                                                                style,
-                                                                inputClassName,
-                                                                invisible,
-                                                            }) => {
+    value,
+    label,
+    onChange,
+    disabled,
+    clearable,
+    mode = "date",
+    error,
+    size = "large",
+    className,
+    style,
+    inputClassName,
+    invisible,
+    timezone,
+}) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const [focused, setFocused] = useState(false);
     const [internalValue, setInternalValue] = useState<string>("");
     const [isTyping, setIsTyping] = useState(false);
-    const invalidValue = value !== undefined && value !== null && !(value instanceof Date);
+    const invalidValue = value !== undefined && value !== null && (!(value instanceof Date) || isNaN((value as Date).getTime()));
 
     useInjectStyles("DateTimeField", inputStyles);
 
@@ -54,7 +62,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         onChange?.(null);
     };
 
-    // Convert Date object to input value string
+    // Convert UTC Date to display string in the specified timezone
     const valueAsInputValue = (
         dateValue: Date | null,
         mode: "date" | "date_time"
@@ -63,20 +71,85 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
             return "";
         }
         const pad = (n: number) => n.toString().padStart(2, "0");
-        const year = dateValue.getFullYear();
-        const month = pad(dateValue.getMonth() + 1);
-        const day = pad(dateValue.getDate());
+
+        // Use Intl.DateTimeFormat to get date parts in the target timezone
+        const options: Intl.DateTimeFormatOptions = {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+            timeZone: timezone, // undefined = local timezone
+        };
+
+        const formatter = new Intl.DateTimeFormat("en-CA", options);
+        let parts: Intl.DateTimeFormatPart[];
+        try {
+            parts = formatter.formatToParts(dateValue);
+        } catch {
+            return "";
+        }
+
+        const getPart = (type: string) => parts.find(p => p.type === type)?.value ?? "";
+
+        const year = getPart("year");
+        const month = getPart("month");
+        const day = getPart("day");
 
         if (mode === "date") {
             return `${year}-${month}-${day}`;
         } else {
-            const hours = pad(dateValue.getHours());
-            const minutes = pad(dateValue.getMinutes());
+            const hours = getPart("hour");
+            const minutes = getPart("minute");
             return `${year}-${month}-${day}T${hours}:${minutes}`;
         }
     };
 
-    // Handle input value change
+    // Get the UTC offset for a specific date in the target timezone (in minutes)
+    const getTimezoneOffsetMinutes = (date: Date, tz?: string): number => {
+        if (!tz) {
+            // Local timezone: use built-in getTimezoneOffset (returns offset in minutes, inverted sign)
+            return -date.getTimezoneOffset();
+        }
+        // For named timezones, calculate the offset by comparing formatted times
+        const utcFormatter = new Intl.DateTimeFormat("en-CA", {
+            year: "numeric", month: "2-digit", day: "2-digit",
+            hour: "2-digit", minute: "2-digit", hour12: false,
+            timeZone: "UTC"
+        });
+        const tzFormatter = new Intl.DateTimeFormat("en-CA", {
+            year: "numeric", month: "2-digit", day: "2-digit",
+            hour: "2-digit", minute: "2-digit", hour12: false,
+            timeZone: tz
+        });
+
+        const utcParts = utcFormatter.formatToParts(date);
+        const tzParts = tzFormatter.formatToParts(date);
+
+        const getPart = (parts: Intl.DateTimeFormatPart[], type: string) =>
+            parseInt(parts.find(p => p.type === type)?.value ?? "0", 10);
+
+        const utcDate = new Date(Date.UTC(
+            getPart(utcParts, "year"),
+            getPart(utcParts, "month") - 1,
+            getPart(utcParts, "day"),
+            getPart(utcParts, "hour"),
+            getPart(utcParts, "minute")
+        ));
+
+        const tzDate = new Date(Date.UTC(
+            getPart(tzParts, "year"),
+            getPart(tzParts, "month") - 1,
+            getPart(tzParts, "day"),
+            getPart(tzParts, "hour"),
+            getPart(tzParts, "minute")
+        ));
+
+        return (tzDate.getTime() - utcDate.getTime()) / 60000;
+    };
+
+    // Handle input value change - convert from display timezone to UTC
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const inputValue = e.target.value;
         setInternalValue(inputValue);
@@ -88,21 +161,42 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         }
 
         try {
-            const parsed = new Date(inputValue);
-            if (isNaN(parsed.getTime())) {
-                throw new Error("Invalid date");
-            }
+            let year: number, month: number, day: number, hours = 0, minutes = 0;
 
-            let newDate: Date;
             if (mode === "date") {
-                // Adjust for timezone offset for date-only inputs
-                const userTimezoneOffset = parsed.getTimezoneOffset() * 60000;
-                newDate = new Date(parsed.getTime() + userTimezoneOffset);
+                // Parse date-only input: "YYYY-MM-DD"
+                [year, month, day] = inputValue.split("-").map(Number);
             } else {
-                newDate = parsed;
+                // Parse datetime-local input: "YYYY-MM-DDTHH:MM"
+                const [datePart, timePart] = inputValue.split("T");
+                [year, month, day] = datePart.split("-").map(Number);
+                [hours, minutes] = timePart.split(":").map(Number);
+            }
+
+            let resultDate: Date;
+
+            if (!timezone) {
+                // No timezone specified: interpret input as local time (backward compatible)
+                resultDate = new Date(year, month - 1, day, hours, minutes);
+            } else {
+                // Timezone specified: interpret input as that timezone and convert to UTC
+                // We need to find the UTC equivalent of the entered time in the target timezone
+
+                // Create a reference UTC date to calculate the offset for this moment
+                const refUtcDate = new Date(Date.UTC(year, month - 1, day, hours, minutes));
+                const offsetMinutes = getTimezoneOffsetMinutes(refUtcDate, timezone);
+
+                // Convert from target timezone to UTC:
+                // If user entered 00:00 in Mexico (UTC-6, offset=-360), we subtract the offset
+                // Date.UTC gives us 00:00 UTC, subtracting -360 minutes (= adding 360 min) gives 06:00 UTC
+                resultDate = new Date(Date.UTC(year, month - 1, day, hours, minutes) - offsetMinutes * 60000);
+            }
+
+            if (isNaN(resultDate.getTime())) {
+                throw new Error("Invalid date");
             }
 
-            onChange?.(newDate);
+            onChange?.(resultDate);
         } catch (e) {
             // Don't call onChange with null while typing
             return;
@@ -156,7 +250,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                             disabled ? "opacity-50" : ""
                         )}
                         shrink={true}
-                        // shrink={hasValue || focused}
+                    // shrink={hasValue || focused}
                     >
                         {label}
                     </InputLabel>
@@ -193,20 +287,20 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     }}
                     className="absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500"
                 >
-                    <CalendarMonthIcon color={"disabled"}/>
+                    <CalendarMonthIcon color={"disabled"} />
                 </IconButton>
                 {clearable && value && (
                     <IconButton
                         onClick={handleClear}
                         className="absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 "
                     >
-                        <CloseIcon/>
+                        <CloseIcon />
                     </IconButton>
                 )}
             </div>
             {invalidValue && (
                 <div className="flex items-center m-2">
-                    <ErrorIcon size={"small"} color={"error"}/>
+                    <ErrorIcon size={"small"} color={"error"} />
                     <div className="pl-2">
                         <Typography variant={"body2"}>
                             Invalid date value for this field

package/src/components/DebouncedTextField.tsx

@@ -4,7 +4,7 @@ import { TextField, TextFieldProps } from "./index";
 
 export function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {
 
-    const previousEventRef = React.useRef<ChangeEvent<any>>();
+    const previousEventRef = React.useRef<ChangeEvent<any>>(undefined);
     const [internalValue, setInternalValue] = React.useState(props.value);
 
     const deferredValue = useDeferredValue(internalValue);
@@ -28,6 +28,6 @@ export function DebouncedTextField<T extends string | number>(props: TextFieldPr
     }, []);
 
     return <TextField {...props}
-                      onChange={internalOnChange}
-                      value={internalValue}/>
+        onChange={internalOnChange}
+        value={internalValue} />
 }