@firecms/ui 3.0.0-beta.1 → 3.0.0-beta.10

package/src/components/Slider.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { cls } from "../util";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+export interface SliderProps {
+    className?: string;
+    name?: string;
+    disabled?: boolean;
+    orientation?: React.AriaAttributes["aria-orientation"];
+    dir?: "ltr" | "rtl";
+    min?: number;
+    max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+    inverted?: boolean;
+    form?: string;
+    size?: "small" | "regular";
+}
+
+function SliderThumb(props: {
+    props: Omit<React.PropsWithoutRef<SliderProps>, "size" | "className">,
+    index: number,
+    hovered: boolean,
+    classes: string
+}) {
+    return <TooltipPrimitive.Root open={props.hovered}>
+        <TooltipPrimitive.Trigger asChild>
+            <SliderPrimitive.Thumb
+                className={cls({
+                        "border-primary bg-primary hover:bg-primary-dark outline-none": !props.props.disabled,
+                        "border-slate-300 bg-slate-300 dark:border-gray-700 dark:bg-gray-700": props.props.disabled
+                    },
+                    props.classes,
+                    "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50",
+                    "hover:ring-4 hover:ring-primary hover:ring-opacity-25",
+                    "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50")}
+
+            />
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Content side="top"
+                                  sideOffset={5}
+                                  className={cls(
+                                      "TooltipContent",
+                                      "max-w-lg leading-relaxed",
+                                      "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+                                  )}>
+            {props.props.value?.[props.index]}
+        </TooltipPrimitive.Content>
+    </TooltipPrimitive.Root>;
+}
+
+const Slider = React.forwardRef<
+    React.ElementRef<typeof SliderPrimitive.Root>,
+    SliderProps
+>(({
+       className,
+       size = "regular",
+       ...props
+   }, ref) => {
+    const [hovered, setHovered] = React.useState(false);
+
+    const thumbSizeClasses =
+        size === "small"
+            ? "h-4 w-4" // Smaller size for the thumb
+            : "h-6 w-6"; // Default size
+
+    return (
+        <TooltipPrimitive.Provider delayDuration={200}>
+            <SliderPrimitive.Root
+                ref={ref}
+                onMouseEnter={() => setHovered(true)}
+                onMouseLeave={() => setHovered(false)}
+                className={cls(
+                    "relative flex w-full touch-none select-none items-center",
+                    className
+                )}
+                {...props}
+            >
+                <SliderPrimitive.Track
+                    style={{ height: size === "small" ? 4 : 8 }}
+                    className={"relative w-full grow overflow-hidden rounded-full bg-slate-300 bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40"}>
+
+                    <SliderPrimitive.Range
+                        className={cls("absolute h-full", {
+                            "bg-primary": !props.disabled,
+                            "bg-slate-300 dark:bg-gray-700": props.disabled,
+                        })}
+                    />
+                </SliderPrimitive.Track>
+
+                {(props.value ?? [0]).map((_, index) => <SliderThumb
+                    key={index}
+                    index={index}
+                    props={props}
+                    hovered={hovered}
+                    classes={thumbSizeClasses}/>)}
+            </SliderPrimitive.Root>
+        </TooltipPrimitive.Provider>
+    );
+});
+
+Slider.displayName = "Slider";
+
+export { Slider };

package/src/components/Table.tsx

@@ -1,21 +1,24 @@
 import React, { useRef } from "react";
 import { defaultBorderMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TableProps = {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-};
+} & React.TableHTMLAttributes<HTMLTableElement>;
 
 export const Table = ({
                           children,
                           className,
-                          style
+                          style,
+                          ...rest
                       }: TableProps) => (
-    <table className={cn("w-full text-left text-slate-800 dark:text-slate-200 rounded-md overflow-x-auto",
-        className)}
-           style={style}>
+    <table
+        className={cls("text-left text-gray-800 dark:text-white rounded-md overflow-x-auto", className)}
+        style={style}
+        {...rest}
+    >
         {children}
     </table>
 );
@@ -23,13 +26,17 @@ export const Table = ({
 export type TableBodyProps = {
     children?: React.ReactNode;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLTableSectionElement>;
+
 export const TableBody = ({
                               children,
-                              className
+                              className,
+                              ...rest
                           }: TableBodyProps) => (
     <tbody
-        className={cn("bg-white text-sm dark:bg-slate-800 divide-y divide-slate-200 dark:divide-slate-700", className)}>
+        className={cls("bg-white dark:bg-gray-950 text-sm divide-y divide-gray-100 dark:divide-gray-800 dark:divide-opacity-80", className)}
+        {...rest}
+    >
     {children}
     </tbody>
 );
@@ -37,17 +44,22 @@ export const TableBody = ({
 export type TableHeaderProps = {
     children?: React.ReactNode;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLTableSectionElement>;
 
 export const TableHeader = ({
                                 children,
-                                className
+                                className,
+                                ...rest
                             }: TableHeaderProps) => (
-    <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)}>
+    <thead {...rest}>
+    <tr
+        className={cls(
+            defaultBorderMixin,
+            "text-sm font-medium text-gray-700 dark:text-slate-300",
+            "bg-slate-50 border-b dark:bg-gray-900",
+            className
+        )}
+    >
         {children}
     </tr>
     </thead>
@@ -58,22 +70,24 @@ export type TableRowProps = {
     className?: string;
     onClick?: React.MouseEventHandler<any>;
     style?: React.CSSProperties;
-};
+} & React.HTMLAttributes<HTMLTableRowElement>;
 
 export const TableRow = ({
                              children,
                              className,
                              onClick,
-                             style
+                             style,
+                             ...rest
                          }: TableRowProps) => (
     <tr
         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" : "",
-            className)}
+        className={cls(
+            "bg-white dark:bg-gray-950",
+            onClick ? "hover:bg-slate-100 dark:hover:bg-gray-800 cursor-pointer" : "",
+            className
+        )}
+        {...rest}
     >
         {children}
     </tr>
@@ -87,7 +101,7 @@ export type TableCellProps = {
     style?: React.CSSProperties;
     align?: "left" | "center" | "right";
     colspan?: number;
-};
+} & React.HTMLAttributes<HTMLTableCellElement>;
 
 export const TableCell = ({
                               children,
@@ -96,20 +110,24 @@ export const TableCell = ({
                               align,
                               className,
                               style,
-                              colspan
+                              colspan,
+                              ...rest
                           }: TableCellProps) => {
-
     const ref = useRef<HTMLTableCellElement>(null);
-
     const Tag = header || getParentName(ref.current) === "TableHeader" ? "th" : "td";
     return (
-        <Tag scope={scope}
-             colSpan={colspan}
-             ref={ref}
-             style={style}
-             className={cn("px-4 py-3 text-clip ",
-                 align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
-                 className)}>
+        <Tag
+            scope={scope}
+            colSpan={colspan}
+            ref={ref}
+            style={style}
+            className={cls(
+                "px-4 py-3 text-clip ",
+                align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
+                className
+            )}
+            {...rest}
+        >
             {children}
         </Tag>
     );
@@ -124,7 +142,6 @@ function getParentName(element: HTMLElement | null): string | undefined {
                 key.startsWith("__reactInternalInstance$")
             );
         });
-
         // @ts-ignore
         const domFiber = element[key];
         // @ts-ignore

package/src/components/Tabs.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TabsProps = {
     value: string,
@@ -18,8 +17,8 @@ export function Tabs({
                      }: TabsProps) {
 
     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",
+        <TabsPrimitive.List className={cls(
+            "flex text-sm font-medium text-center text-slate-800 dark:text-white max-w-full overflow-auto no-scrollbar",
             className)
         }>
             {children}
@@ -42,19 +41,19 @@ export function Tab({
                     }: TabProps) {
     return <TabsPrimitive.Trigger value={value}
                                   disabled={disabled}
-                                  className={cn(focusedMixin,
+                                  className={cls(
                                       "border-b-2 border-transparent",
                                       "data-[state=active]:border-secondary",
                                       disabled
                                           ? "text-slate-400 dark:text-slate-500"
-                                          : cn("text-slate-700 dark:text-slate-300",
-                                              "data-[state=active]:text-slate-900 data-[state=active]:dark:text-slate-100",
+                                          : cls("text-slate-700 dark:text-slate-300",
+                                              "data-[state=active]:text-slate-900 data-[state=active]:dark:text-white",
                                               "hover:text-slate-800 dark:hover:text-slate-200"),
                                       // disabled ? "text-slate-400 dark:text-slate-500" : "data-[state=active]:text-primary",
                                       // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
                                       className)}>
-        <div className={cn("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-slate-100 dark:hover:bg-slate-800")}>
+        <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
+            "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800")}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;

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 {
@@ -7,10 +7,9 @@ import {
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
     focusedInvisibleMixin,
-    focusedMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type InputType =
     "text"
@@ -29,7 +28,7 @@ export type InputType =
 
 export type TextFieldProps<T extends string | number> = {
     type?: InputType,
-    value: T,
+    value?: T,
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void,
     label?: React.ReactNode,
     multiline?: boolean,
@@ -40,12 +39,12 @@ export type TextFieldProps<T extends string | number> = {
     endAdornment?: React.ReactNode,
     autoFocus?: boolean,
     placeholder?: string,
-    size?: "small" | "medium",
+    size?: "smallest" | "small" | "medium",
     className?: string,
     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>({
@@ -70,19 +69,32 @@ export function TextField<T extends string | number>({
                                                          ...inputProps
                                                      }: TextFieldProps<T>) {
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const inputRef = inputRefProp ?? useRef(null);
 
     // @ts-ignore
     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
@@ -92,13 +104,11 @@ export function TextField<T extends string | number>({
             placeholder={focused || hasValue || !label ? placeholder : undefined}
             autoFocus={autoFocus}
             rows={rows}
-            // onFocus={() => setFocused(true)}
-            // onBlur={() => setFocused(false)}
             value={value ?? ""}
             onChange={onChange}
             style={inputStyle}
-            className={cn(
-                invisible ? focusedInvisibleMixin : focusedMixin,
+            className={cls(
+                invisible ? focusedInvisibleMixin :  "",
                 "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-[28px]",
                 disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
             )}
@@ -109,16 +119,16 @@ export function TextField<T extends string | number>({
             onWheel={type === "number" ? numberInputOnWheelPreventChange : undefined}
             disabled={disabled}
             style={inputStyle}
-            className={cn(
+            className={cls(
                 "w-full outline-none bg-transparent leading-normal px-3",
                 "rounded-md",
-                invisible ? focusedInvisibleMixin : focusedMixin,
+                invisible ? focusedInvisibleMixin : "",
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                size === "small" ? "min-h-[48px]" : "min-h-[64px]",
+                size === "smallest" ? "min-h-[32px]" : (size === "small" ? "min-h-[48px]" : "min-h-[64px]"),
                 label ? (size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2") : "py-2",
                 focused ? "text-text-primary dark:text-text-primary-dark" : "",
                 endAdornment ? "pr-10" : "pr-3",
-                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-slate-200",
+                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-white",
                 inputClassName
             )}
             placeholder={focused || hasValue || !label ? placeholder : undefined}
@@ -132,12 +142,13 @@ export function TextField<T extends string | number>({
 
     return (
         <div
-            className={cn(
+            className={cls(
                 "rounded-md relative max-w-full",
                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 error ? "border border-red-500 dark:border-red-600" : "",
                 {
+                    "min-h-[32px]": !invisible && size === "smallest",
                     "min-h-[48px]": !invisible && size === "small",
                     "min-h-[64px]": !invisible && size === "medium"
                 },
@@ -146,7 +157,7 @@ export function TextField<T extends string | number>({
 
             {label && (
                 <InputLabel
-                    className={cn(
+                    className={cls(
                         "pointer-events-none absolute",
                         size === "medium" ? "top-1" : "-top-1",
                         !error ? (focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
@@ -159,7 +170,8 @@ export function TextField<T extends string | number>({
 
             {input}
 
-            {endAdornment && <div className="flex absolute right-0 top-3 mr-3 ">{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/TextareaAutosize.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useLayoutEffect } from "react";
 import * as ReactDOM from "react-dom";
-import { cn, debounce } from "../util";
+import { cls, debounce } from "../util";
 
 type State = {
     outerHeightStyle: number;
@@ -276,7 +276,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
             />
             <textarea
                 aria-hidden
-                className={cn(props.className, props.shadowClassName)}
+                className={cls(props.className, props.shadowClassName)}
                 readOnly
                 ref={shadowRef}
                 tabIndex={-1}
@@ -288,7 +288,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
             />
         </React.Fragment>
     );
-});
+}) as React.FC<TextareaAutosizeProps & { ref?: React.ForwardedRef<Element> }>;
 
 export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
 

package/src/components/Tooltip.tsx

@@ -1,30 +1,43 @@
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type TooltipProps = {
     open?: boolean,
+    defaultOpen?: boolean,
     onOpenChange?: (open: boolean) => void,
     side?: "top" | "bottom" | "left" | "right",
+    align?: "start" | "center" | "end",
     sideOffset?: number,
-    title?: string,
-    className?: string,
+    title?: string | React.ReactNode,
+    delayDuration?: number;
+    asChild?: boolean;
     tooltipClassName?: string,
+    tooltipStyle?: React.CSSProperties;
     children: React.ReactNode,
-    style?: React.CSSProperties
+    className?: string,
+    container?: HTMLElement,
+    style?: React.CSSProperties;
 };
 
 export const Tooltip = ({
                             open,
+                            defaultOpen,
                             side = "bottom",
+                            delayDuration = 200,
                             sideOffset,
+                            align,
                             onOpenChange,
                             title,
-                            className,
-                            style,
                             tooltipClassName,
-                            children
+                            tooltipStyle,
+                            children,
+                            asChild = false,
+                            container,
+                            className,
+                            style
                         }: TooltipProps) => {
 
     useInjectStyles("Tooltip", styles);
@@ -32,21 +45,29 @@ export const Tooltip = ({
     if (!title)
         return <>{children}</>;
 
+    const trigger = asChild
+        ? <TooltipPrimitive.Trigger asChild={true}>
+            {children}
+        </TooltipPrimitive.Trigger>
+        : <TooltipPrimitive.Trigger asChild={true}>
+            <div style={style} className={className}>
+                {children}
+            </div>
+        </TooltipPrimitive.Trigger>;
+
     return (
-        <TooltipPrimitive.Provider delayDuration={250}>
-            <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
-                <TooltipPrimitive.Trigger asChild>
-                    <div className={className} style={style}>
-                        {children}
-                    </div>
-                </TooltipPrimitive.Trigger>
-                <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Provider delayDuration={delayDuration}>
+            <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
+                {trigger}
+                <TooltipPrimitive.Portal container={container}>
                     <TooltipPrimitive.Content
-                        className={cn("TooltipContent",
+                        className={cls("TooltipContent",
                             "max-w-lg leading-relaxed",
                             "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                             tooltipClassName)}
+                        style={tooltipStyle}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}
+                        align={align}
                         side={side}>
                         {title}
                         {/*<TooltipPrimitive.Arrow className="fill-slate-600"/>*/}