@firecms/ui 3.0.0-canary.132 → 3.0.0-canary.134

package/dist/styles.d.ts

@@ -5,8 +5,8 @@ export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-
 export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
 export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
 export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
-export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
-export declare const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
+export declare const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+export declare const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-50 m-1 -p-1";
 export declare const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
 export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-canary.132",
+  "version": "3.0.0-canary.134",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -61,12 +61,15 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
+    "markdown-it": "^14.1.0",
     "material-icons": "^1.13.12",
     "react-datepicker": "^7.4.0",
     "react-dropzone": "^14.2.9",
@@ -105,7 +108,7 @@
     "src",
     "tailwind.config.js"
   ],
-  "gitHead": "ac705ba505f199642dde8c2598ad8341b224033f",
+  "gitHead": "7cb5af44caa66defa18013655b4b9789661b69e0",
   "publishConfig": {
     "access": "public"
   }

package/src/components/DialogTitle.tsx

@@ -0,0 +1,34 @@
+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";
+
+export type DialogContentProps = TypographyProps & {
+    children: React.ReactNode,
+    hidden?: boolean,
+    className?: string,
+    variant?: TypographyVariant
+};
+
+export function DialogTitle({
+                                children,
+                                hidden,
+                                className,
+                                variant = "h4",
+                                ...props
+                            }: DialogContentProps) {
+
+    const title = <DialogPrimitive.Title asChild>
+        <Typography variant={variant}
+                    className={className}
+                    {...props}>
+            {children}
+        </Typography>
+    </DialogPrimitive.Title>;
+
+    if (hidden) {
+        return <VisuallyHidden.Root>{title}</VisuallyHidden.Root>
+    }
+
+    return title;
+}

package/src/components/ExpandablePanel.tsx

@@ -15,7 +15,8 @@ export function ExpandablePanel({
                                     initiallyExpanded = true,
                                     titleClassName,
                                     asField,
-                                    className
+                                    className,
+                                    innerClassName
                                 }: PropsWithChildren<{
     title: React.ReactNode,
     invisible?: boolean,
@@ -24,7 +25,8 @@ export function ExpandablePanel({
     onExpandedChange?: (expanded: boolean) => void,
     titleClassName?: string,
     asField?: boolean,
-    className?: string
+    className?: string,
+    innerClassName?: string
 }>) {
 
     useInjectStyles("ExpandablePanel", `
@@ -79,7 +81,8 @@ export function ExpandablePanel({
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
                     "rounded-md",
-                    "w-full"
+                    "w-full",
+                    className
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {
@@ -89,8 +92,8 @@ export function ExpandablePanel({
 
                 <Collapsible.Trigger
                     className={cls(
-                        "rounded flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
+                        "rounded-t flex items-center justify-between w-full min-h-[52px]",
+                        "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,
@@ -107,7 +110,7 @@ export function ExpandablePanel({
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}
                 >
-                    <div className={className}>
+                    <div className={innerClassName}>
                         {children}
                     </div>
                 </Collapsible.Content>

package/src/components/Sheet.tsx

@@ -7,6 +7,7 @@ interface SheetProps {
     children: React.ReactNode;
     open: boolean;
     title?: string;
+    modal?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     darkBackground?: boolean;
     transparent?: boolean;
@@ -19,6 +20,7 @@ export const Sheet: React.FC<SheetProps> = ({
                                                 children,
                                                 side = "right",
                                                 title,
+                                                modal = true,
                                                 open,
                                                 onOpenChange,
                                                 transparent,
@@ -51,12 +53,13 @@ export const Sheet: React.FC<SheetProps> = ({
 
     return (
         <DialogPrimitive.Root open={displayed || open}
+                              modal={modal}
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
                 <DialogPrimitive.Title autoFocus tabIndex={0}>
                     {title ?? "Sheet"}
                 </DialogPrimitive.Title>
-                <DialogPrimitive.Overlay
+                {modal && <DialogPrimitive.Overlay
                     className={cls(
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
                         "bg-black bg-opacity-50",
@@ -68,7 +71,7 @@ export const Sheet: React.FC<SheetProps> = ({
                         pointerEvents: displayed ? "auto" : "none"
                     }}
                     onClick={() => onOpenChange && onOpenChange(false)}
-                />
+                />}
                 <DialogPrimitive.Content
                     {...props}
                     onFocusCapture={(event) => event.preventDefault()}

package/src/components/Slider.tsx

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

package/src/components/Typography.tsx

@@ -1,7 +1,8 @@
 import React, { ReactEventHandler } from "react";
 import { cls } from "../util";
 
-export type TextProps<C extends React.ElementType> = {
+export type TypographyVariant = keyof typeof typographyVariants;
+export type TypographyProps<C extends React.ElementType = "span"> = {
     align?: "center" | "inherit" | "justify" | "left" | "right";
     children?: React.ReactNode;
     className?: string;
@@ -9,14 +10,14 @@ export type TextProps<C extends React.ElementType> = {
     gutterBottom?: boolean;
     noWrap?: boolean;
     paragraph?: boolean;
-    variant?: keyof typeof defaultVariantMapping;
+    variant?: TypographyVariant;
     variantMapping?: { [key: string]: string };
     color?: "inherit" | "initial" | "primary" | "secondary" | "disabled" | "error";
     onClick?: ReactEventHandler<HTMLElement>;
     style?: React.CSSProperties;
 } & React.ComponentPropsWithoutRef<C>;
 
-const defaultVariantMapping = {
+const typographyVariants = {
     h1: "h1",
     h2: "h2",
     h3: "h3",
@@ -76,7 +77,7 @@ const variantToClasses = {
     button: "typography-button"
 };
 
-export function Typography<C extends React.ElementType>(
+export function Typography<C extends React.ElementType = "span">(
     {
         align = "inherit",
         color = "primary",
@@ -87,15 +88,15 @@ export function Typography<C extends React.ElementType>(
         noWrap = false,
         paragraph = false,
         variant = "body1",
-        variantMapping = defaultVariantMapping,
+        variantMapping = typographyVariants,
         style,
         onClick,
         ...other
-    }: TextProps<C>
+    }: TypographyProps<C>
 ) {
     const Component =
         component ||
-        (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) ||
+        (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) ||
         "span";
 
     const classes = cls(

package/src/components/index.tsx

@@ -15,6 +15,7 @@ export * from "./DateTimeField";
 export * from "./Dialog";
 export * from "./DialogActions";
 export * from "./DialogContent";
+export * from "./DialogTitle";
 export * from "./ExpandablePanel";
 export * from "./FileUpload";
 export * from "./IconButton";
@@ -31,6 +32,7 @@ export * from "./RadioGroup";
 export * from "./SearchBar";
 export * from "./Select";
 export * from "./Separator";
+export * from "./Slider";
 export * from "./Sheet";
 export * from "./TextareaAutosize";
 export * from "./TextField";

package/src/styles.ts

@@ -5,8 +5,8 @@ export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800
 export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
 export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
 export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
-export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
-export const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
+export const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+export const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-50 m-1 -p-1";
 export const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
 export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";