@firecms/ui 3.0.0-canary.13 → 3.0.0-canary.130

package/src/components/Table.tsx

@@ -1,21 +1,24 @@
 import React, { useRef } from "react";
 import { defaultBorderMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TableProps = {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-};
+} & React.TableHTMLAttributes<HTMLTableElement>;
 
 export const Table = ({
                           children,
                           className,
-                          style
+                          style,
+                          ...rest
                       }: TableProps) => (
-    <table className={cn("w-full text-left text-gray-800 dark:text-white rounded-md overflow-x-auto",
-        className)}
-           style={style}>
+    <table
+        className={cls("text-left text-gray-800 dark:text-white rounded-md overflow-x-auto", className)}
+        style={style}
+        {...rest}
+    >
         {children}
     </table>
 );
@@ -23,13 +26,17 @@ export const Table = ({
 export type TableBodyProps = {
     children?: React.ReactNode;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLTableSectionElement>;
+
 export const TableBody = ({
                               children,
-                              className
+                              className,
+                              ...rest
                           }: TableBodyProps) => (
     <tbody
-        className={cn("bg-white text-sm dark:bg-gray-800 divide-y divide-slate-200 dark:divide-gray-700", className)}>
+        className={cls("bg-white dark:bg-gray-950 text-sm divide-y divide-gray-100 dark:divide-gray-800 dark:divide-opacity-80", className)}
+        {...rest}
+    >
     {children}
     </tbody>
 );
@@ -37,17 +44,22 @@ export const TableBody = ({
 export type TableHeaderProps = {
     children?: React.ReactNode;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLTableSectionElement>;
 
 export const TableHeader = ({
                                 children,
-                                className
+                                className,
+                                ...rest
                             }: TableHeaderProps) => (
-    <thead>
-    <tr className={cn(
-        defaultBorderMixin,
-        "text-sm font-medium text-gray-700 dark:text-slate-300",
-        "bg-slate-50 border-b dark:bg-gray-900", className)}>
+    <thead {...rest}>
+    <tr
+        className={cls(
+            defaultBorderMixin,
+            "text-sm font-medium text-gray-700 dark:text-slate-300",
+            "bg-slate-50 border-b dark:bg-gray-900",
+            className
+        )}
+    >
         {children}
     </tr>
     </thead>
@@ -58,22 +70,24 @@ export type TableRowProps = {
     className?: string;
     onClick?: React.MouseEventHandler<any>;
     style?: React.CSSProperties;
-};
+} & React.HTMLAttributes<HTMLTableRowElement>;
 
 export const TableRow = ({
                              children,
                              className,
                              onClick,
-                             style
+                             style,
+                             ...rest
                          }: TableRowProps) => (
     <tr
         onClick={onClick}
         style={style}
-        className={cn(
-            "divide-slate-100 dark:divide-gray-800",
+        className={cls(
             "bg-white dark:bg-gray-950",
             onClick ? "hover:bg-slate-100 dark:hover:bg-gray-800 cursor-pointer" : "",
-            className)}
+            className
+        )}
+        {...rest}
     >
         {children}
     </tr>
@@ -87,7 +101,7 @@ export type TableCellProps = {
     style?: React.CSSProperties;
     align?: "left" | "center" | "right";
     colspan?: number;
-};
+} & React.HTMLAttributes<HTMLTableCellElement>;
 
 export const TableCell = ({
                               children,
@@ -96,20 +110,24 @@ export const TableCell = ({
                               align,
                               className,
                               style,
-                              colspan
+                              colspan,
+                              ...rest
                           }: TableCellProps) => {
-
     const ref = useRef<HTMLTableCellElement>(null);
-
     const Tag = header || getParentName(ref.current) === "TableHeader" ? "th" : "td";
     return (
-        <Tag scope={scope}
-             colSpan={colspan}
-             ref={ref}
-             style={style}
-             className={cn("px-4 py-3 text-clip ",
-                 align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
-                 className)}>
+        <Tag
+            scope={scope}
+            colSpan={colspan}
+            ref={ref}
+            style={style}
+            className={cls(
+                "px-4 py-3 text-clip ",
+                align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
+                className
+            )}
+            {...rest}
+        >
             {children}
         </Tag>
     );
@@ -124,7 +142,6 @@ function getParentName(element: HTMLElement | null): string | undefined {
                 key.startsWith("__reactInternalInstance$")
             );
         });
-
         // @ts-ignore
         const domFiber = element[key];
         // @ts-ignore

package/src/components/Tabs.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TabsProps = {
     value: string,
@@ -18,7 +17,7 @@ export function Tabs({
                      }: TabsProps) {
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
-        <TabsPrimitive.List className={cn(
+        <TabsPrimitive.List className={cls(
             "flex text-sm font-medium text-center text-slate-800 dark:text-white max-w-full overflow-auto no-scrollbar",
             className)
         }>
@@ -42,19 +41,19 @@ export function Tab({
                     }: TabProps) {
     return <TabsPrimitive.Trigger value={value}
                                   disabled={disabled}
-                                  className={cn(focusedMixin,
+                                  className={cls(
                                       "border-b-2 border-transparent",
                                       "data-[state=active]:border-secondary",
                                       disabled
                                           ? "text-slate-400 dark:text-slate-500"
-                                          : cn("text-slate-700 dark:text-slate-300",
+                                          : cls("text-slate-700 dark:text-slate-300",
                                               "data-[state=active]:text-slate-900 data-[state=active]:dark:text-white",
                                               "hover:text-slate-800 dark:hover:text-slate-200"),
                                       // disabled ? "text-slate-400 dark:text-slate-500" : "data-[state=active]:text-primary",
                                       // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
                                       className)}>
-        <div className={cn("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-slate-100 dark:hover:bg-slate-800")}>
+        <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
+            "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800")}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;

package/src/components/TextField.tsx

@@ -7,10 +7,9 @@ import {
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
     focusedInvisibleMixin,
-    focusedMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type InputType =
     "text"
@@ -40,7 +39,7 @@ export type TextFieldProps<T extends string | number> = {
     endAdornment?: React.ReactNode,
     autoFocus?: boolean,
     placeholder?: string,
-    size?: "small" | "medium",
+    size?: "smallest" | "small" | "medium",
     className?: string,
     style?: React.CSSProperties,
     inputClassName?: string,
@@ -70,7 +69,6 @@ export function TextField<T extends string | number>({
                                                          ...inputProps
                                                      }: TextFieldProps<T>) {
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const inputRef = inputRefProp ?? useRef(null);
 
     // @ts-ignore
@@ -106,13 +104,11 @@ export function TextField<T extends string | number>({
             placeholder={focused || hasValue || !label ? placeholder : undefined}
             autoFocus={autoFocus}
             rows={rows}
-            // onFocus={() => setFocused(true)}
-            // onBlur={() => setFocused(false)}
             value={value ?? ""}
             onChange={onChange}
             style={inputStyle}
-            className={cn(
-                invisible ? focusedInvisibleMixin : focusedMixin,
+            className={cls(
+                invisible ? focusedInvisibleMixin :  "",
                 "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-[28px]",
                 disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
             )}
@@ -123,12 +119,12 @@ export function TextField<T extends string | number>({
             onWheel={type === "number" ? numberInputOnWheelPreventChange : undefined}
             disabled={disabled}
             style={inputStyle}
-            className={cn(
+            className={cls(
                 "w-full outline-none bg-transparent leading-normal px-3",
                 "rounded-md",
-                invisible ? focusedInvisibleMixin : focusedMixin,
+                invisible ? focusedInvisibleMixin : "",
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                size === "small" ? "min-h-[48px]" : "min-h-[64px]",
+                size === "smallest" ? "min-h-[32px]" : (size === "small" ? "min-h-[48px]" : "min-h-[64px]"),
                 label ? (size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2") : "py-2",
                 focused ? "text-text-primary dark:text-text-primary-dark" : "",
                 endAdornment ? "pr-10" : "pr-3",
@@ -146,12 +142,13 @@ export function TextField<T extends string | number>({
 
     return (
         <div
-            className={cn(
+            className={cls(
                 "rounded-md relative max-w-full",
                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 error ? "border border-red-500 dark:border-red-600" : "",
                 {
+                    "min-h-[32px]": !invisible && size === "smallest",
                     "min-h-[48px]": !invisible && size === "small",
                     "min-h-[64px]": !invisible && size === "medium"
                 },
@@ -160,7 +157,7 @@ export function TextField<T extends string | number>({
 
             {label && (
                 <InputLabel
-                    className={cn(
+                    className={cls(
                         "pointer-events-none absolute",
                         size === "medium" ? "top-1" : "-top-1",
                         !error ? (focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",

package/src/components/TextareaAutosize.tsx

@@ -1,7 +1,7 @@
 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 +276,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 +288,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,43 @@
 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,20 +45,27 @@ 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",
                             tooltipClassName)}
+                        style={tooltipStyle}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}
                         align={align}
                         side={side}>

package/src/components/Typography.tsx

@@ -1,6 +1,5 @@
 import React, { ReactEventHandler } from "react";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TextProps<C extends React.ElementType> = {
     align?: "center" | "inherit" | "justify" | "left" | "right";
@@ -43,21 +42,38 @@ 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>(
@@ -82,12 +98,11 @@ export function Typography<C extends React.ElementType>(
         (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[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