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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -85,6 +85,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
+    "@tailwindcss/postcss": "^4.1.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -115,7 +116,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "8de3edb4560643922fe44e9c357985f64c3951c1",
+  "gitHead": "26d5e1f33a7ac00c78e45cd3cb3c397f4ba00821",
   "publishConfig": {
     "access": "public"
   }

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-transparent bg-surface-300 dark:bg-surface-500 opacity-40": (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/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
@@ -153,7 +154,12 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                         "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]",
+                        {
+                            "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 &&
@@ -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/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>

package/src/components/MultiSelect.tsx

@@ -18,41 +18,33 @@ import {
 } from "../styles";
 import { useInjectStyles } from "../hooks";
 
-interface MultiSelectContextProps {
-    fieldValue?: string[];
-    onItemClick: (v: string) => void;
+export type MultiSelectValue = string | number | boolean;
+
+// Make the context properly generic
+interface MultiSelectContextProps<T extends MultiSelectValue = string> {
+    fieldValue?: T[];
+    onItemClick: (v: T) => void;
 }
 
-export const MultiSelectContext = React.createContext<MultiSelectContextProps>({} as any);
+// Create a proper generic context
+export const MultiSelectContext = React.createContext<MultiSelectContextProps<any>>({} as any);
 
 /**
  * Props for MultiSelect component
  */
-interface MultiSelectProps {
-
-    /**
-     * The modality of the popover. When set to true, interaction with outside elements
-     * will be disabled and only popover content will be visible to screen readers.
-     * Optional, defaults to false.
-     */
+interface MultiSelectProps<T extends MultiSelectValue = string> {
     modalPopover?: boolean;
-
-    /**
-     * Additional class names to apply custom styles to the multi-select component.
-     * Optional, can be used to add custom styles.
-     */
     className?: string;
-
     open?: boolean,
     name?: string,
     id?: string,
     onOpenChange?: (open: boolean) => void,
-    value?: string[],
+    value?: T[],
     inputClassName?: string,
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
-    onValueChange?: (updatedValue: string[]) => void,
+    onValueChange?: (updatedValue: T[]) => void,
     placeholder?: React.ReactNode,
-    size?: "small" | "medium",
+    size?: "smallest" | "small" | "medium" | "large",
     useChips?: boolean,
     label?: React.ReactNode | string,
     disabled?: boolean,
@@ -66,9 +58,10 @@ interface MultiSelectProps {
     padding?: boolean,
     invisible?: boolean,
     children: React.ReactNode;
-    renderValues?: (values: string[]) => React.ReactNode;
+    renderValues?: (values: T[]) => React.ReactNode;
 }
 
+// Use generic type for the forwarded ref
 export const MultiSelect = React.forwardRef<
     HTMLButtonElement,
     MultiSelectProps
@@ -76,7 +69,7 @@ export const MultiSelect = React.forwardRef<
     (
         {
             value,
-            size,
+            size = "large",
             label,
             error,
             onValueChange,
@@ -95,8 +88,9 @@ export const MultiSelect = React.forwardRef<
         },
         ref
     ) => {
+        // Properly type the state variables to match the generic props
         const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
-        const [selectedValues, setSelectedValues] = React.useState<string[]>(value ?? []);
+        const [selectedValues, setSelectedValues] = React.useState<any[]>(value ?? []);
 
         const onPopoverOpenChange = (open: boolean) => {
             setIsPopoverOpen(open);
@@ -115,24 +109,24 @@ export const MultiSelect = React.forwardRef<
                     return child.props.value;
                 }
                 return null;
-            }).filter(Boolean) as string[]
+            }).filter(Boolean) as any[]
             : [];
 
         React.useEffect(() => {
             setSelectedValues(value ?? []);
         }, [value]);
 
-        function onItemClick(newValue: string) {
-            let newSelectedValues: string[];
-            if (selectedValues.includes(newValue)) {
-                newSelectedValues = selectedValues.filter((v) => v !== newValue);
+        function onItemClick(newValue: any) {
+            let newSelectedValues: any[];
+            if (selectedValues.some(v => String(v) === String(newValue))) {
+                newSelectedValues = selectedValues.filter(v => String(v) !== String(newValue));
             } else {
                 newSelectedValues = [...selectedValues, newValue];
             }
             updateValues(newSelectedValues);
         }
 
-        function updateValues(values: string[]) {
+        function updateValues(values: any[]) {
             setSelectedValues(values);
             onValueChange?.(values);
         }
@@ -149,9 +143,9 @@ export const MultiSelect = React.forwardRef<
             }
         };
 
-        const toggleOption = (value: string) => {
-            const newSelectedValues = selectedValues.includes(value)
-                ? selectedValues.filter((v) => v !== value)
+        const toggleOption = (value: any) => {
+            const newSelectedValues = selectedValues.some(v => String(v) === String(value))
+                ? selectedValues.filter(v => String(v) !== String(value))
                 : [...selectedValues, value];
             updateValues(newSelectedValues);
         };
@@ -199,9 +193,20 @@ export const MultiSelect = React.forwardRef<
                             ref={ref}
                             onClick={handleTogglePopover}
                             className={cls(
-                                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                                "py-2",
-                                "px-4",
+                                {
+                                    "min-h-[28px]": size === "smallest",
+                                    "min-h-[32px]": size === "small",
+                                    "min-h-[42px]": size === "medium",
+                                    "min-h-[64px]": size === "large",
+                                },
+                                {
+                                    "py-1": size === "small" || size === "smallest",
+                                    "py-2": size === "medium" || size === "large",
+                                },
+                                {
+                                    "px-2": size === "small" || size === "smallest",
+                                    "px-4": size === "medium" || size === "large",
+                                },
                                 "select-none rounded-md text-sm",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -222,14 +227,14 @@ export const MultiSelect = React.forwardRef<
                                                 }
                                             }).filter(Boolean);
 
-                                            const option = childrenProps.find((o) => o.value === value);
+                                            const option = childrenProps.find((o) => String(o.value) === String(value));
                                             if (!useChips) {
                                                 return option?.children;
                                             }
                                             return (
                                                 <Chip
                                                     size={"medium"}
-                                                    key={value}
+                                                    key={String(value)}
                                                     className={cls("flex flex-row items-center p-1")}
                                                 >
                                                     {option?.children}
@@ -255,7 +260,7 @@ export const MultiSelect = React.forwardRef<
                                         />}
                                         <div className={cls("px-2 h-full flex items-center")}>
                                             <KeyboardArrowDownIcon size={"small"}
-                                                            className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                                                   className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
                                         </div>
                                     </div>
                                 </div>
@@ -266,7 +271,7 @@ export const MultiSelect = React.forwardRef<
                                     </span>
                                     <div className={cls("px-2 h-full flex items-center")}>
                                         <KeyboardArrowDownIcon size={"small"}
-                                                        className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                                               className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
                                     </div>
                                 </div>
                             )}
