@firecms/ui 3.0.0-canary.146 → 3.0.0-canary.148

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-canary.146",
+  "version": "3.0.0-canary.148",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -105,9 +105,10 @@
   "files": [
     "dist",
     "src",
+    "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "601e622a79787f5b08f7ac27646d044787b972f1",
+  "gitHead": "69ccd5bec8161008d5219388a34b49ccdccda040",
   "publishConfig": {
     "access": "public"
   }

package/src/components/Button.tsx

@@ -4,7 +4,7 @@ import { cls } from "../util";
 export type ButtonProps<P extends React.ElementType> =
     Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
     & {
-    variant?: "filled" | "outlined" | "text";
+    variant?: "filled" | "ghost" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error";
     size?: "small" | "medium" | "large" | "xl" | "2xl";
@@ -35,25 +35,34 @@ const ButtonInner = React.forwardRef<
     const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
+
         // Filled Variants
         "border border-primary bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
         "border border-secondary bg-secondary hover:bg-secondary-dark 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,
+
         // 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-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,
+
         // 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,
+
+        // Ghost 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 === "ghost" && (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 === "ghost" && 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-white": variant === "ghost" && color === "error" && !disabled,
+
         // Disabled states for all variants
         "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" && disabled,
+        "border border-surface-500 bg-surface-500 opacity-50": (variant === "filled" || variant === "ghost") && disabled,
     });
 
     const sizeClasses = cls(
@@ -71,7 +80,7 @@ const ButtonInner = React.forwardRef<
             <Component
                 ref={ref}
                 onClick={props.onClick}
-                className={cls( startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 {...(props as React.ComponentPropsWithRef<any>)}>
                 {startIcon}
                 {children}

package/src/components/IconButton.tsx

@@ -13,7 +13,7 @@ export type IconButtonProps<C extends React.ElementType> =
     onClick?: React.MouseEventHandler<any>
 }
 
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 hover:scale-110 transition-transform";
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {

package/src/components/MultiSelect.tsx

@@ -168,6 +168,7 @@ export const MultiSelect = React.forwardRef<
             } else {
                 updateValues(allValues);
             }
+            onPopoverOpenChange(false);
         };
 
         useInjectStyles("MultiSelect", `