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

package/src/components/Menubar.tsx

@@ -1,5 +1,5 @@
 import * as MenubarPrimitive from "@radix-ui/react-Menubar";
-import { cn } from "../util";
+import { cls } from "../util";
 import { CheckIcon, ChevronRightIcon } from "../icons";
 
 export function Menubar({
@@ -7,7 +7,7 @@ export function Menubar({
                             className
                         }: { children: React.ReactNode, className?: string }) {
     return (
-        <MenubarPrimitive.Root className={cn("flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
+        <MenubarPrimitive.Root className={cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
             {children}
         </MenubarPrimitive.Root>
     )
@@ -29,7 +29,7 @@ export function MenubarTrigger({
                                }: { children: React.ReactNode, className?: string }) {
     return (
         <MenubarPrimitive.Trigger
-            className={cn("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-gray-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-gray-100 data-[state=open]:dark:bg-gray-800",
+            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-gray-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-gray-100 data-[state=open]:dark:bg-gray-800",
                 className)}>
             {children}
         </MenubarPrimitive.Trigger>
@@ -62,7 +62,7 @@ export function MenubarContent({
 }) {
     return (
         <MenubarPrimitive.Content
-            className={cn("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)}
+            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}
@@ -87,7 +87,7 @@ export function MenubarItem({
 }) {
     return (
         <MenubarPrimitive.Item
-            className={cn("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-gray-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-gray-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+            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-gray-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-gray-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
                 leftPadding ? "pl-5" : "",
                 className)}
             disabled={disabled}
@@ -108,7 +108,7 @@ export function MenubarSeparator({
 }) {
     return (
         <MenubarPrimitive.Separator
-            className={cn("h-[1px] bg-gray-100 dark:bg-gray-800 m-[5px]", className)}
+            className={cls("h-[1px] bg-gray-100 dark:bg-gray-800 m-[5px]", className)}
             {...rest}
         >
             {children}
@@ -141,7 +141,7 @@ export function MenubarSubTrigger({
 }) {
     return (
         <MenubarPrimitive.SubTrigger
-            className={cn("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-gray-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-gray-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+            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-gray-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-gray-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             {...rest}
         >
@@ -163,7 +163,7 @@ export function MenubarSubContent({
     return (
         <MenubarPrimitive.SubContent
             alignOffset={alignOffset ?? -5}
-            className={cn("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={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}
         >
@@ -186,7 +186,7 @@ export function MenubarCheckboxItem({
 }) {
     return (
         <MenubarPrimitive.CheckboxItem
-            className={cn("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-gray-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+            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-gray-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             checked={checked}
             onCheckedChange={onCheckedChange}
@@ -207,7 +207,7 @@ export function MenubarItemIndicator({
 }) {
     return (
         <MenubarPrimitive.ItemIndicator
-            className={cn("absolute left-0 w-4 inline-flex items-center justify-center", className)}
+            className={cls("absolute left-0 w-4 inline-flex items-center justify-center", className)}
             {...rest}>
             {children ?? <CheckIcon size={"smallest"}/>}
         </MenubarPrimitive.ItemIndicator>
@@ -228,7 +228,7 @@ export function MenubarRadioGroup({
 }) {
     return (
         <MenubarPrimitive.RadioGroup
-            className={cn(className)}
+            className={cls(className)}
             value={value}
             onValueChange={onValueChange}
             {...rest}>
@@ -249,7 +249,7 @@ export function MenubarRadioItem({
 }) {
     return (
         <MenubarPrimitive.RadioItem
-            className={cn("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-gray-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+            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-gray-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             value={value}
             {...rest}>
@@ -268,7 +268,7 @@ export function MenubarShortcut({
 }) {
     return (
         <div
-            className={cn("ml-auto pl-5 group-data-[highlighted]:text-white group-data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark",
+            className={cls("ml-auto pl-5 group-data-[highlighted]:text-white group-data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark",
                 className)}>
             {children}
         </div>

package/src/components/MultiSelect.tsx

@@ -6,7 +6,7 @@ import { Command as CommandPrimitive } from "cmdk";
 
 import { ExpandMoreIcon } from "../icons";
 import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
 import { useOutsideAlerter } from "../hooks";
 
@@ -116,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",
@@ -132,7 +132,7 @@ export function MultiSelect({
                         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
@@ -146,7 +146,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>
@@ -210,7 +210,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,7 @@ import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
@@ -57,7 +57,7 @@ export function Popover({
             {trigger}
         </PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
-            <PopoverPrimitive.Content className={cn(paperMixin,
+            <PopoverPrimitive.Content className={cls(paperMixin,
                 "PopoverContent shadow z-40", className)}
                                       side={side}
                                       sideOffset={sideOffset}

package/src/components/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface RadioGroupProps {
     id?: string;
@@ -30,7 +30,7 @@ const RadioGroup = React.forwardRef<
    }, ref) => {
     return (
         <RadioGroupPrimitive.Root
-            className={cn("grid gap-2", className)}
+            className={cls("grid gap-2", className)}
             {...props}
             ref={ref}
         />
@@ -55,7 +55,7 @@ const RadioGroupItem = React.forwardRef<
     return (
         <RadioGroupPrimitive.Item
             ref={ref}
-            className={cn(
+            className={cls(
                 "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}

package/src/components/SearchBar.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useState } from "react";
 import { defaultBorderMixin, focusedMixin } from "../styles";
 import { CircularProgress, IconButton } from "./index";
 import { ClearIcon, SearchIcon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 import { useDebounceValue } from "../hooks";
 
 interface SearchBarProps {
@@ -60,7 +60,7 @@ export function SearchBar({
     return (
         <div
             onClick={onClick}
-            className={cn("relative",
+            className={cls("relative",
                 large ? "h-14" : "h-[42px]",
                 "bg-slate-50 dark:bg-gray-800 border",
                 defaultBorderMixin,
@@ -84,7 +84,7 @@ export function SearchBar({
                 autoFocus={autoFocus}
                 onFocus={() => setActive(true)}
                 onBlur={() => setActive(false)}
-                className={cn(
+                className={cls(
                     (disabled || loading) && "pointer-events-none",
                     "relative flex items-center rounded transition-all bg-transparent outline-none appearance-none border-none",
                     "pl-12 h-full text-current ",

package/src/components/Select.tsx

@@ -9,7 +9,7 @@ import {
     focusedMixin
 } from "../styles";
 import { CheckIcon, ExpandMoreIcon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
 
 export type SelectProps = {
@@ -113,7 +113,7 @@ export function Select({
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
 
             <div
-                className={cn(
+                className={cls(
                     size === "small" ? "min-h-[42px]" : "min-h-[64px]",
                     "select-none rounded-md text-sm",
                     invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
@@ -124,7 +124,7 @@ export function Select({
                 <SelectPrimitive.Trigger
                     ref={inputRef}
                     id={id}
-                    className={cn(
+                    className={cls(
                         "w-full h-full",
                         size === "small" ? "h-[42px]" : "h-[64px]",
                         padding ? "px-4 " : "",
@@ -138,7 +138,7 @@ export function Select({
                         inputClassName
                     )}>
 
-                    <div className={cn(
+                    <div className={cls(
                         "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
                         "overflow-visible",
                         size === "small" ? "h-[42px]" : "h-[64px]"
@@ -161,16 +161,16 @@ export function Select({
                         </SelectPrimitive.Value>
                     </div>
 
-                    <SelectPrimitive.Icon className={cn(
+                    <SelectPrimitive.Icon className={cls(
                         "px-2 h-full flex items-center",
                     )}>
                         <ExpandMoreIcon size={"small"}
-                                        className={cn("transition", open ? "rotate-180" : "")}/>
+                                        className={cls("transition", open ? "rotate-180" : "")}/>
                     </SelectPrimitive.Icon>
 
                 </SelectPrimitive.Trigger>
 
-                {endAdornment && <div className={cn("absolute h-full flex items-center",
+                {endAdornment && <div className={cls("absolute h-full flex items-center",
                     size === "small" ? "right-10" : "right-14")}
                                       onClick={(e) => e.stopPropagation()}>
                     {endAdornment}
@@ -215,7 +215,7 @@ export function SelectItem({
             e.preventDefault();
             e.stopPropagation();
         }}
-        className={cn(
+        className={cls(
             "w-full",
             "relative relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
             focusedMixin,
@@ -249,7 +249,7 @@ export function SelectGroup({
                             }: SelectGroupProps) {
     return <>
         <SelectPrimitive.Group
-            className={cn(
+            className={cls(
                 "text-xs text-slate-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
                 "px-2 py-2",
                 className

package/src/components/Sheet.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../util";
+import { cls } from "../util";
 
 interface SheetProps {
     children: React.ReactNode;
@@ -47,7 +47,7 @@ export const Sheet: React.FC<SheetProps> = ({
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
                 <DialogPrimitive.Overlay
-                    className={cn(
+                    className={cls(
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-200  backdrop-blur-sm",
                         transparent ? "bg-white bg-opacity-80" : "bg-black bg-opacity-50",
                         "dark:bg-black dark:bg-opacity-60",
@@ -59,7 +59,7 @@ export const Sheet: React.FC<SheetProps> = ({
                 />
                 <DialogPrimitive.Content
                     {...props}
-                    className={cn(
+                    className={cls(
                         // "transform-gpu",
                         "will-change-transform",
                         "text-slate-900 dark:text-white",

package/src/components/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type SkeletonProps = {
     width?: number;
@@ -18,7 +18,7 @@ export function Skeleton({
             height: height ? `${height}px` : "12px"
         }}
         className={
-        cn(
+        cls(
             "block",
             "bg-slate-200 dark:bg-slate-800 rounded",
             "animate-pulse",

package/src/components/Table.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { defaultBorderMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TableProps = {
     children: React.ReactNode;
@@ -13,7 +13,7 @@ export const Table = ({
                           className,
                           style
                       }: TableProps) => (
-    <table className={cn("w-full text-left text-gray-800 dark:text-white rounded-md overflow-x-auto",
+    <table className={cls("w-full text-left text-gray-800 dark:text-white rounded-md overflow-x-auto",
         className)}
            style={style}>
         {children}
@@ -29,7 +29,7 @@ export const TableBody = ({
                               className
                           }: 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 text-sm dark:bg-gray-800 divide-y divide-slate-200 dark:divide-gray-700", className)}>
     {children}
     </tbody>
 );
@@ -44,7 +44,7 @@ export const TableHeader = ({
                                 className
                             }: TableHeaderProps) => (
     <thead>
-    <tr className={cn(
+    <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)}>
@@ -69,7 +69,7 @@ export const TableRow = ({
     <tr
         onClick={onClick}
         style={style}
-        className={cn(
+        className={cls(
             "divide-slate-100 dark:divide-gray-800",
             "bg-white dark:bg-gray-950",
             onClick ? "hover:bg-slate-100 dark:hover:bg-gray-800 cursor-pointer" : "",
@@ -107,7 +107,7 @@ export const TableCell = ({
              colSpan={colspan}
              ref={ref}
              style={style}
-             className={cn("px-4 py-3 text-clip ",
+             className={cls("px-4 py-3 text-clip ",
                  align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
                  className)}>
             {children}

package/src/components/Tabs.tsx

@@ -1,7 +1,7 @@
 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 +18,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,18 +42,18 @@ export function Tab({
                     }: TabProps) {
     return <TabsPrimitive.Trigger value={value}
                                   disabled={disabled}
-                                  className={cn(focusedMixin,
+                                  className={cls(focusedMixin,
                                       "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",
+        <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
             "hover:bg-slate-100 dark:hover:bg-slate-800")}>
             {children}
         </div>

package/src/components/TextField.tsx

@@ -10,7 +10,7 @@ import {
     focusedMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type InputType =
     "text"
@@ -111,7 +111,7 @@ export function TextField<T extends string | number>({
             value={value ?? ""}
             onChange={onChange}
             style={inputStyle}
-            className={cn(
+            className={cls(
                 invisible ? focusedInvisibleMixin : focusedMixin,
                 "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,7 +123,7 @@ 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,
@@ -146,7 +146,7 @@ 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,
@@ -161,7 +161,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}

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/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))
-}