@firecms/ui 3.0.0-beta.11 → 3.0.0-beta.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.13",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -54,45 +54,46 @@
   },
   "dependencies": {
     "@material-design-icons/font": "^0.14.13",
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.2",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-portal": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-scroll-area": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.4",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-portal": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@radix-ui/react-visually-hidden": "^1.1.1",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
     "markdown-it": "^14.1.0",
     "react-dropzone": "^14.3.5",
     "react-fast-compare": "^3.2.2",
-    "tailwind-merge": "^2.5.5"
+    "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
+    "@tailwindcss/postcss": "^4.1.4",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.17.9",
+    "@types/node": "^20.17.14",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.0",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-react-compiler": "beta",
@@ -105,8 +106,8 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.11",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14",
     "vite-plugin-static-copy": "^1.0.6"
   },
   "files": [
@@ -115,7 +116,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "cb6d419faf2664cfd6cb2603a834e4bf499a92bb",
+  "gitHead": "26d5e1f33a7ac00c78e45cd3cb3c397f4ba00821",
   "publishConfig": {
     "access": "public"
   }

package/src/components/Avatar.tsx

@@ -8,6 +8,7 @@ export interface AvatarProps {
     children?: React.ReactNode;
     className?: string;
     outerClassName?: string;
+    hover?: boolean;
     style?: React.CSSProperties;
 }
 
@@ -19,6 +20,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
         className,
         style,
         outerClassName,
+        hover = true,
         ...props
     },
     ref
@@ -36,7 +38,8 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             {...props}
             className={cls(
                 "rounded-full flex items-center justify-center overflow-hidden",
-                "p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12",
+                "p-1 w-12 h-12 min-w-12 min-h-12",
+                hover && "hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700",
                 outerClassName
             )}
         >

package/src/components/BooleanSwitch.tsx

