@firecms/ui 3.0.0-beta.2-pre.5 → 3.0.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-beta.2-pre.5",
+    "version": "3.0.0-beta.3",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -27,6 +27,14 @@
         "headless cms",
         "content manager"
     ],
+    "exports": {
+        ".": {
+            "import": "./dist/index.es.js",
+            "require": "./dist/index.umd.js",
+            "types": "./dist/src/index.d.ts"
+        },
+        "./package.json": "./package.json"
+    },
     "scripts": {
         "watch": "vite build --watch",
         "build": "vite build && tsc --emitDeclarationOnly",
@@ -47,6 +55,7 @@
         "@radix-ui/react-portal": "^1.0.4",
         "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
@@ -101,7 +110,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "5159646cfdb35e11cc510080bd3cff17104d0cb4",
+    "gitHead": "33cceff5d5bc2a7002cc5a3904b787e70bfb9c6e",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Alert.tsx

@@ -29,7 +29,7 @@ const getColorClasses = (severity: string) => {
         case "warning":
             return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
         case "info":
-            return "bg-blue-50 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
         case "success":
             return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
         case "base":
@@ -55,6 +55,7 @@ export const Alert: React.FC<AlertProps> = ({
             className={cn(
                 getSizeClasses(size),
                 "w-full",
+                "font-medium",
                 "rounded-md flex items-center gap-2",
                 classes,
                 className)}>

package/src/components/Button.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import {focusedMixin} from "../styles";
+import {cn} from "../util";
 
 export type ButtonProps<P extends React.ElementType> =
     Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
     & {
     variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
+    color?: "primary" | "secondary" | "text" | "error";
     size?: "small" | "medium" | "large";
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
@@ -15,32 +16,57 @@ export type ButtonProps<P extends React.ElementType> =
     onClick?: React.MouseEventHandler<any>
 };
 
-export function Button<P extends React.ElementType>({
-                                                        children,
-                                                        className,
-                                                        variant = "filled",
-                                                        disabled = false,
-                                                        size = "medium",
-                                                        startIcon = null,
-                                                        fullWidth = false,
-                                                        component: Component,
-                                                        ...props
-                                                    }: ButtonProps<P>) {
+const ButtonInner = React.forwardRef<
+    ButtonProps<React.ElementType<any>>
+>(({
+       children,
+       className,
+       variant = "filled",
+       disabled = false,
+       size = "medium",
+       startIcon = null,
+       fullWidth = false,
+       component: Component,
+       color = "primary",
+       ...props
+   }: ButtonProps<any>, ref) => {
 
     const baseClasses =
-        "h-fit rounded-md border uppercase inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
+        "h-fit rounded-md uppercase inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
 
-    const buttonClasses = cn(
-        {
-            "w-full": fullWidth,
-            "w-fit": !fullWidth,
-            "border-transparent bg-primary hover:bg-primary-dark focus:ring-primary !text-white shadow hover:ring-1 hover:ring-primary": variant === "filled" && !disabled,
-            "border-transparent !text-primary !hover:text-primary-dark hover:bg-primary hover:bg-primary-bg": variant === "text" && !disabled,
-            "border-primary !text-primary hover:bg-primary-bg hover:border-primary-dark !hover:text-primary-dark focus:ring-primary hover:ring-1 hover:ring-primary": variant === "outlined" && !disabled,
-            "border-primary-dark border-opacity-50 dark:border-primary dark:border-opacity-50 opacity-50 !text-primary-dark !dark:text-primary text-opacity-50 dark:text-opacity-50": variant === "outlined" && disabled,
-            "border-transparent outline-none opacity-50 !text-slate-600 !dark:text-slate-500": (variant === "filled" || variant === "text") && disabled
-        }
-    );
+    // const buttonClasses = cn(
+    //     {
+    //         "w-full": fullWidth,
+    //         "w-fit": !fullWidth,
+    //         "border-transparent bg-primary hover:bg-primary-dark focus:ring-primary !text-white shadow hover:ring-1 hover:ring-primary": variant === "filled" && !disabled,
+    //         "border-transparent !text-primary !hover:text-primary-dark hover:bg-primary hover:bg-primary-bg": variant === "text" && !disabled,
+    //         "border-primary !text-primary hover:bg-primary-bg hover:border-primary-dark !hover:text-primary-dark focus:ring-primary hover:ring-1 hover:ring-primary": variant === "outlined" && !disabled,
+    //         "border-primary-dark border-opacity-50 dark:border-primary dark:border-opacity-50 opacity-50 !text-primary-dark !dark:text-primary text-opacity-50 dark:text-opacity-50": variant === "outlined" && disabled,
+    //         "border-transparent outline-none opacity-50 !text-slate-600 !dark:text-slate-500": (variant === "filled" || variant === "text") && disabled
+    //     }
+    // );
+
+    const buttonClasses = cn({
+        "w-full": fullWidth,
+        "w-fit": !fullWidth,
+        // Filled Variants
+        "border border-transparent bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white": variant === "filled" && color === "primary" && !disabled,
+        "border border-transparent bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white": variant === "filled" && color === "secondary" && !disabled,
+        "border border-transparent bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-transparent bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        // Text Variants
+        "border border-transparent text-primary hover:bg-slate-200 dark:hover:bg-gray-900": variant === "text" && color === "primary" && !disabled,
+        "border border-transparent text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
+        "border border-transparent text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
+        "border border-transparent text-text-primary dark:text-text-primary-dark hover:bg-slate-200 hover:dark:bg-gray-700": variant === "text" && color === "text" && !disabled,
+        // Outlined Variants
+        "border border-primary text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
+        "border border-secondary text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
+        "border border-red-500 text-red-500 hover:bg-red-500": variant === "outlined" && color === "error" && !disabled,
+        "border border-slate-400 text-text-primary dark:text-text-primary-dark hover:bg-slate-200": variant === "outlined" && color === "text" && !disabled,
+        // Disabled states for all variants
+        "border border-transparent opacity-50": disabled
+    });
 
     const sizeClasses = cn(
         {
@@ -52,9 +78,11 @@ export function Button<P extends React.ElementType>({
 
     if (Component) {
         return (
-            <Component onClick={props.onClick}
-                       className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
-                       {...(props as React.ComponentPropsWithRef<P>)}>
+            <Component
+                ref={ref}
+                onClick={props.onClick}
+                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                {...(props as React.ComponentPropsWithRef<any>)}>
                 {startIcon}
                 {children}
             </Component>
@@ -62,7 +90,8 @@ export function Button<P extends React.ElementType>({
     }
 
     return (
-        <button type={props.type ?? "button"}
+        <button ref={ref as any}
+                type={props.type ?? "button"}
                 onClick={props.onClick}
                 className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 disabled={disabled}
@@ -71,4 +100,9 @@ export function Button<P extends React.ElementType>({
             {children}
         </button>
     );
-}
+
+});
+
+ButtonInner.displayName = "Button"
+
+export const Button = ButtonInner as React.FC<ButtonProps<any>>;

package/src/components/ExpandablePanel.tsx

@@ -88,6 +88,7 @@ export function ExpandablePanel({
                 <Collapsible.Trigger
                     className={cn(focusedMixin,
                         "rounded flex items-center justify-between w-full min-h-[52px]",
+                        "hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,

package/src/components/IconButton.tsx

@@ -5,7 +5,7 @@ import { cn } from "../util";
 export type IconButtonProps<C extends React.ElementType> =
     Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick">
     & {
-    size?: "medium" | "small" | "large";
+    size?: "medium" | "small" | "smallest" | "large";
     variant?: "ghost" | "filled",
     shape?: "circular" | "square",
     disabled?: boolean;
@@ -15,13 +15,14 @@ export type IconButtonProps<C extends React.ElementType> =
 }
 
 const buttonClasses =
-    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75";
+    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50";
 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-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-slate-300";
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
+    smallest: "w-6 !h-6 min-w-6 min-h-6",
     large: "w-12 !h-12 min-w-12 min-h-12"
 }
 const shapeClasses = {
@@ -41,7 +42,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      ...props
                                                                  }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-50 dark:bg-slate-900";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-50 dark:bg-gray-950 dark:bg-opacity-50";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component

package/src/components/Popover.tsx

@@ -56,7 +56,8 @@ export function Popover({
             {trigger}
         </PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
-            <PopoverPrimitive.Content className={cn(paperMixin, "PopoverContent shadow z-40", className)}
+            <PopoverPrimitive.Content className={cn(paperMixin,
+                "PopoverContent shadow z-40", className)}
                                       side={side}
                                       sideOffset={sideOffset}
                                       align={align}

package/src/components/Separator.tsx

@@ -0,0 +1,22 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+export function Separator({ orientation, decorative }: {
+    orientation: "horizontal" | "vertical",
+    decorative?: boolean
+}) {
+    if (orientation === "horizontal")
+        return (
+            <SeparatorPrimitive.Root
+                decorative={decorative}
+                orientation="horizontal"
+                className="dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[8px]"/>
+        );
+    else
+        return (
+            <SeparatorPrimitive.Root
+                className="dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[8px]"
+                decorative={decorative}
+                orientation="vertical"
+            />
+        );
+}

package/src/components/Tabs.tsx

@@ -19,7 +19,7 @@ export function Tabs({
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
         <TabsPrimitive.List className={cn(
-            "flex text-sm font-medium text-center text-slate-800 dark:text-slate-200",
+            "flex text-sm font-medium text-center text-slate-800 dark:text-slate-200 max-w-full overflow-auto no-scrollbar",
             className)
         }>
             {children}

package/src/components/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 import { TextareaAutosize } from "./TextareaAutosize";
 import {
@@ -45,7 +45,7 @@ export type TextFieldProps<T extends string | number> = {
     style?: React.CSSProperties,
     inputClassName?: string,
     inputStyle?: React.CSSProperties,
-    inputRef?: React.Ref<any>,
+    inputRef?: React.ForwardedRef<any>
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
 export function TextField<T extends string | number>({
@@ -77,12 +77,26 @@ export function TextField<T extends string | number>({
     const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
     const hasValue = value !== undefined && value !== null && value !== "";
 
+    useEffect(() => {
+        if (type !== "number") return;
+        const handleWheel = (event: any) => {
+            event.preventDefault(); // Prevent scrolling the number input
+        };
+
+        // Current input element
+        const element = "current" in inputRef ? inputRef.current : inputRef;
+
+        // Add the event listener
+        element.addEventListener("wheel", handleWheel);
+
+        // Remove event listener on cleanup
+        return () => {
+            element.removeEventListener("wheel", handleWheel);
+        };
+    }, [inputRef, type]);
+
     const numberInputOnWheelPreventChange = useCallback((e: any) => {
-        e.target.blur()
-        e.stopPropagation()
-        setTimeout(() => {
-            e.target.focus()
-        }, 0)
+        e.preventDefault()
     }, []);
 
     const input = multiline
@@ -159,7 +173,8 @@ export function TextField<T extends string | number>({
 
             {input}
 
-            {endAdornment && <div className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4 ">{endAdornment}</div>}
+            {endAdornment && <div
+                className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4 ">{endAdornment}</div>}
 
         </div>
     );

package/src/components/Tooltip.tsx

@@ -8,7 +8,7 @@ export type TooltipProps = {
     onOpenChange?: (open: boolean) => void,
     side?: "top" | "bottom" | "left" | "right",
     sideOffset?: number,
-    title?: string,
+    title?: string | React.ReactNode,
     delayDuration?: number;
     className?: string,
     tooltipClassName?: string,

package/src/components/index.tsx

@@ -25,8 +25,9 @@ export * from "./Markdown";
 export * from "./Menu";
 export * from "./MultiSelect";
 export * from "./Paper";
-export * from "./Select";
 export * from "./SearchBar";
+export * from "./Select";
+export * from "./Separator";
 export * from "./Sheet";
 export * from "./Spinner";
 export * from "./TextareaAutosize";

package/src/icons/HandleIcon.tsx

@@ -0,0 +1,10 @@
+export function HandleIcon() {
+    return <svg width="24" height="24" viewBox="0 0 100 100" fill="none">
+        <circle cx="28" cy="50" r="9" fill={"currentColor"}/>
+        <circle cx="28" cy="21" r="9" fill={"currentColor"}/>
+        <circle cx="71" cy="21" r="9" fill={"currentColor"}/>
+        <circle cx="71" cy="50" r="9" fill={"currentColor"}/>
+        <circle cx="71" cy="78" r="9" fill={"currentColor"}/>
+        <circle cx="28" cy="78" r="9" fill={"currentColor"}/>
+    </svg>;
+}

package/src/icons/index.ts

@@ -2,6 +2,7 @@ export * from "./icon_keys";
 export * from "./cool_icon_keys";
 export * from "./Icon";
 export * from "./GitHubIcon";
+export * from "./HandleIcon";
 export * from "./components/_10kIcon";
 export * from "./components/_10mpIcon";
 export * from "./components/_11mpIcon";

package/src/scripts/saveIconFiles.ts

@@ -18,7 +18,7 @@ export function saveIconFiles(iconKeys: string[]) {
     fs.mkdirSync(path.join(__dirname, "../icons/components"), { recursive: true });
 
 // create empty index file
-    fs.writeFileSync(path.join(__dirname, "../icons/index.ts"), "export * from \"./icon_keys\";\nexport * from \"./cool_icon_keys\";\nexport * from \"./Icon\";\nexport * from \"./GitHubIcon\";\n");
+    fs.writeFileSync(path.join(__dirname, "../icons/index.ts"), "export * from \"./icon_keys\";\nexport * from \"./cool_icon_keys\";\nexport * from \"./Icon\";\nexport * from \"./GitHubIcon\";\nexport * from \"./HandleIcon\";\n");
 
 // for each key, generate a file with an Icon ts component
     iconKeys.forEach((key: string) => {