@firecms/ui 3.0.1 → 3.1.0-canary.9e89e98

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.9e89e98",
   "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"
   },
@@ -114,7 +114,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "72d951d01d15ef5a7efcde6c63839f65964d2f7a",
+  "gitHead": "7631fbfb6cde4415513e45c0557e18073ab359b8",
   "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/Button.tsx

@@ -46,14 +46,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 +63,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-40 bg-surface-300/40 dark:bg-surface-500/40": 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/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,22 +23,30 @@ 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>("");
@@ -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,80 @@ 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);
+        const parts = formatter.formatToParts(dateValue);
+
+        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 +156,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 {
+                // 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 {
-                newDate = parsed;
+                // 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 +245,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                             disabled ? "opacity-50" : ""
                         )}
                         shrink={true}
-                        // shrink={hasValue || focused}
+                    // shrink={hasValue || focused}
                     >
                         {label}
                     </InputLabel>
@@ -193,20 +282,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/Dialog.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";
 import { cls } from "../util";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type DialogProps = {
     open?: boolean;
@@ -24,21 +25,22 @@ export type DialogProps = {
      * If `true`, the dialog will not focus the first focusable element when opened.
      */
     disableInitialFocus?: boolean;
+    portalContainer?: HTMLElement | null;
 };
 
 const widthClasses = {
-    xs: "max-w-xs min-w-xs w-xs",
-    sm: "max-w-sm min-w-sm w-sm",
-    md: "max-w-md min-w-md w-md",
-    lg: "max-w-lg min-w-lg w-lg",
-    xl: "max-w-xl min-w-xl w-xl",
-    "2xl": "max-w-2xl min-w-2xl w-2xl",
-    "3xl": "max-w-3xl min-w-3xl w-3xl",
-    "4xl": "max-w-4xl min-w-4xl w-4xl",
-    "5xl": "max-w-5xl min-w-5xl w-5xl",
-    "6xl": "max-w-6xl min-w-6xl w-6xl",
-    "7xl": "max-w-7xl min-w-7xl w-7xl",
-    full: "max-w-full min-w-full w-full"
+    xs: "max-w-xs w-xs",
+    sm: "max-w-sm w-sm",
+    md: "max-w-md w-md",
+    lg: "max-w-lg w-lg",
+    xl: "max-w-xl w-xl",
+    "2xl": "max-w-2xl w-2xl",
+    "3xl": "max-w-3xl w-3xl",
+    "4xl": "max-w-4xl w-4xl",
+    "5xl": "max-w-5xl w-5xl",
+    "6xl": "max-w-6xl w-6xl",
+    "7xl": "max-w-7xl w-7xl",
+    full: "max-w-full w-full"
 };
 
 export const Dialog = ({
@@ -57,15 +59,22 @@ export const Dialog = ({
                            onEscapeKeyDown,
                            onPointerDownOutside,
                            onInteractOutside,
-                           disableInitialFocus = true
+                           disableInitialFocus = true,
+                           portalContainer
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
     useEffect(() => {
         if (!open) {
             const timeout = setTimeout(() => {
                 setDisplayed(false);
-            }, 150);
+            }, 100);
             return () => clearTimeout(timeout);
         } else {
             setDisplayed(true);
@@ -78,12 +87,12 @@ export const Dialog = ({
         <DialogPrimitive.Root open={displayed || open}
                               modal={modal}
                               onOpenChange={onOpenChange}>
-            <DialogPrimitive.Portal>
+            <DialogPrimitive.Portal container={finalContainer}>
 
                 <div className={cls("fixed inset-0 z-30", containerClassName)}>
 
                     <DialogPrimitive.Overlay
-                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
+                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/60  backdrop-blur-sm ",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}

package/src/components/DialogActions.tsx

@@ -19,7 +19,7 @@ export function DialogActions({
             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",
+            "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60",
             translucent ? "backdrop-blur-sm" : "",
             className)}>
         {children}

package/src/components/ExpandablePanel.tsx

@@ -95,7 +95,7 @@ export function ExpandablePanel({
                     <div
                         className={cls(
                             "rounded-t flex items-center justify-between w-full min-h-[52px]",
-                            "hover:bg-surface-accent-200 hover:bg-opacity-40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40",
+                            "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40",
                             invisible ? "border-b px-2" : "p-4",
                             open ? "py-6" : "py-4",
                             "transition-all duration-200",