@@ -6,7 +6,7 @@ export type BooleanSwitchProps = {
     value: boolean | null;
     className?: string;
     disabled?: boolean;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;

package/src/components/BooleanSwitchWithLabel.tsx

@@ -27,13 +27,13 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
 export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                                                                           value,
                                                                           position = "end",
+                                                                          size = "medium",
                                                                           invisible,
                                                                           onValueChange,
                                                                           error,
                                                                           label,
                                                                           autoFocus,
                                                                           disabled,
-                                                                          size,
                                                                           className,
                                                                           fullWidth = true,
                                                                           inputClassName,
@@ -67,7 +67,12 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 "rounded-md max-w-full justify-between box-border relative inline-flex items-center",
                 !invisible && focus && !disabled ? focusedClasses : "",
                 error ? "text-red-500 dark:text-red-600" : (focus && !disabled ? "text-primary" : (!disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark")),
-                size === "small" ? "min-h-[40px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
+                {
+                    "min-h-[28px]": size === "smallest",
+                    "min-h-[32px]": size === "small",
+                    "min-h-[42px]": size === "medium",
+                    "min-h-[64px]": size === "large",
+                },
                 size === "small" ? "pl-2" : "pl-4",
                 size === "small" ? "pr-4" : "pr-6",
                 position === "end" ? "flex-row-reverse" : "flex-row",

package/src/components/Button.tsx

@@ -2,21 +2,22 @@
 import React from "react";
 import { cls } from "../util";
 
-export type ButtonProps<P extends React.ElementType> =
-    Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
-    & {
-    variant?: "filled" | "neutral" | "outlined" | "text";
+export type ButtonProps<C extends React.ElementType = "button"> = {
+    children?: React.ReactNode;
+    variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
-    color?: "primary" | "secondary" | "text" | "error";
+    color?: "primary" | "secondary" | "text" | "error" | "neutral";
     size?: "small" | "medium" | "large" | "xl" | "2xl";
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
-    onClick?: React.MouseEventHandler<any>
-};
+    component?: C;
+    onClick?: React.MouseEventHandler<any>;
+} & React.ComponentPropsWithoutRef<C>;
 
 const ButtonInner = React.forwardRef<
-    ButtonProps<React.ElementType<any>>
+    HTMLButtonElement,
+    ButtonProps<React.ElementType>
 >(({
        children,
        className,
@@ -42,29 +43,27 @@ const ButtonInner = React.forwardRef<
         "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
         "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
         "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        "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": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants
-        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 dark:hover:bg-surface-900": variant === "text" && color === "primary" && !disabled,
-        "border border-transparent text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
+        "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-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: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-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,
-
-        // Neutral Variants
-        "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-white": variant === "neutral" && (color === "primary" || color === "text") && !disabled,
-        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-secondary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-white": variant === "neutral" && color === "secondary" && !disabled,
-        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-error dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-error": variant === "neutral" && color === "error" && !disabled,
+        "border border-surface-400 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "outlined" && color === "neutral" && !disabled,
 
         // Disabled states for all variants
         "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-surface-500 bg-surface-500 opacity-50": (variant === "filled" || variant === "neutral") && disabled,
+        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": variant === "filled" && disabled,
     });
 
     const sizeClasses = cls(
@@ -83,7 +82,7 @@ const ButtonInner = React.forwardRef<
                 ref={ref}
                 onClick={props.onClick}
                 className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
-                {...(props as React.ComponentPropsWithRef<any>)}>
+                {...props}>
                 {startIcon}
                 {children}
             </Component>

package/src/components/Chip.tsx

@@ -46,6 +46,7 @@ export function Chip({
         <div
             className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
+                "items-center",
                 onClick ? "cursor-pointer hover:bg-surface-accent-300 hover:dark:bg-surface-accent-700" : "",
                 sizeClassNames[size],
                 error || !usedColorScheme ? "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white" : "",

package/src/components/CircularProgress.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { cls } from "../util";
 
 export type CircularProgressProps = {
-    size?: "small" | "medium" | "large",
+    size?: "smallest" | "small" | "medium" | "large",
     className?: string
 }
 
@@ -12,8 +12,10 @@ export function CircularProgress({
                                  }: CircularProgressProps) {
 
     let sizeClasses = "";
-    if (size === "small") {
+    if (size === "smallest") {
         sizeClasses = "w-4 h-4";
+    } else if (size === "small") {
+        sizeClasses = "w-6 h-6";
     } else if (size === "medium") {
         sizeClasses = "w-8 h-8 m-1";
     } else {
@@ -21,8 +23,10 @@ export function CircularProgress({
     }
 
     let borderClasses = "";
-    if (size === "small") {
+    if (size === "smallest") {
         borderClasses = "border-[3px]";
+    } else if (size === "small") {
+        borderClasses = "border-[4px]";
     } else if (size === "medium") {
         borderClasses = "border-4";
     } else {

package/src/components/DateTimeField.tsx

@@ -16,7 +16,7 @@ export type DateTimeFieldProps = {
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size?: "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
@@ -38,7 +38,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                                                                 style,
                                                                 inputClassName,
                                                                 invisible,
-                                                                locale, // Note: The 'locale' prop is not utilized with native inputs as they are managed by the browser.
                                                             }) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const [focused, setFocused] = useState(false);
@@ -111,7 +110,9 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     {
-                        "min-h-[48px]": size === "medium",
+                        "min-h-[28px]": size === "smallest",
+                        "min-h-[32px]": size === "small",
+                        "min-h-[42px]": size === "medium",
                         "min-h-[64px]": size === "large",
                     },
                     className
@@ -141,25 +142,30 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     </InputLabel>
                 )}
 
-                    <input
-                        ref={inputRef}
-                        type={mode === "date_time" ? "datetime-local" : "date"}
-                        value={valueAsInputValue(value ?? null, mode)}
-                        onChange={handleInputChange}
-                        onFocus={() => setFocused(true)}
-                        onBlur={() => setFocused(false)}
-                        disabled={disabled}
-                        className={cls(
-                            "w-full outline-none bg-transparent leading-normal text-base px-3",
-                            clearable ? "pr-14" : "pr-12",
-                            "rounded-md",
-                            size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
-                            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"
-                        )}
-                    />
+                <input
+                    ref={inputRef}
+                    type={mode === "date_time" ? "datetime-local" : "date"}
+                    value={valueAsInputValue(value ?? null, mode)}
+                    onChange={handleInputChange}
+                    onFocus={() => setFocused(true)}
+                    onBlur={() => setFocused(false)}
+                    disabled={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"
+                    )}
+                />
                 <IconButton
                     onClick={(e) => {
                         e.stopPropagation();
@@ -180,7 +186,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
             </div>
             {invalidValue && (
                 <div className="flex items-center m-2">
-                    <ErrorIcon size={"medium"} 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

@@ -9,6 +9,7 @@ export type DialogProps = {
     onOpenChange?: (open: boolean) => void;
     children: React.ReactNode;
     className?: string;
+    containerClassName?: string;
     fullWidth?: boolean;
     fullHeight?: boolean;
     fullScreen?: boolean;
@@ -41,6 +42,7 @@ export const Dialog = ({
                            onOpenChange,
                            children,
                            className,
+                           containerClassName,
                            fullWidth = true,
                            fullHeight,
                            fullScreen,
@@ -73,7 +75,7 @@ export const Dialog = ({
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
 
-                <div className={"fixed inset-0 z-30"}>
+                <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 ",

package/src/components/DialogContent.tsx

@@ -19,7 +19,7 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cls("h-full flex-grow",
+        className={cls("flex-grow",
             { "my-6 mx-6": includeMargin },
             className)}>
         {children}

package/src/components/FileUpload.tsx

@@ -89,7 +89,8 @@ export function FileUpload({
         <div
             className="flex-grow h-28 box-border flex flex-col items-center justify-center text-center">
             <Typography align={"center"}
-                        variant={"label"}>
+                        variant={"label"}
+                        className={"flex flex-row gap-2 justify-center"}>
                 {uploadDescription}
             </Typography>
         </div>

package/src/components/Menu.tsx

@@ -15,6 +15,9 @@ export type MenuProps = {
     portalContainer?: HTMLElement | null;
     side?: "top" | "right" | "bottom" | "left";
     align?: "start" | "center" | "end";
+
+    sideOffset?: number;
+    className?: string;
 }
 
 const Menu = React.forwardRef<
@@ -28,7 +31,9 @@ const Menu = React.forwardRef<
        side,
        align,
        onOpenChange,
-       portalContainer
+       portalContainer,
+       sideOffset = 4,
+                                    className
    }, ref) => (
     <DropdownMenu.Root
         open={open}
@@ -42,8 +47,9 @@ const Menu = React.forwardRef<
         <DropdownMenu.Portal container={portalContainer}>
             <DropdownMenu.Content
                 side={side}
+                sideOffset={sideOffset}
                 align={align}
-                className={cls(paperMixin, focusedDisabled, "shadow py-2 z-30")}>
+                className={cls(paperMixin, focusedDisabled, "shadow py-2 z-30", className)}>
                 {children}
             </DropdownMenu.Content>
         </DropdownMenu.Portal>
@@ -57,18 +63,21 @@ export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
     onClick?: (event: React.MouseEvent) => void;
+    className?: string;
 };
 
 export function MenuItem({
                              children,
                              dense = false, // Default value is false if not provided
-                             onClick
+                             onClick,
+                             className
                          }: MenuItemProps) {
     // Dynamically adjusting the class based on the "dense" prop
     const classNames = cls(
         onClick && "cursor-pointer",
         "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",
-        dense ? "px-3 py-1.5" : "px-4 py-2"
+        dense ? "px-3 py-1.5" : "px-4 py-2",
+        className
     );
 
     return (

package/src/components/Menubar.tsx

@@ -44,7 +44,7 @@ export function MenubarTrigger({
     return (
         <MenubarPrimitive.Trigger
             onSelect={onSelect}
-            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-700 dark:hover:bg-opacity-50",
+            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
                 className)}>
             {children}
         </MenubarPrimitive.Trigger>