@firecms/ui 3.0.0-canary.209 → 3.0.0-canary.210

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-canary.209",
+  "version": "3.0.0-canary.210",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -115,7 +115,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "9e3b4e8746ea9405f8c7b51e058a1a8c5a63f86b",
+  "gitHead": "b8bcb3a2230e8b02644ce5ed0891b273e7e7d630",
   "publishConfig": {
     "access": "public"
   }

package/src/components/Button.tsx

@@ -2,9 +2,7 @@
 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">
-    & {
+export type ButtonProps<C extends React.ElementType = "button"> = {
     children?: React.ReactNode;
     variant?: "filled" | "neutral" | "outlined" | "text";
     disabled?: boolean;
@@ -13,11 +11,13 @@ export type ButtonProps<P extends React.ElementType> =
     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,
@@ -45,8 +45,8 @@ const ButtonInner = React.forwardRef<
         "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-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,
 
@@ -84,7 +84,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/IconButton.tsx

@@ -5,7 +5,6 @@ import { cls } from "../util";
 export type IconButtonProps<C extends React.ElementType> =
     Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick">
     & {
-    children?: React.ReactNode;
     size?: "medium" | "small" | "smallest" | "large";
     variant?: "ghost" | "filled",
     shape?: "circular" | "square",

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>