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

package/src/components/Menubar.tsx

@@ -0,0 +1,284 @@
+import * as MenubarPrimitive from "@radix-ui/react-Menubar";
+import { cls } from "../util";
+import { CheckIcon, ChevronRightIcon } from "../icons";
+
+export function Menubar({
+                            children,
+                            className
+                        }: { children: React.ReactNode, className?: string }) {
+    return (
+        <MenubarPrimitive.Root className={cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
+            {children}
+        </MenubarPrimitive.Root>
+    )
+}
+
+export function MenubarMenu({
+                                children,
+                            }: { children: React.ReactNode }) {
+    return (
+        <MenubarPrimitive.Menu>
+            {children}
+        </MenubarPrimitive.Menu>
+    )
+}
+
+export function MenubarTrigger({
+                                   children,
+                                   className
+                               }: { children: React.ReactNode, className?: string }) {
+    return (
+        <MenubarPrimitive.Trigger
+            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>
+    )
+}
+
+export function MenubarPortal({
+                                  children,
+                              }: { children: React.ReactNode }) {
+    return (
+        <MenubarPrimitive.Portal>
+            {children}
+        </MenubarPrimitive.Portal>
+    )
+}
+
+export function MenubarContent({
+                                   children,
+                                   className,
+                                   align,
+                                   sideOffset,
+                                   alignOffset,
+                                   ...rest
+                               }: {
+    children: React.ReactNode,
+    className?: string,
+    align?: "start" | "center" | "end",
+    sideOffset?: number,
+    alignOffset?: number
+}) {
+    return (
+        <MenubarPrimitive.Content
+            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}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Content>
+    )
+}
+
+export function MenubarItem({
+                                children,
+                                leftPadding,
+                                className,
+                                disabled,
+                                ...rest
+                            }: {
+    children: React.ReactNode,
+    leftPadding?: boolean,
+    className?: string,
+    disabled?: boolean
+}) {
+    return (
+        <MenubarPrimitive.Item
+            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}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Item>
+    )
+}
+
+export function MenubarSeparator({
+                                     children,
+                                     className,
+                                     ...rest
+                                 }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.Separator
+            className={cls("h-[1px] bg-gray-100 dark:bg-gray-800 m-[5px]", className)}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Separator>
+    )
+}
+
+export function MenubarSub({
+                               children,
+                               ...rest
+                           }: {
+    children?: React.ReactNode,
+}) {
+    return (
+        <MenubarPrimitive.Sub
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Sub>
+    )
+}
+
+export function MenubarSubTrigger({
+                                      children,
+                                      className,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.SubTrigger
+            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}
+        >
+            {children}
+        </MenubarPrimitive.SubTrigger>
+    )
+}
+
+export function MenubarSubContent({
+                                      children,
+                                      alignOffset,
+                                      className,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    alignOffset?: number,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.SubContent
+            alignOffset={alignOffset ?? -5}
+            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}
+        >
+            {children}
+        </MenubarPrimitive.SubContent>
+    )
+}
+
+export function MenubarCheckboxItem({
+                                        children,
+                                        checked,
+                                        onCheckedChange,
+                                        className,
+                                        ...rest
+                                    }: {
+    children?: React.ReactNode,
+    checked?: boolean,
+    onCheckedChange?: () => void,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.CheckboxItem
+            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}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.CheckboxItem>
+    )
+}
+
+export function MenubarItemIndicator({
+                                         children,
+                                         className,
+                                         ...rest
+                                     }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.ItemIndicator
+            className={cls("absolute left-0 w-4 inline-flex items-center justify-center", className)}
+            {...rest}>
+            {children ?? <CheckIcon size={"smallest"}/>}
+        </MenubarPrimitive.ItemIndicator>
+    )
+}
+
+export function MenubarRadioGroup({
+                                      children,
+                                      className,
+                                      value,
+                                      onValueChange,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    value?: string,
+    onValueChange?: (value: string) => void,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.RadioGroup
+            className={cls(className)}
+            value={value}
+            onValueChange={onValueChange}
+            {...rest}>
+            {children ?? <CheckIcon size={"small"}/>}
+        </MenubarPrimitive.RadioGroup>
+    )
+}
+
+export function MenubarRadioItem({
+                                     children,
+                                     className,
+                                     value,
+                                     ...rest
+                                 }: {
+    children?: React.ReactNode,
+    value: string,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.RadioItem
+            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}>
+            {children ?? <CheckIcon size={"small"}/>}
+        </MenubarPrimitive.RadioItem>
+    )
+}
+
+export function MenubarShortcut({
+                                    children,
+                                    className,
+                                    ...rest
+                                }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <div
+            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>
+    )
+}
+
+export function MenubarSubTriggerIndicator() {
+    return (
+        <div className="ml-auto pl-5 ">
+            <ChevronRightIcon size={"small"}/>
+        </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",