@firecms/ui 3.0.0-canary.23 → 3.0.0-canary.231

package/src/components/DebouncedTextField.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { ChangeEvent, useCallback, useDeferredValue, useEffect } from "react";
 import { TextField, TextFieldProps } from "./index";
 

package/src/components/Dialog.tsx

@@ -1,13 +1,15 @@
+"use client";
 import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type DialogProps = {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children: React.ReactNode;
     className?: string;
+    containerClassName?: string;
     fullWidth?: boolean;
     fullHeight?: boolean;
     fullScreen?: boolean;
@@ -15,6 +17,9 @@ export type DialogProps = {
     maxWidth?: keyof typeof widthClasses;
     modal?: boolean;
     onOpenAutoFocus?: (e: Event) => void;
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+    onPointerDownOutside?: (e: Event) => void;
+    onInteractOutside?: (e: Event) => void;
 };
 
 const widthClasses = {
@@ -37,13 +42,17 @@ export const Dialog = ({
                            onOpenChange,
                            children,
                            className,
+                           containerClassName,
                            fullWidth = true,
                            fullHeight,
                            fullScreen,
                            scrollable = true,
                            maxWidth = "lg",
                            modal = true,
-                           onOpenAutoFocus
+                           onOpenAutoFocus,
+                           onEscapeKeyDown,
+                           onPointerDownOutside,
+                           onInteractOutside
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
@@ -51,7 +60,7 @@ export const Dialog = ({
         if (!open) {
             const timeout = setTimeout(() => {
                 setDisplayed(false);
-            }, 250);
+            }, 150);
             return () => clearTimeout(timeout);
         } else {
             setDisplayed(true);
@@ -66,10 +75,10 @@ export const Dialog = ({
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
 
-                <div className={"fixed inset-0 z-30"}>
+                <div className={cls("fixed inset-0 z-30", containerClassName)}>
 
                     <DialogPrimitive.Overlay
-                        className={cn("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
+                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}
@@ -79,17 +88,20 @@ export const Dialog = ({
                     />
 
                     <DialogPrimitive.Content
+                        onEscapeKeyDown={onEscapeKeyDown}
                         onOpenAutoFocus={onOpenAutoFocus}
-                        className={cn("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
+                        onPointerDownOutside={onPointerDownOutside}
+                        onInteractOutside={onInteractOutside}
+                        className={cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div
-                            className={cn(paperMixin,
+                            className={cls(paperMixin,
                                 "z-30",
                                 "relative",
                                 "outline-none focus:outline-none",
                                 fullWidth && !fullScreen ? "w-11/12" : undefined,
                                 fullHeight && !fullScreen ? "h-full" : undefined,
-                                "text-slate-900 dark:text-white",
+                                "text-surface-accent-900 dark:text-white",
                                 "justify-center items-center",
                                 fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
                                 "ease-in-out duration-200",

package/src/components/DialogActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { defaultBorderMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function DialogActions({
                                   children,
@@ -15,11 +15,11 @@ export function DialogActions({
 }) {
 
     return <div
-        className={cn(
+        className={cls(
             defaultBorderMixin,
             "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
             position,
-            "bg-white bg-opacity-60 dark:bg-gray-900 dark:bg-opacity-60",
+            "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60",
             translucent ? "backdrop-blur-sm" : "",
             className)}>
         {children}

package/src/components/DialogContent.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function DialogContent({
                                   children,
                                   className,
-                                  fullHeight
+                                  fullHeight,
+                                  includeMargin = true
                               }: {
     children: React.ReactNode,
+    includeMargin?: boolean,
     fullHeight?: boolean,
     className?: string
 }) {
@@ -17,7 +19,9 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cn("py-6 px-6 h-full flex-grow", className)}>
+        className={cls("flex-grow",
+            { "my-6 mx-6": includeMargin },
+            className)}>
         {children}
     </div>;
 }

package/src/components/DialogTitle.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { Typography, TypographyProps, TypographyVariant } from "./Typography";
+import { cls } from "../util";
+
+export type DialogContentProps = TypographyProps & {
+    children: React.ReactNode,
+    hidden?: boolean,
+    className?: string,
+    includeMargin?: boolean,
+    variant?: TypographyVariant
+};
+
+export function DialogTitle({
+                                children,
+                                hidden,
+                                className,
+                                variant = "subtitle2",
+                                gutterBottom = true,
+                                includeMargin = true,
+                                ...props
+                            }: DialogContentProps) {
+
+    const title = <DialogPrimitive.Title asChild>
+        <Typography variant={variant}
+                    className={cls({ "mt-8 mx-6": includeMargin }, className)}
+                    gutterBottom={gutterBottom}
+                    {...props}>
+            {children}
+        </Typography>
+    </DialogPrimitive.Title>;
+
+    if (hidden) {
+        return <VisuallyHidden.Root>{title}</VisuallyHidden.Root>
+    }
+
+    return title;
+}

package/src/components/ExpandablePanel.tsx

@@ -1,9 +1,11 @@
+"use client";
 import React, { PropsWithChildren, useEffect, useState } from "react";
 
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { defaultBorderMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { ExpandMoreIcon } from "../icons";
-import { cn, useInjectStyles } from "../util";
+import { defaultBorderMixin, fieldBackgroundMixin } from "../styles";
+import { KeyboardArrowDownIcon } from "../icons";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export function ExpandablePanel({
                                     title,
@@ -14,7 +16,8 @@ export function ExpandablePanel({
                                     initiallyExpanded = true,
                                     titleClassName,
                                     asField,
-                                    className
+                                    className,
+                                    innerClassName
                                 }: PropsWithChildren<{
     title: React.ReactNode,
     invisible?: boolean,
@@ -23,7 +26,8 @@ export function ExpandablePanel({
     onExpandedChange?: (expanded: boolean) => void,
     titleClassName?: string,
     asField?: boolean,
-    className?: string
+    className?: string,
+    innerClassName?: string
 }>) {
 
     useInjectStyles("ExpandablePanel", `
@@ -75,9 +79,11 @@ export function ExpandablePanel({
 
     return (<>
             <Collapsible.Root
-                className={cn(
+                className={cls(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md"
+                    "rounded-md",
+                    "w-full",
+                    className
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {
@@ -86,26 +92,28 @@ export function ExpandablePanel({
                 }}>
 
                 <Collapsible.Trigger
-                    className={cn(focusedMixin,
-                        "rounded flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
+                    className={cls(
+                        "rounded-t flex items-center justify-between w-full min-h-[52px]",
+                        "hover:bg-surface-accent-200 hover:bg-opacity-20 dark:hover:bg-surface-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
+                        open ? "py-6" : "py-4",
+                        "transition-all duration-200",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,
                         titleClassName
                     )}
                 >
                     {title}
-                    <ExpandMoreIcon className={cn("transition", open ? "rotate-180" : "")}/>
+                    <KeyboardArrowDownIcon className={cls("transition", open ? "rotate-180" : "")}/>
                 </Collapsible.Trigger>
 
                 <Collapsible.Content
-                    className={cn("CollapsibleContent")}
+                    className={cls("CollapsibleContent")}
                     style={{
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}
                 >
-                    <div className={className}>
+                    <div className={innerClassName}>
                         {children}
                     </div>
                 </Collapsible.Content>

package/src/components/FileUpload.tsx

@@ -1,7 +1,8 @@
+"use client";
 import React from "react";
 import { useDropzone } from "react-dropzone";
-import { fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { fieldBackgroundHoverMixin, fieldBackgroundMixin } from "../styles";
+import { cls } from "../util";
 import { Typography } from "./Typography";
 
 export interface FileUploadError {
@@ -11,7 +12,7 @@ export interface FileUploadError {
 
 export type OnFileUploadRejected = (fileRejections: {
     file: File;
-    errors: FileUploadError[];
+    errors: readonly FileUploadError[];
 }[], event: object) => void;
 
 export type OnFilesUploadAdded = (files: File[]) => void;
@@ -27,7 +28,7 @@ export type FileUploadProps = {
     title?: React.ReactNode;
     uploadDescription?: React.ReactNode;
     preventDropOnDocument?: boolean;
-    size?: "small" | "medium";
+    size?: "medium" | "large";
 };
 
 export function FileUpload({
@@ -38,7 +39,7 @@ export function FileUpload({
                                disabled,
                                maxFiles,
                                title,
-                               uploadDescription = "Drag and drop a file here or click",
+                               uploadDescription,
                                children,
                                preventDropOnDocument = true,
                                size
@@ -63,21 +64,18 @@ export function FileUpload({
     );
     return <div
         {...getRootProps()}
-        className={cn(
+        className={cls(
             fieldBackgroundMixin,
-            fieldBackgroundHoverMixin,
-            focusedMixin,
             "flex gap-2",
             "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
             {
-                "h-44": size === "medium",
-                "h-28": size === "small",
+                "h-44": size === "large",
+                "h-28": size === "medium",
                 "cursor-pointer": !disabled,
-                "hover:bg-field-hover dark:hover:bg-field-hover-dark": !isDragActive,
+                [fieldBackgroundHoverMixin]: !isDragActive,
                 "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
                 "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": isDragAccept,
-            })}
-    >
+            })}>
 
         <Typography variant={"caption"} color={"secondary"} className={"absolute top-2 left-3.5 cursor-inherit"}>
             {title}
@@ -91,7 +89,8 @@ export function FileUpload({
         <div
             className="flex-grow h-28 box-border flex flex-col items-center justify-center text-center">
             <Typography align={"center"}
-                        variant={"label"}>
+                        variant={"label"}
+                        className={"flex flex-row gap-2 justify-center"}>
                 {uploadDescription}
             </Typography>
         </div>

package/src/components/IconButton.tsx

@@ -1,6 +1,6 @@
+"use client";
 import React from "react";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type IconButtonProps<C extends React.ElementType> =
     Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick">
@@ -14,11 +14,9 @@ export type IconButtonProps<C extends React.ElementType> =
     onClick?: React.MouseEventHandler<any>
 }
 
-const buttonClasses =
-    "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-gray-300";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+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-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-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",
@@ -42,15 +40,14 @@ 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-gray-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 dark:bg-surface-950 dark:bg-opacity-50";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component
             type="button"
             ref={ref}
             {...props}
-            className={cn(
-                focusedMixin,
+            className={cls(
                 disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
                 toggled ? "outline outline-2 outline-primary" : "",
                 colorClasses,
@@ -65,6 +62,5 @@ const IconButtonInner = <C extends React.ElementType = "button">({
         </Component>
     );
 };
-// React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<C>>
 
 export const IconButton = React.forwardRef(IconButtonInner as React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<any>>) as React.ComponentType<IconButtonProps<any>>;

package/src/components/InfoLabel.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 const colorClasses = {
     info: "bg-sky-200 dark:bg-teal-900",
@@ -16,7 +16,7 @@ export function InfoLabel({
 
     return (
         <div
-            className={cn("my-3 py-2 px-4 rounded", colorClasses[mode])}>
+            className={cls("my-3 py-2 px-4 rounded", colorClasses[mode])}>
             {children}
         </div>
     )

package/src/components/InputLabel.tsx

@@ -1,5 +1,7 @@
+"use client";
 import * as React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
+import { defaultBorderMixin } from "../styles";
 
 export type InputLabelProps = {
     children?: React.ReactNode;
@@ -7,6 +9,12 @@ export type InputLabelProps = {
     shrink?: boolean;
 } & React.LabelHTMLAttributes<HTMLLabelElement>;
 
+const defaultClasses = {
+    root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
+    shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
+    expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
+};
+
 export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(function InputLabel(inProps, ref) {
     const {
         shrink,
@@ -14,13 +22,7 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
         ...other
     } = inProps;
 
-    const defaultClasses = {
-        root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
-        shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
-        expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
-    };
-
-    const computedClassName = cn(defaultClasses.root,
+    const computedClassName = cls(defaultClasses.root,
         {
             [defaultClasses.shrink]: shrink,
             [defaultClasses.expanded]: !shrink
@@ -28,9 +30,10 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
 
     return (
         <label
+            className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                defaultBorderMixin, computedClassName)}
             data-shrink={shrink}
             ref={ref}
-            className={computedClassName}
             {...other}
         />
     );

package/src/components/Label.tsx

@@ -1,15 +1,29 @@
+"use client";
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
-import { cn } from "../util";
+import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
 
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    border?: boolean,
+    onClick?: React.MouseEventHandler<HTMLLabelElement>
+};
 const Label = React.forwardRef<
     React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
+    LabelProps
+>(({
+       className,
+       border,
+       onClick,
+       ...props
+   }, ref) => (
     <LabelPrimitive.Root
         ref={ref}
-        className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", defaultBorderMixin, className)}
+        onClick={onClick}
+        className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            border && "border border-surface-300 dark:border-surface-700 rounded-md px-3 py-1.5",
+            onClick && "hover:cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-800",
+            defaultBorderMixin, className)}
         {...props}
     />
 ))

package/src/components/Markdown.tsx

@@ -1,9 +1,10 @@
+"use client";
 import React, { useMemo } from "react";
 import equal from "react-fast-compare"
 
 // @ts-ignore
 import MarkdownIt from "markdown-it";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface MarkdownProps {
     source: string,
@@ -12,8 +13,8 @@ export interface MarkdownProps {
 }
 
 const proseClasses = {
-    small: "prose-sm",
-    medium: "prose",
+    small: "prose-sm typography-body2",
+    medium: "prose typography-body1",
     large: "prose-lg",
     xl: "prose-xl",
     "2xl": "prose-2xl"
@@ -33,7 +34,7 @@ export const Markdown = React.memo<MarkdownProps>(function Markdown({
         }, [source]);
 
         return <div
-            className={cn(proseClasses[size], "dark:prose-invert prose-headings:font-title", className)}
+            className={cls(proseClasses[size], "dark:prose-invert prose-headings:font-title", className)}
             dangerouslySetInnerHTML={{ __html: html }}
         />;
     }

package/src/components/Menu.tsx

@@ -1,7 +1,8 @@
+"use client";
 import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { focusedMixin, paperMixin } from "../styles";
-import { cn } from "../util";
+import { focusedDisabled, paperMixin } from "../styles";
+import { cls } from "../util";
 
 export type MenuProps = {
     children: React.ReactNode;
@@ -12,49 +13,76 @@ export type MenuProps = {
     onOpenChange?(open: boolean): void;
 
     portalContainer?: HTMLElement | null;
-}
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
 
-export function Menu({
-                         children,
-                         trigger,
-                         open,
-                         defaultOpen,
-                         onOpenChange,
-                         portalContainer
-                     }: MenuProps) {
-    return (
-        <DropdownMenu.Root
-            open={open}
-            defaultOpen={defaultOpen}
-            onOpenChange={onOpenChange}>
-            <DropdownMenu.Trigger asChild>
-                {trigger}
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal container={portalContainer}>
-                <DropdownMenu.Content className={cn(paperMixin, "shadow py-2 z-30")}>
-                    {children}
-                </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-    );
+    sideOffset?: number;
+    className?: string;
 }
 
+const Menu = React.forwardRef<
+    React.ElementRef<typeof DropdownMenu.Trigger>,
+    MenuProps
+>(({
+       children,
+       trigger,
+       open,
+       defaultOpen,
+       side,
+       align,
+       onOpenChange,
+       portalContainer,
+       sideOffset = 4,
+                                    className
+   }, ref) => (
+    <DropdownMenu.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}>
+        <DropdownMenu.Trigger
+            ref={ref}
+            asChild>
+            {trigger}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal container={portalContainer}>
+            <DropdownMenu.Content
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                className={cls(paperMixin, focusedDisabled, "shadow py-2 z-30", className)}>
+                {children}
+            </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+))
+Menu.displayName = "Menu"
+
+export { Menu }
+
 export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
     onClick?: (event: React.MouseEvent) => void;
-}
+    className?: string;
+};
 
 export function MenuItem({
                              children,
-                             dense,
-                             onClick
+                             dense = false, // Default value is false if not provided
+                             onClick,
+                             className
                          }: MenuItemProps) {
+    // Dynamically adjusting the class based on the "dense" prop
+    const classNames = cls(
+        onClick && "cursor-pointer",
+        "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4",
+        dense ? "px-3 py-1.5" : "px-4 py-2",
+        className
+    );
+
     return (
         <DropdownMenu.Item
-            className={cn(focusedMixin,
-                onClick && "cursor-pointer",
-                "rounded-md px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center gap-4")}
+            className={classNames}
             onClick={onClick}>
             {children}
         </DropdownMenu.Item>