@@ -319,7 +324,6 @@ export const MultiSelect = React.forwardRef<
                                     </CommandPrimitive.Item>}
                                     {children}
                                 </CommandPrimitive.Group>
-
                             </CommandPrimitive.List>
                         </CommandPrimitive>
                     </PopoverPrimitive.Content>
@@ -331,18 +335,17 @@ export const MultiSelect = React.forwardRef<
 
 MultiSelect.displayName = "MultiSelect";
 
-export interface MultiSelectItemProps {
-    value: string;
+export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
+    value: T;
     children?: React.ReactNode,
     className?: string;
 }
 
-export function MultiSelectItem({
-                                    children,
-                                    value,
-                                    className
-                                }: MultiSelectItemProps) {
-
+export function MultiSelectItem<T extends MultiSelectValue = string>({
+                                                                         children,
+                                                                         value,
+                                                                         className
+                                                                     }: MultiSelectItemProps<T>) {
     const context = React.useContext(MultiSelectContext);
     if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
     const {
@@ -350,9 +353,9 @@ export function MultiSelectItem({
         onItemClick
     } = context;
 
-    const isSelected = (fieldValue ?? []).includes(value);
+    const isSelected = (fieldValue ?? []).some(v => String(v) === String(value));
+
     return <CommandPrimitive.Item
-        // value={value}
         onMouseDown={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -375,9 +378,9 @@ export function MultiSelectItem({
         <InnerCheckBox checked={isSelected}/>
         {children}
     </CommandPrimitive.Item>;
-
 }
 
+
 function InnerCheckBox({ checked }: { checked: boolean }) {
     return <div className={cls(
         "p-2",