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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-canary.148",
+  "version": "3.0.0-canary.149",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -108,7 +108,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "69ccd5bec8161008d5219388a34b49ccdccda040",
+  "gitHead": "c359b0324515a679faf93c74791263bc27c4087d",
   "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" | "ghost" | "outlined" | "text";
+    variant?: "filled" | "neutral" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error";
     size?: "small" | "medium" | "large" | "xl" | "2xl";
@@ -54,15 +54,15 @@ const ButtonInner = React.forwardRef<
         "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,
+        // 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,
 
         // 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" || variant === "ghost") && disabled,
+        "border border-surface-500 bg-surface-500 opacity-50": (variant === "filled" || variant === "neutral") && disabled,
     });
 
     const sizeClasses = cls(

package/src/components/MultiSelect.tsx

@@ -279,7 +279,7 @@ export const MultiSelect = React.forwardRef<
                         <CommandPrimitive>
                             <div className={"flex flex-row items-center"}>
                                 <CommandPrimitive.Input
-                                    className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow")}
+                                    className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ")}
                                     placeholder="Search..."
                                     onKeyDown={handleInputKeyDown}
                                 />

package/src/components/Tabs.tsx

@@ -5,6 +5,7 @@ import { cls } from "../util";
 export type TabsProps = {
     value: string,
     children: React.ReactNode,
+    innerClassName?: string,
     className?: string,
     onValueChange: (value: string) => void
 };
@@ -13,13 +14,14 @@ export function Tabs({
                          value,
                          onValueChange,
                          className,
+                         innerClassName,
                          children
                      }: TabsProps) {
 
-    return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
+    return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={className}>
         <TabsPrimitive.List className={cls(
             "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar",
-            className)
+            innerClassName)
         }>
             {children}
         </TabsPrimitive.List>
@@ -29,6 +31,7 @@ export function Tabs({
 export type TabProps = {
     value: string,
     className?: string,
+    innerClassName?: string,
     children: React.ReactNode,
     disabled?: boolean
 };
@@ -36,6 +39,7 @@ export type TabProps = {
 export function Tab({
                         value,
                         className,
+                        innerClassName,
                         children,
                         disabled
                     }: TabProps) {
@@ -53,7 +57,8 @@ export function Tab({
                                       // "data-[state=active]:bg-surface-accent-50 data-[state=active]:dark:bg-surface-accent-800",
                                       className)}>
         <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800")}>
+            "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
+            innerClassName)}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;