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

package/src/components/TextareaAutosize.tsx

@@ -1,7 +1,8 @@
+"use client";
 import * as React from "react";
 import { useLayoutEffect } from "react";
 import * as ReactDOM from "react-dom";
-import { cn, debounce } from "../util";
+import { cls, debounce } from "../util";
 
 type State = {
     outerHeightStyle: number;
@@ -276,7 +277,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
             />
             <textarea
                 aria-hidden
-                className={cn(props.className, props.shadowClassName)}
+                className={cls(props.className, props.shadowClassName)}
                 readOnly
                 ref={shadowRef}
                 tabIndex={-1}
@@ -288,7 +289,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
             />
         </React.Fragment>
     );
-});
+}) as React.FC<TextareaAutosizeProps & { ref?: React.ForwardedRef<Element> }>;
 
 export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
 

package/src/components/Tooltip.tsx

@@ -1,34 +1,44 @@
+"use client";
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type TooltipProps = {
     open?: boolean,
+    defaultOpen?: boolean,
     onOpenChange?: (open: boolean) => void,
     side?: "top" | "bottom" | "left" | "right",
     align?: "start" | "center" | "end",
     sideOffset?: number,
     title?: string | React.ReactNode,
     delayDuration?: number;
-    className?: string,
+    asChild?: boolean;
     tooltipClassName?: string,
+    tooltipStyle?: React.CSSProperties;
     children: React.ReactNode,
+    className?: string,
+    container?: HTMLElement,
     style?: React.CSSProperties;
 };
 
 export const Tooltip = ({
                             open,
+                            defaultOpen,
                             side = "bottom",
-                            delayDuration = 250,
+                            delayDuration = 200,
                             sideOffset,
                             align,
                             onOpenChange,
                             title,
-                            className,
-                            style,
                             tooltipClassName,
-                            children
+                            tooltipStyle,
+                            children,
+                            asChild = false,
+                            container,
+                            className,
+                            style
                         }: TooltipProps) => {
 
     useInjectStyles("Tooltip", styles);
@@ -36,25 +46,32 @@ export const Tooltip = ({
     if (!title)
         return <>{children}</>;
 
+    const trigger = asChild
+        ? <TooltipPrimitive.Trigger asChild={true}>
+            {children}
+        </TooltipPrimitive.Trigger>
+        : <TooltipPrimitive.Trigger asChild={true}>
+            <div style={style} className={className}>
+                {children}
+            </div>
+        </TooltipPrimitive.Trigger>;
+
     return (
         <TooltipPrimitive.Provider delayDuration={delayDuration}>
-            <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
-                <TooltipPrimitive.Trigger asChild>
-                    <div className={className} style={style}>
-                        {children}
-                    </div>
-                </TooltipPrimitive.Trigger>
-                <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
+                {trigger}
+                <TooltipPrimitive.Portal container={container}>
                     <TooltipPrimitive.Content
-                        className={cn("TooltipContent",
+                        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",
+                            "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",
                             tooltipClassName)}
+                        style={tooltipStyle}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}
                         align={align}
                         side={side}>
                         {title}
-                        {/*<TooltipPrimitive.Arrow className="fill-slate-600"/>*/}
+                        {/*<TooltipPrimitive.Arrow className="fill-surface-accent-600"/>*/}
                     </TooltipPrimitive.Content>
                 </TooltipPrimitive.Portal>
             </TooltipPrimitive.Root>

package/src/components/Typography.tsx

@@ -1,8 +1,8 @@
 import React, { ReactEventHandler } from "react";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+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;
@@ -10,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",
@@ -43,24 +43,41 @@ const colorToClasses = {
     error: "text-red-600 dark:text-red-500"
 };
 
+const gutterBottomClasses = {
+    h1: "mb-5",
+    h2: "mb-4",
+    h3: "mb-4",
+    h4: "mb-4",
+    h5: "mb-3",
+    h6: "mb-3",
+    subtitle1: "mb-3",
+    subtitle2: "mb-3",
+    body1: "mb-3",
+    body2: "mb-3",
+    inherit: "mb-3",
+    caption: "mb-2",
+    button: "mb-2",
+    label: "mb-2"
+};
+
 const variantToClasses = {
-    h1: "text-6xl font-headers font-light",
-    h2: "text-5xl font-headers font-light",
-    h3: "text-4xl font-headers font-normal",
-    h4: "text-3xl font-headers font-normal",
-    h5: "text-2xl font-headers font-normal",
-    h6: "text-xl font-headers font-medium",
-    subtitle1: "text-lg font-headers font-medium",
-    subtitle2: "text-base font-headers font-medium",
-    body1: "text-base",
-    body2: "text-sm",
-    label: "text-sm font-medium text-slate-500",
-    inherit: "text-inherit",
-    caption: "text-xs",
-    button: "text-sm font-medium"
+    h1: "typography-h1",
+    h2: "typography-h2",
+    h3: "typography-h3",
+    h4: "typography-h4",
+    h5: "typography-h5",
+    h6: "typography-h6",
+    subtitle1: "typography-subtitle1",
+    subtitle2: "typography-subtitle2",
+    body1: "typography-body1",
+    body2: "typography-body2",
+    label: "typography-label",
+    inherit: "typography-inherit",
+    caption: "typography-caption",
+    button: "typography-button"
 };
 
-export function Typography<C extends React.ElementType>(
+export function Typography<C extends React.ElementType = "span">(
     {
         align = "inherit",
         color = "primary",
@@ -71,23 +88,22 @@ 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 = cn(
-        focusedMixin,
+    const classes = cls(
         variantToClasses[variant],
         color ? colorToClasses[color] : "",
         align !== "inherit" && `text-${align}`,
-        gutterBottom && "mb-[0.35em]",
+        gutterBottom && gutterBottomClasses[variant],
         noWrap && "truncate",
         paragraph && "mb-3",
         className

package/src/components/common/SelectInputLabel.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { cn } from "../../util";
+import { cls } from "../../util";
 
 export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
-    return <div className={cn("text-sm  font-medium ml-3.5 mb-1",
-        error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300",)}>
+    return <div className={cls("text-sm  font-medium ml-3.5 mb-1",
+        error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300",)}>
         {children}
     </div>;
 }

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";
@@ -24,14 +25,15 @@ export * from "./Label";
 export * from "./LoadingButton";
 export * from "./Markdown";
 export * from "./Menu";
+export * from "./Menubar";
 export * from "./MultiSelect";
 export * from "./Paper";
 export * from "./RadioGroup";
 export * from "./SearchBar";
 export * from "./Select";
 export * from "./Separator";
+export * from "./Slider";
 export * from "./Sheet";
-export * from "./Spinner";
 export * from "./TextareaAutosize";
 export * from "./TextField";
 export * from "./Tooltip";

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./useInjectStyles";
+export * from "./useOutsideAlerter";
+export * from "./useDebounceValue";

package/src/{util → hooks}/useDebounceValue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export function useDebounceValue<T>(value: T, delay = 300): T {

package/src/{util → hooks}/useInjectStyles.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 
 /**

package/src/{util → hooks}/useOutsideAlerter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, useEffect } from "react";
 
 /**

package/src/icons/Icon.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import * as React from "react";
-import "@material-design-icons/font/filled.css";
-import { cn } from "../util";
+import { cls } from "../util";
+import "material-icons/iconfont/filled.css";
 
 export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
 export type IconProps = {
@@ -8,7 +10,7 @@ export type IconProps = {
     color?: IconColor,
     className?: string,
     onClick?: (e: React.SyntheticEvent) => void,
-    style?: React.CSSProperties
+    style?: React.CSSProperties,
 }
 
 const colorClassesMapping: Record<IconColor, string> = {
@@ -17,47 +19,50 @@ const colorClassesMapping: Record<IconColor, string> = {
     success: "text-green-500",
     warning: "text-yellow-500",
     secondary: "text-secondary",
-    disabled: "text-disabled dark:text-disabled-dark",
+    disabled: "text-text-disabled dark:text-text-disabled-dark",
     error: "text-red-500"
 }
 
-export function Icon({
-                         iconKey,
-                         size = "medium",
-                         color,
-                         className,
-                         onClick,
-                         style
-                     }: IconProps & { iconKey: string }) {
-    let sizeInPx: number;
-    switch (size) {
-        case "smallest":
-            sizeInPx = 16;
-            break;
-        case "small":
-            sizeInPx = 20;
-            break;
-        case "medium":
-            sizeInPx = 24;
-            break;
-        case "large":
-            sizeInPx = 28;
-            break
-        default:
-            sizeInPx = size;
-    }
-    if (!sizeInPx) sizeInPx = 24;
+export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: string }>(
+    ({
+         iconKey,
+         size = "medium",
+         color,
+         className,
+         onClick,
+         style
+     }, ref) => {
+        let sizeInPx: number;
+        switch (size) {
+            case "smallest":
+                sizeInPx = 16;
+                break;
+            case "small":
+                sizeInPx = 20;
+                break;
+            case "medium":
+                sizeInPx = 24;
+                break;
+            case "large":
+                sizeInPx = 28;
+                break
+            default:
+                sizeInPx = typeof size === "number" ? size : 24;
+        }
 
-    return <span
-        style={{
-            fontSize: `${sizeInPx}px`,
-            display: "block",
-            ...style
-        }}
-        className={
-            cn("material-icons",
-                color ? colorClassesMapping[color] : "",
-                "select-none",
-                className)}
-        onClick={onClick}>{iconKey}</span>
-}
+        return <span
+            ref={ref} // Attach the ref to the span
+            style={{
+                fontSize: `${sizeInPx}px`,
+                display: "block",
+                ...style
+            }}
+            className={
+                cls("material-icons",
+                    color ? colorClassesMapping[color] : "",
+                    "select-none",
+                    className)}
+            onClick={onClick}>{iconKey}</span>
+    });
+
+Icon.displayName = "Icon";