@firecms/ui 3.0.0-canary.11 → 3.0.0-canary.111

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 { paperMixin } from "../styles";
+import { cls } from "../util";
 
 export type MenuProps = {
     children: React.ReactNode;
@@ -14,47 +14,58 @@ export type MenuProps = {
     portalContainer?: HTMLElement | null;
 }
 
-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>
-    );
-}
+const Menu = React.forwardRef<
+    React.ElementRef<typeof DropdownMenu.Trigger>,
+    MenuProps
+>(({
+       children,
+       trigger,
+       open,
+       defaultOpen,
+       onOpenChange,
+       portalContainer
+   }, ref) => (
+    <DropdownMenu.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}>
+        <DropdownMenu.Trigger
+            ref={ref}
+            asChild>
+            {trigger}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal container={portalContainer}>
+            <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
+                {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;
-}
+};
 
 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(
+        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>

package/src/components/Menubar.tsx

@@ -0,0 +1,322 @@
+import * as React from "react";
+
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { cls } from "../util";
+import { CheckIcon, ChevronRightIcon } from "../icons";
+
+export function Menubar({
+                            children,
+                            onSelect,
+                            className
+                        }: {
+    children: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    className?: string
+}) {
+    return (
+        <MenubarPrimitive.Root
+            onSelect={onSelect}
+            className={cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
+            {children}
+        </MenubarPrimitive.Root>
+    )
+}
+
+export function MenubarMenu({
+                                children,
+                            }: { children: React.ReactNode }) {
+    return (
+        <MenubarPrimitive.Menu>
+            {children}
+        </MenubarPrimitive.Menu>
+    )
+}
+
+export function MenubarTrigger({
+                                   children,
+                                   onSelect,
+                                   className
+                               }: {
+    children: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    className?: string
+}) {
+    return (
+        <MenubarPrimitive.Trigger
+            onSelect={onSelect}
+            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50",
+                className)}>
+            {children}
+        </MenubarPrimitive.Trigger>
+    )
+}
+
+export function MenubarPortal({
+                                  children,
+                              }: { children: React.ReactNode }) {
+    return (
+        <MenubarPrimitive.Portal>
+            {children}
+        </MenubarPrimitive.Portal>
+    )
+}
+
+export function MenubarContent({
+                                   children,
+                                   className,
+                                   align,
+                                   sideOffset,
+                                   alignOffset,
+                                   onSelect,
+                                   ...rest
+                               }: {
+    children: React.ReactNode,
+    className?: string,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    align?: "start" | "center" | "end",
+    sideOffset?: number,
+    alignOffset?: number
+}) {
+    return (
+        <MenubarPrimitive.Content
+            onSelect={onSelect}
+            className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
+            align={align ?? "start"}
+            sideOffset={sideOffset ?? 5}
+            alignOffset={alignOffset ?? -3}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Content>
+    )
+}
+
+export function MenubarItem({
+                                children,
+                                leftPadding,
+                                className,
+                                disabled,
+                                onSelect,
+                                ...rest
+                            }: {
+    children: React.ReactNode,
+    onSelect?: (event: Event) => void;
+    leftPadding?: boolean,
+    className?: string,
+    disabled?: boolean
+}) {
+    return (
+        <MenubarPrimitive.Item
+            onSelect={onSelect}
+            className={cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+                leftPadding ? "pl-5" : "",
+                disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
+                className)}
+            disabled={disabled}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Item>
+    )
+}
+
+export function MenubarSeparator({
+                                     children,
+                                     className,
+                                     ...rest
+                                 }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.Separator
+            className={cls("h-[1px] bg-slate-100 dark:bg-gray-800 m-[5px]", className)}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Separator>
+    )
+}
+
+export function MenubarSub({
+                               children,
+                               ...rest
+                           }: {
+    children?: React.ReactNode,
+}) {
+    return (
+        <MenubarPrimitive.Sub
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Sub>
+    )
+}
+
+export function MenubarSubTrigger({
+                                      children,
+                                      className,
+                                      onSelect,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.SubTrigger
+            onSelect={onSelect}
+            className={cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+                className)}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.SubTrigger>
+    )
+}
+
+export function MenubarSubContent({
+                                      children,
+                                      alignOffset,
+                                      className,
+                                      onSelect,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    alignOffset?: number,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.SubContent
+            onSelect={onSelect}
+            alignOffset={alignOffset ?? -5}
+            className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
+                className)}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.SubContent>
+    )
+}
+
+export function MenubarCheckboxItem({
+                                        children,
+                                        checked,
+                                        onCheckedChange,
+                                        className,
+                                        onSelect,
+                                        ...rest
+                                    }: {
+    children?: React.ReactNode,
+    onSelect?: (event: Event) => void;
+    checked?: boolean,
+    onCheckedChange?: () => void,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.CheckboxItem
+            onSelect={onSelect}
+            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+                className)}
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.CheckboxItem>
+    )
+}
+
+export function MenubarItemIndicator({
+                                         children,
+                                         className,
+                                         ...rest
+                                     }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.ItemIndicator
+            className={cls("absolute left-0 w-4 inline-flex items-center justify-center", className)}
+            {...rest}>
+            {children ?? <CheckIcon size={"smallest"}/>}
+        </MenubarPrimitive.ItemIndicator>
+    )
+}
+
+export function MenubarRadioGroup({
+                                      children,
+                                      className,
+                                      value,
+                                      onValueChange,
+                                      onSelect,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    value?: string,
+    onValueChange?: (value: string) => void,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.RadioGroup
+            className={cls(className)}
+            value={value}
+            onValueChange={onValueChange}
+            onSelect={onSelect}
+            {...rest}>
+            {children ?? <CheckIcon size={"small"}/>}
+        </MenubarPrimitive.RadioGroup>
+    )
+}
+
+export function MenubarRadioItem({
+                                     children,
+                                     className,
+                                     value,
+                                     onSelect,
+                                     ...rest
+                                 }: {
+    children?: React.ReactNode,
+    onSelect?: (event: Event) => void;
+    value: string,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.RadioItem
+            onSelect={onSelect}
+            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+                className)}
+            value={value}
+            {...rest}>
+            {children ?? <CheckIcon size={"small"}/>}
+        </MenubarPrimitive.RadioItem>
+    )
+}
+
+export function MenubarShortcut({
+                                    children,
+                                    className,
+                                    ...rest
+                                }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <div
+            className={cls("ml-auto pl-5 group-data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark",
+                className)}
+            {...rest}>
+            {children}
+        </div>
+    )
+}
+
+export function MenubarSubTriggerIndicator() {
+    return (
+        <div className="ml-auto pl-5 ">
+            <ChevronRightIcon size={"small"}/>
+        </div>
+    )
+}

