@firecms/ui 3.0.0-canary.9 → 3.0.0-canary.91

package/src/components/Container.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardRefRenderFunction } from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ContainerProps = {
     children: React.ReactNode;
@@ -37,7 +37,7 @@ const ContainerInner: ForwardRefRenderFunction<HTMLDivElement, ContainerProps> =
     return (
         <div
             ref={ref}
-            className={cn("mx-auto px-3 md:px-4 lg-px-6",
+            className={cls("mx-auto px-3 md:px-4 lg-px-6",
                 classForMaxWidth,
                 className)}
             style={style}>

package/src/components/DateTimeField.tsx

@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-// @ts-ignore
 import DatePicker from "react-datepicker";
 
 import { CalendarMonthIcon, ClearIcon, ErrorIcon } from "../icons";
@@ -12,23 +11,24 @@ import {
     paperMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn, useInjectStyles } from "../util";
 import { Typography } from "./Typography";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 interface DateTimeFieldProps {
     value?: Date;
-    onChange: (date: Date | null) => void;
+    onChange?: (date: Date | null) => void;
+
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size: "small" | "medium";
+    size?: "small" | "medium";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
-    preventOpenOnFocus?: boolean;
     locale?: string;
 }
 
@@ -40,11 +40,10 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                                                                 clearable,
                                                                 mode = "date",
                                                                 error,
-                                                                size,
+                                                                size = "medium",
                                                                 className,
                                                                 style,
                                                                 inputClassName,
-                                                                preventOpenOnFocus,
                                                                 invisible,
                                                                 locale
                                                             }) => {
@@ -60,14 +59,14 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
     const handleClear = (e: React.MouseEvent) => {
         e.preventDefault();
-        onChange(null);
+        onChange?.(null);
     }
 
     return (
         <>
 
             <div
-                className={cn(
+                className={cls(
                     "rounded-md relative max-w-full",
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -80,7 +79,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
                 {label && (
                     <InputLabel
-                        className={cn("absolute top-1 pointer-events-none",
+                        className={cls("absolute top-1 pointer-events-none",
                             !error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-500",
                             disabled ? "opacity-50" : "")}
                         shrink={hasValue || focused}
@@ -95,8 +94,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     selected={(invalidValue ? null : value) ?? null}
                     onChange={onChange}
                     disabled={false}
-                    popperClassName={cn(paperMixin, "my-4 shadow")}
-                    onClick={(e: any) => e.stopPropagation()}
+                    popperClassName={cls(paperMixin, "my-4 shadow")}
                     onFocus={() => setFocused(true)}
                     onBlur={() => setFocused(false)}
                     showTimeSelect={mode === "date_time"}
@@ -105,7 +103,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     timeCaption="time"
                     dateFormat={mode === "date_time" ? "Pp" : "P"}
                     preventOpenOnFocus={true}
-                    className={cn(
+                    className={cls(
                         "w-full outline-none bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
                         "rounded-md",
@@ -117,7 +115,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     )}
                 />
 
-
                 <IconButton
                     onClick={() => {
                         // @ts-ignore
@@ -527,7 +524,7 @@ const datePickerCss = `
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
   border-radius: 100%;
-  background-color: #5193f6;
+  background-color: #186ef0;
   color: #fff;
 }
 .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
@@ -540,22 +537,22 @@ const datePickerCss = `
 .react-datepicker__year-text--selected:hover,
 .react-datepicker__year-text--in-selecting-range:hover,
 .react-datepicker__year-text--in-range:hover {
-  background-color: #186ef0;
-}
-.react-datepicker__day--keyboard-selected,
-.react-datepicker__month-text--keyboard-selected,
-.react-datepicker__quarter-text--keyboard-selected,
-.react-datepicker__year-text--keyboard-selected {
-  border-radius: 100%;
-  background-color: #cee2ff;
-  color: rgb(0, 0, 0);
-}
-.react-datepicker__day--keyboard-selected:hover,
-.react-datepicker__month-text--keyboard-selected:hover,
-.react-datepicker__quarter-text--keyboard-selected:hover,
-.react-datepicker__year-text--keyboard-selected:hover {
-  background-color: #186ef0;
-}
+  background-color: #5698f9;
+}
+// .react-datepicker__day--keyboard-selected,
+// .react-datepicker__month-text--keyboard-selected,
+// .react-datepicker__quarter-text--keyboard-selected,
+// .react-datepicker__year-text--keyboard-selected {
+//   border-radius: 100%;
+//   background-color: #5193f6;
+//   color: rgb(0, 0, 0);
+// }
+// .react-datepicker__day--keyboard-selected:hover,
+// .react-datepicker__month-text--keyboard-selected:hover,
+// .react-datepicker__quarter-text--keyboard-selected:hover,
+// .react-datepicker__year-text--keyboard-selected:hover {
+//   background-color: #5193f6;
+// }
 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
 .react-datepicker__month-text--in-range,
 .react-datepicker__quarter-text--in-range,
@@ -838,7 +835,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__month-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__month-year-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__navigation-icon::before {
-  border-color: #333;
+  border-color: #999;
 }
 
 
@@ -912,7 +909,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__year-text--selected:hover,
 :is([data-theme="dark"]) .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover
  {
-  background-color: #1a1a1a;
+  background-color: #262626;
 }
 
 :is([data-theme="dark"]) .react-datepicker__day--selected,
@@ -930,12 +927,12 @@ const datePickerCss = `
   background-color: #0e528f;
 }
 
-:is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
-  background-color: #0e529f;
-}
+// :is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
+//   background-color: #0e529f;
+// }
 
 :is([data-theme="dark"]) .react-datepicker__today-button {
   background-color: #262626;

package/src/components/Dialog.tsx

@@ -1,7 +1,7 @@
 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;
@@ -69,7 +69,7 @@ export const Dialog = ({
                 <div className={"fixed inset-0 z-30"}>
 
                     <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"
                         )}
@@ -80,10 +80,10 @@ export const Dialog = ({
 
                     <DialogPrimitive.Content
                         onOpenAutoFocus={onOpenAutoFocus}
-                        className={cn("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
+                        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",

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,7 +15,7 @@ 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,

package/src/components/DialogContent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function DialogContent({
                                   children,
@@ -17,7 +17,7 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cn("py-6 px-6 h-full flex-grow", className)}>
+        className={cls("py-6 px-6 h-full flex-grow", className)}>
         {children}
     </div>;
 }

package/src/components/ExpandablePanel.tsx

@@ -3,7 +3,8 @@ 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 { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export function ExpandablePanel({
                                     title,
@@ -75,9 +76,10 @@ export function ExpandablePanel({
 
     return (<>
             <Collapsible.Root
-                className={cn(
+                className={cls(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md"
+                    "rounded-md",
+                    "w-full"
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {
@@ -86,7 +88,7 @@ export function ExpandablePanel({
                 }}>
 
                 <Collapsible.Trigger
-                    className={cn(focusedMixin,
+                    className={cls(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",
                         invisible ? "border-b px-2" : "p-4",
@@ -96,11 +98,11 @@ export function ExpandablePanel({
                     )}
                 >
                     {title}
-                    <ExpandMoreIcon className={cn("transition", open ? "rotate-180" : "")}/>
+                    <ExpandMoreIcon className={cls("transition", open ? "rotate-180" : "")}/>
                 </Collapsible.Trigger>
 
                 <Collapsible.Content
-                    className={cn("CollapsibleContent")}
+                    className={cls("CollapsibleContent")}
                     style={{
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}

package/src/components/FileUpload.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDropzone } from "react-dropzone";
 import { fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 import { Typography } from "./Typography";
 
 export interface FileUploadError {
@@ -38,7 +38,7 @@ export function FileUpload({
                                disabled,
                                maxFiles,
                                title,
-                               uploadDescription = "Drag and drop a file here or click",
+                               uploadDescription,
                                children,
                                preventDropOnDocument = true,
                                size
@@ -63,9 +63,8 @@ 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",
@@ -73,11 +72,10 @@ export function FileUpload({
                 "h-44": size === "medium",
                 "h-28": size === "small",
                 "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}

package/src/components/IconButton.tsx

@@ -1,6 +1,6 @@
 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">
@@ -42,14 +42,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-slate-200 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-50";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component
             type="button"
             ref={ref}
             {...props}
-            className={cn(
+            className={cls(
                 focusedMixin,
                 disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
                 toggled ? "outline outline-2 outline-primary" : "",

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,6 @@
 import * as React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
+import { Label } from "./Label";
 
 export type InputLabelProps = {
     children?: React.ReactNode;
@@ -7,6 +8,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,20 +21,14 @@ 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
         }, className);
 
     return (
-        <label
+        <Label
             data-shrink={shrink}
             ref={ref}
             className={computedClassName}

package/src/components/Label.tsx

@@ -1,15 +1,28 @@
 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-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
+            onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
+            defaultBorderMixin, className)}
         {...props}
     />
 ))

package/src/components/Markdown.tsx

@@ -3,26 +3,37 @@ import equal from "react-fast-compare"
 
 // @ts-ignore
 import MarkdownIt from "markdown-it";
+import { cls } from "../util";
 
 export interface MarkdownProps {
     source: string,
+    size?: "small" | "medium" | "large" | "xl" | "2xl";
     className?: string
 }
 
-const md = new MarkdownIt({ html: true, });
+const proseClasses = {
+    small: "prose-sm text-sm",
+    medium: "prose text-base",
+    large: "prose-lg",
+    xl: "prose-xl",
+    "2xl": "prose-2xl"
+};
+
+const md = new MarkdownIt({ html: true });
 /**
  * @group Preview components
  */
 export const Markdown = React.memo<MarkdownProps>(function Markdown({
                                                                         source,
-                                                                        className
+                                                                        className,
+                                                                        size = "medium"
                                                                     }: MarkdownProps) {
         const html = useMemo(() => {
             return md.render(typeof source === "string" ? source : "");
         }, [source]);
 
         return <div
-            className={className}
+            className={cls(proseClasses[size], "dark:prose-invert prose-headings:font-title", className)}
             dangerouslySetInnerHTML={{ __html: html }}
         />;
     }

package/src/components/Menu.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { focusedMixin, paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type MenuProps = {
     children: React.ReactNode;
@@ -31,7 +31,7 @@ export function Menu({
                 {trigger}
             </DropdownMenu.Trigger>
             <DropdownMenu.Portal container={portalContainer}>
-                <DropdownMenu.Content className={cn(paperMixin, "shadow py-2 z-30")}>
+                <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
                     {children}
                 </DropdownMenu.Content>
             </DropdownMenu.Portal>
@@ -43,18 +43,24 @@ export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
     onClick?: (event: React.MouseEvent) => void;
-}
+};
 
 export function MenuItem({
                              children,
-                             dense,
+                             dense = false, // Default value is false if not provided
                              onClick
                          }: MenuItemProps) {
+    // Dynamically adjusting the class based on the "dense" prop
+    const classNames = cls(
+        focusedMixin,
+        onClick && "cursor-pointer",
+        "rounded-md 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",
+        dense ? "px-3 py-1.5" : "px-4 py-2"
+    );
+
     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>