@firecms/ui 3.0.0-canary.16 → 3.0.0-canary.160

package/src/components/Sheet.tsx

@@ -1,37 +1,43 @@
-import React, { useEffect } from "react";
+"use client";
+import React, { useEffect, useState } from "react";
+import { cls } from "../util";
+import { defaultBorderMixin } from "../styles";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../util";
 
 interface SheetProps {
     children: React.ReactNode;
     open: boolean;
+    title?: string;
+    modal?: boolean;
+    includeBackgroundOverlay?: boolean;
     side?: "top" | "bottom" | "left" | "right";
+    darkBackground?: boolean;
     transparent?: boolean;
     onOpenChange?: (open: boolean) => void;
+    className?: string;
+    overlayClassName?: string;
 }
 
 export const Sheet: React.FC<SheetProps> = ({
                                                 children,
                                                 side = "right",
+                                                title,
+                                                modal = true,
+                                                includeBackgroundOverlay = true,
                                                 open,
                                                 onOpenChange,
                                                 transparent,
+                                                className,
+                                                overlayClassName,
                                                 ...props
                                             }) => {
-
-    const [displayed, setDisplayed] = React.useState(false);
+    const [displayed, setDisplayed] = useState(false);
 
     useEffect(() => {
-        if (!open) {
-            const timeout = setTimeout(() => {
-                setDisplayed(false);
-            }, 250);
-            return () => clearTimeout(timeout);
-        } else {
-            setDisplayed(true);
-            return () => {
-            };
-        }
+        const timeout = setTimeout(() => {
+            setDisplayed(open);
+        }, 1);
+        return () => clearTimeout(timeout);
     }, [open]);
 
     const transformValue: Record<string, string> = {
@@ -41,36 +47,52 @@ export const Sheet: React.FC<SheetProps> = ({
         right: "translate-x-full"
     };
 
-    return (
+    const borderClass: Record<string, string> = {
+        top: "border-b",
+        bottom: "border-t",
+        left: "border-r",
+        right: "border-l"
+    };
 
+    return (
         <DialogPrimitive.Root open={displayed || open}
+                              modal={modal}
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
-                <DialogPrimitive.Overlay
-                    className={cn(
-                        "fixed inset-0 transition-opacity z-20 ease-in-out duration-200  backdrop-blur-sm",
-                        transparent ? "bg-white bg-opacity-80" : "bg-black bg-opacity-50",
-                        "dark:bg-black dark:bg-opacity-60",
-                        displayed && open ? "opacity-100" : "opacity-0"
+                <DialogPrimitive.Title autoFocus tabIndex={0}>
+                    {title ?? "Sheet"}
+                </DialogPrimitive.Title>
+                {includeBackgroundOverlay && <DialogPrimitive.Overlay
+                    className={cls(
+                        "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
+                        "bg-black bg-opacity-50",
+                        "dark:bg-surface-900 dark:bg-opacity-60",
+                        displayed && open ? "opacity-100" : "opacity-0",
+                        overlayClassName
                     )}
                     style={{
-                        pointerEvents: displayed ? "auto" : "none",
+                        pointerEvents: displayed ? "auto" : "none"
                     }}
-                />
+                />}
                 <DialogPrimitive.Content
                     {...props}
-                    className={cn(
-                        // "transform-gpu",
+                    onFocusCapture={(event) => event.preventDefault()}
+                    className={cls(
+                        borderClass[side],
+                        defaultBorderMixin,
+                        "transform-gpu",
                         "will-change-transform",
-                        "text-slate-900 dark:text-white",
-                        "fixed transform z-20 transition-all duration-[240ms] ease-in-out",
+                        "text-surface-accent-900 dark:text-white",
+                        "fixed transform z-20 transition-all ease-in-out",
+                        !displayed ? "duration-150" : "duration-100",
                         "outline-none focus:outline-none",
-                        !transparent ? "shadow-md" : "",
+                        transparent ? "" : "shadow-md bg-white dark:bg-surface-950",
                         side === "top" || side === "bottom" ? "w-full" : "h-full",
                         side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0",
-                        displayed && open ? "opacity-100" : "opacity-0",
-                        !displayed || !open ? transformValue[side] : "")
-                    }
+                        displayed && open ? "opacity-100" : "opacity-50",
+                        !displayed || !open ? transformValue[side] : "",
+                        className
+                    )}
                 >
                     {children}
                 </DialogPrimitive.Content>

package/src/components/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type SkeletonProps = {
     width?: number;
@@ -12,13 +12,16 @@ export function Skeleton({
                              height,
                              className
                          }: SkeletonProps) {
-    return <span className={
-        cn(
+    return <span
+        style={{
+            width: width ? `${width}px` : "100%",
+            height: height ? `${height}px` : "12px"
+        }}
+        className={
+        cls(
             "block",
-            "bg-slate-200 dark:bg-slate-800 rounded",
+            "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md",
             "animate-pulse",
-            width ? `w-[${width}px]` : "w-full",
-            height ? `h-[${height}px]` : "h-3",
             "max-w-full max-h-full",
             className)
     }/>;

package/src/components/Slider.tsx

@@ -0,0 +1,110 @@
+"use client";
+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-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-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-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-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-surface-accent-300 bg-opacity-40 dark:bg-surface-700 dark:bg-opacity-40"}>
+
+                    <SliderPrimitive.Range
+                        className={cls("absolute h-full", {
+                            "bg-primary": !props.disabled,
+                            "bg-surface-accent-300 dark:bg-surface-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,26 @@
+"use client";
+
 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-gray-800 dark:text-white rounded-md overflow-x-auto",
-        className)}
-           style={style}>
+    <table
+        className={cls("text-left text-surface-800 dark:text-white rounded-md overflow-x-auto", className)}
+        style={style}
+        {...rest}
+    >
         {children}
     </table>
 );
@@ -23,13 +28,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-gray-800 divide-y divide-slate-200 dark:divide-gray-700", className)}>
+        className={cls("bg-white dark:bg-surface-950 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70", className)}
+        {...rest}
+    >
     {children}
     </tbody>
 );
@@ -37,17 +46,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-gray-700 dark:text-slate-300",
-        "bg-slate-50 border-b dark:bg-gray-900", className)}>
+    <thead {...rest}>
+    <tr
+        className={cls(
+            defaultBorderMixin,
+            "text-sm font-medium text-surface-700 dark:text-surface-accent-300",
+            "bg-surface-accent-50 border-b dark:bg-surface-900",
+            className
+        )}
+    >
         {children}
     </tr>
     </thead>
@@ -58,22 +72,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-gray-800",
-            "bg-white dark:bg-gray-950",
-            onClick ? "hover:bg-slate-100 dark:hover:bg-gray-800 cursor-pointer" : "",
-            className)}
+        className={cls(
+            "bg-white dark:bg-surface-950",
+            onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "",
+            className
+        )}
+        {...rest}
     >
         {children}
     </tr>
@@ -87,7 +103,7 @@ export type TableCellProps = {
     style?: React.CSSProperties;
     align?: "left" | "center" | "right";
     colspan?: number;
-};
+} & React.HTMLAttributes<HTMLTableCellElement>;
 
 export const TableCell = ({
                               children,
@@ -96,20 +112,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 +144,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,11 +1,11 @@
 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,
     children: React.ReactNode,
+    innerClassName?: string,
     className?: string,
     onValueChange: (value: string) => void
 };
@@ -14,13 +14,14 @@ export function Tabs({
                          value,
                          onValueChange,
                          className,
+                         innerClassName,
                          children
                      }: TabsProps) {
 
-    return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
-        <TabsPrimitive.List className={cn(
-            "flex text-sm font-medium text-center text-slate-800 dark:text-white max-w-full overflow-auto no-scrollbar",
-            className)
+    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 items-end",
+            innerClassName)
         }>
             {children}
         </TabsPrimitive.List>
@@ -30,6 +31,7 @@ export function Tabs({
 export type TabProps = {
     value: string,
     className?: string,
+    innerClassName?: string,
     children: React.ReactNode,
     disabled?: boolean
 };
@@ -37,24 +39,24 @@ export type TabProps = {
 export function Tab({
                         value,
                         className,
+                        innerClassName,
                         children,
                         disabled
                     }: 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-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",
+                                          ? "text-surface-accent-400 dark:text-surface-accent-500"
+                                          : cls("text-surface-accent-700 dark:text-surface-accent-300",
+                                              "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white",
+                                              "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"),
                                       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-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
+            innerClassName)}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;

package/src/components/TextField.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useCallback, useEffect, useRef } from "react";
 
 import { TextareaAutosize } from "./TextareaAutosize";
@@ -7,10 +8,9 @@ import {
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
     focusedInvisibleMixin,
-    focusedMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type InputType =
     "text"
@@ -40,7 +40,7 @@ export type TextFieldProps<T extends string | number> = {
     endAdornment?: React.ReactNode,
     autoFocus?: boolean,
     placeholder?: string,
-    size?: "small" | "medium",
+    size?: "small" | "medium" | "large",
     className?: string,
     style?: React.CSSProperties,
     inputClassName?: string,
@@ -61,7 +61,7 @@ export function TextField<T extends string | number>({
                                                          endAdornment,
                                                          autoFocus,
                                                          placeholder,
-                                                         size = "medium",
+                                                         size = "large",
                                                          className,
                                                          style,
                                                          inputClassName,
@@ -70,7 +70,6 @@ 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
@@ -80,7 +79,7 @@ export function TextField<T extends string | number>({
     useEffect(() => {
         if (type !== "number") return;
         const handleWheel = (event: any) => {
-            event.preventDefault(); // Prevent scrolling the number input
+            if (event.target instanceof HTMLElement) event.target.blur()
         };
 
         // Current input element
@@ -106,15 +105,13 @@ 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,
-                "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"
+            className={cls(
+                invisible ? focusedInvisibleMixin : "",
+                "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
+                disabled && "border border-transparent outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
             )}
         />
         : <input
@@ -123,16 +120,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]",
-                label ? (size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2") : "py-2",
+                size === "small" ? "min-h-[32px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
+                label ? (size === "large" ? "pt-8 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-white",
+                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
                 inputClassName
             )}
             placeholder={focused || hasValue || !label ? placeholder : undefined}
@@ -146,23 +143,24 @@ 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-[48px]": !invisible && size === "small",
-                    "min-h-[64px]": !invisible && size === "medium"
+                    "min-h-[32px]": !invisible && size === "small",
+                    "min-h-[48px]": !invisible && size === "medium",
+                    "min-h-[64px]": !invisible && size === "large"
                 },
                 className)}
             style={style}>
 
             {label && (
                 <InputLabel
-                    className={cn(
+                    className={cls(
                         "pointer-events-none absolute",
-                        size === "medium" ? "top-1" : "-top-1",
+                        size === "large" ? "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",
                         disabled ? "opacity-50" : "")}
                     shrink={hasValue || focused}
@@ -174,7 +172,11 @@ 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>}
+                className={cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
+                    "mr-4": size === "large",
+                    "mr-3": size === "medium",
+                    "mr-2": size === "small"
+                })}>{endAdornment}</div>}
 
         </div>
     );