package/src/components/MultiSelect.tsx

@@ -5,9 +5,10 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 
 import { ExpandMoreIcon } from "../icons";
-import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn, useOutsideAlerter } from "../util";
+import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "../styles";
+import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
+import { useOutsideAlerter } from "../hooks";
 
 export type MultiSelectProps = {
     open?: boolean,
@@ -115,10 +116,10 @@ export function MultiSelect({
                                   inputRef.current?.focus();
                                   openDialog()
                               }}
-                              className={cn("relative overflow-visible bg-transparent", containerClassName)}>
+                              className={cls("relative overflow-visible bg-transparent", containerClassName)}>
                 <div
                     ref={containerRef}
-                    className={cn(
+                    className={cls(
                         "flex flex-row",
                         size === "small" ? "min-h-[42px]" : "min-h-[64px]",
                         "select-none rounded-md text-sm",
@@ -128,10 +129,9 @@ export function MultiSelect({
                         "p-4",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
-                        includeFocusOutline ? focusedMixin : "",
                         className)}
                 >
-                    <div className={cn("flex-grow flex gap-1.5 flex-wrap items-center")}>
+                    <div className={cls("flex-grow flex gap-1.5 flex-wrap items-center")}>
                         {renderValue && (value ?? []).map((v, i) => renderValue(v, i))}
                         {renderValues && renderValues(value ?? [])}
                         <CommandPrimitive.Input
@@ -145,7 +145,7 @@ export function MultiSelect({
                     </div>
                     <div className={"px-2 h-full flex items-center"}>
                         <ExpandMoreIcon size={"small"}
-                                        className={cn("transition ", openInternal ? "rotate-180" : "")}/>
+                                        className={cls("transition ", openInternal ? "rotate-180" : "")}/>
                     </div>
 
                 </div>
@@ -209,7 +209,7 @@ export function MultiSelectItem({ children, value, className }: MultiSelectItemP
             setInputValue("");
             onValueChangeInternal(value);
         }}
-        className={cn(
+        className={cls(
             (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
             "cursor-pointer",
             "m-1",

package/src/components/Paper.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function Paper({
                           children,
@@ -15,7 +15,7 @@ export function Paper({
 }) {
     return (
         <div
-            className={cn(paperMixin, className)}
+            className={cls(paperMixin, className)}
             style={style}>
             {children}
         </div>

package/src/components/Popover.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { paperMixin } from "../styles";
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -23,6 +24,7 @@ export interface PopoverProps {
     enabled?: boolean;
     modal?: boolean;
     className?: string;
+    portalContainer?: HTMLElement | null;
 }
 
 export function Popover({
@@ -40,6 +42,7 @@ export function Popover({
                             avoidCollisions,
                             enabled = true,
                             modal = false,
+                            portalContainer,
                             className
                         }: PopoverProps) {
 
@@ -50,22 +53,22 @@ export function Popover({
 
     return <PopoverPrimitive.Root open={open}
                                   onOpenChange={onOpenChange}
-                                  modal={modal}
-    >
+                                  modal={modal}>
         <PopoverPrimitive.Trigger asChild>
             {trigger}
         </PopoverPrimitive.Trigger>
-        <PopoverPrimitive.Portal>
-            <PopoverPrimitive.Content className={cn(paperMixin,
-                "PopoverContent shadow z-40", className)}
-                                      side={side}
-                                      sideOffset={sideOffset}
-                                      align={align}
-                                      alignOffset={alignOffset}
-                                      arrowPadding={arrowPadding}
-                                      sticky={sticky}
-                                      hideWhenDetached={hideWhenDetached}
-                                      avoidCollisions={avoidCollisions}>
+        <PopoverPrimitive.Portal container={portalContainer}>
+            <PopoverPrimitive.Content
+                className={cls(paperMixin,
+                    "PopoverContent shadow z-40", className)}
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                alignOffset={alignOffset}
+                arrowPadding={arrowPadding}
+                sticky={sticky}
+                hideWhenDetached={hideWhenDetached}
+                avoidCollisions={avoidCollisions}>
 
                 {children}
                 <PopoverPrimitive.Arrow className="fill-white dark:fill-slate-950"/>