@firecms/ui 3.0.0-canary.56 → 3.0.0-canary.58

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}

package/src/components/Tooltip.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "../util";
+import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
 
 export type TooltipProps = {
@@ -47,7 +47,7 @@ export const Tooltip = ({
                 </TooltipPrimitive.Trigger>
                 <TooltipPrimitive.Portal>
                     <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)}

package/src/components/Typography.tsx

@@ -1,6 +1,6 @@
 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";
@@ -99,7 +99,7 @@ export function Typography<C extends React.ElementType>(
         (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) ||
         "span";
 
-    const classes = cn(
+    const classes = cls(
         focusedMixin,
         variantToClasses[variant],
         color ? colorToClasses[color] : "",

package/src/components/common/SelectInputLabel.tsx

@@ -1,8 +1,8 @@
 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",
+    return <div className={cls("text-sm  font-medium ml-3.5 mb-1",
         error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300",)}>
         {children}
     </div>;

package/src/components/index.tsx

@@ -24,6 +24,7 @@ export * from "./Label";
 export * from "./LoadingButton";
 export * from "./Markdown";
 export * from "./Menu";
+export * from "./Menubar";
 export * from "./MultiSelect";
 export * from "./Paper";
 export * from "./RadioGroup";

package/src/icons/Icon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import "@material-design-icons/font/filled.css";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
 export type IconProps = {
@@ -56,7 +56,7 @@ export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: str
                 ...style
             }}
             className={
-                cn("material-icons",
+                cls("material-icons",
                     color ? colorClassesMapping[color] : "",
                     "select-none",
                     className)}

package/src/util/cls.ts

@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cls(...classes: ClassValue[]) {
+    return twMerge(clsx(classes))
+}
+
+/**
+ * @deprecated
+ */
+export function cn(...classes: ClassValue[]) {
+    console.warn("cn() is deprecated, use cls() instead. cn will be removed in the final 3.0.0 version");
+    return cls(...classes)
+}

package/src/util/index.ts

@@ -1,4 +1,4 @@
-export * from "./cn";
+export * from "./cls";
 export * from "./debounce";
 export * from "./chip_colors";
 export * from "./key_to_icon_component";

package/src/util/cn.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...classes: ClassValue[]) {
-    return twMerge(clsx(classes))
-}