@firecms/ui 3.0.0-beta.2-pre.4 → 3.0.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-beta.2-pre.4",
+    "version": "3.0.0-beta.2",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -47,14 +47,15 @@
         "@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",
         "cmdk": "^0.2.1",
-        "react-datepicker": "^4.24.0",
+        "react-datepicker": "^4.25.0",
         "react-dropzone": "^14.2.3",
         "react-fast-compare": "^3.2.2",
-        "tailwind-merge": "^1.14.0"
+        "tailwind-merge": "^2.2.1"
     },
     "peerDependencies": {
         "react": "^18.2.0",
@@ -93,15 +94,15 @@
         "npm-run-all": "^4.1.5",
         "ts-jest": "^29.1.2",
         "ts-node": "^10.9.2",
-        "tsd": "^0.28.1",
+        "tsd": "^0.30.4",
         "typescript": "^5.3.3",
-        "vite": "^4.5.2"
+        "vite": "^5.1.1"
     },
     "files": [
         "dist",
         "src"
     ],
-    "gitHead": "a947c08aada0e374aec7dff2b0dc9e540e170834",
+    "gitHead": "9c3561bc09311f2339bb6fa224c88a62d3b19617",
     "publishConfig": {
         "access": "public"
     }

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;
@@ -22,6 +22,7 @@ const colorClasses = "text-slate-600 visited:text-slate-600 dark: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 = {

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-400 bg-gray-500 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-400 bg-gray-500 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/Table.tsx

@@ -13,7 +13,7 @@ export const Table = ({
                           className,
                           style
                       }: TableProps) => (
-    <table className={cn("w-full text-left text-slate-800 dark:text-slate-200 rounded-md overflow-x-auto",
+    <table className={cn("w-full text-left text-gray-800 dark:text-slate-200 rounded-md overflow-x-auto",
         className)}
            style={style}>
         {children}
@@ -29,7 +29,7 @@ export const TableBody = ({
                               className
                           }: TableBodyProps) => (
     <tbody
-        className={cn("bg-white text-sm dark:bg-slate-800 divide-y divide-slate-200 dark:divide-slate-700", className)}>
+        className={cn("bg-white text-sm dark:bg-gray-800 divide-y divide-slate-200 dark:divide-gray-700", className)}>
     {children}
     </tbody>
 );
@@ -46,8 +46,8 @@ export const TableHeader = ({
     <thead>
     <tr className={cn(
         defaultBorderMixin,
-        "text-sm font-medium text-slate-700 dark:text-slate-300",
-        "bg-slate-50 border-b dark:bg-slate-900", className)}>
+        "text-sm font-medium text-gray-700 dark:text-slate-300",
+        "bg-slate-50 border-b dark:bg-gray-900", className)}>
         {children}
     </tr>
     </thead>
@@ -70,9 +70,9 @@ export const TableRow = ({
         onClick={onClick}
         style={style}
         className={cn(
-            "divide-slate-100 dark:divide-slate-800",
-            "bg-white dark:bg-slate-950",
-            onClick ? "hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer" : "",
+            "divide-slate-100 dark:divide-gray-800",
+            "bg-white dark:bg-gray-950",
+            onClick ? "hover:bg-slate-100 dark:hover:bg-gray-800 cursor-pointer" : "",
             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/Typography.tsx

@@ -89,7 +89,7 @@ export function Typography<C extends React.ElementType>(
         align !== "inherit" && `text-${align}`,
         gutterBottom && "mb-[0.35em]",
         noWrap && "truncate",
-        paragraph && "mb-4",
+        paragraph && "mb-3",
         className
     );
 

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) => {