@firecms/ui 3.0.0-canary.8 → 3.0.0-canary.80

package/src/components/Menubar.tsx

@@ -0,0 +1,287 @@
+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-slate-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50",
+                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 rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-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-slate-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" : "",
+                disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
+                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-slate-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-slate-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-slate-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-slate-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-slate-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-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark",
+                className)}
+            {...rest}>
+            {children}
+        </div>
+    )
+}
+
+export function MenubarSubTriggerIndicator() {
+    return (
+        <div className="ml-auto pl-5 ">
+            <ChevronRightIcon size={"small"}/>
+        </div>
+    )
+}

package/src/components/MultiSelect.tsx

@@ -6,8 +6,9 @@ import { Command as CommandPrimitive } from "cmdk";
 
 import { ExpandMoreIcon } from "../icons";
 import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn, useOutsideAlerter } from "../util";
+import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
+import { useOutsideAlerter } from "../hooks";
 
 export type MultiSelectProps = {
     open?: boolean,
@@ -115,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",
@@ -131,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
@@ -145,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>
@@ -209,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,8 @@ import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { paperMixin } from "../styles";
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -56,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,15 +1,36 @@
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { cn } from "../util";
-import { CircleIcon } from "../icons";
+import { cls } from "../util";
+
+export interface RadioGroupProps {
+    id?: string;
+    children: React.ReactNode;
+    name?: string
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * Whether keyboard navigation should loop around
+     * @defaultValue false
+     */
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string;
+
+    onValueChange?(value: string): void;
+
+    className?: string;
+}
 
 const RadioGroup = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+    RadioGroupProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     return (
         <RadioGroupPrimitive.Root
-            className={cn("grid gap-2", className)}
+            className={cls("grid gap-2", className)}
             {...props}
             ref={ref}
         />
@@ -17,21 +38,31 @@ const RadioGroup = React.forwardRef<
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
+export interface RadioGroupItemProps {
+    id?: string;
+    value: string;
+    checked?: boolean;
+    required?: boolean;
+    className?: string;
+}
 const RadioGroupItem = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+    RadioGroupItemProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     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
             )}
             {...props}
         >
             <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg" />
+                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg"/>
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
     )

package/src/components/SearchBar.tsx

@@ -3,8 +3,8 @@ 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 { useDebounceValue } from "../util/useDebounceValue";
+import { cls } from "../util";
+import { useDebounceValue } from "../hooks";
 
 interface SearchBarProps {
     onClick?: () => void;
@@ -60,14 +60,14 @@ 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 transition duration-150 ease-in-out border",
+                "bg-slate-50 dark:bg-gray-800 border",
                 defaultBorderMixin,
                 "rounded",
                 className)}>
             <div
-                className="absolute p-0 px-4 h-full absolute pointer-events-none flex items-center justify-center top-0">
+                className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
                 {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-slate-500 dark:text-gray-500"}/>}
             </div>
             <input
@@ -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 = {
@@ -27,7 +27,7 @@ export type SelectProps = {
     renderValue?: (value: string, index: number) => React.ReactNode,
     renderValues?: (values: string[]) => React.ReactNode,
     size?: "small" | "medium",
-    label?: React.ReactNode,
+    label?: React.ReactNode | string,
     disabled?: boolean,
     error?: boolean,
     position?: "item-aligned" | "popper",
@@ -95,6 +95,7 @@ export function Select({
         }
     }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
 
+    const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
     return (
         <SelectPrimitive.Root
             name={name}
@@ -112,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,
@@ -123,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 " : "",
@@ -137,39 +138,39 @@ 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]"
                     )}>
-                    <SelectPrimitive.Value >
-                        {renderValue &&
-                            (value && Array.isArray(value)
-                                ? value.map((v, i) => (
-                                    <div key={v} className={"flex items-center gap-1 max-w-full"}>
-                                        {renderValue ? renderValue(v, i) : v}
-                                    </div>))
-                                : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
+                        <SelectPrimitive.Value placeholder={placeholder}>
+                            {renderValue &&
+                                (hasValue && Array.isArray(value)
+                                    ? value.map((v, i) => (
+                                        <div key={v} className={"flex items-center gap-1 max-w-full"}>
+                                            {renderValue ? renderValue(v, i) : v}
+                                        </div>))
+                                    : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
 
-                        {renderValues && (!value || Array.isArray(value))
-                            ? renderValues(value as string[] ?? [])
-                            : null}
+                            {renderValues && (!hasValue || Array.isArray(value))
+                                ? renderValues(value as string[] ?? [])
+                                : null}
 
-                        {!renderValue && !renderValues && value}
+                            {!renderValue && !renderValues && hasValue}
 
-                    </SelectPrimitive.Value>
+                        </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}
@@ -214,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,
@@ -248,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,10 +47,10 @@ 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",
+                        "bg-black bg-opacity-50",
+                        "dark:bg-gray-900 dark:bg-opacity-60",
                         displayed && open ? "opacity-100" : "opacity-0"
                     )}
                     style={{
@@ -59,13 +59,13 @@ export const Sheet: React.FC<SheetProps> = ({
                 />
                 <DialogPrimitive.Content
                     {...props}
-                    className={cn(
-                        // "transform-gpu",
+                    className={cls(
+                        "transform-gpu",
                         "will-change-transform",
                         "text-slate-900 dark:text-white",
                         "fixed transform z-20 transition-all duration-[240ms] ease-in-out",
                         "outline-none focus:outline-none",
-                        !transparent ? "shadow-md" : "",
+                        transparent ? "" : "shadow-md bg-white dark:bg-gray-950",
                         side === "top" || side === "bottom" ? "w-full" : "h-full",
                         side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0",
                         displayed && open ? "opacity-100" : "opacity-0",

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;
@@ -12,13 +12,16 @@ export function Skeleton({
                              height,
                              className
                          }: SkeletonProps) {
-    return <span className={
-        cn(
+    return <span
+        style={{
+            width: width ? `${width}px` : "100%",
+            height: height ? `${height}px` : "12px"
+        }}
+        className={
+        cls(
             "block",
             "bg-slate-200 dark:bg-slate-800 rounded",
             "animate-pulse",
-            width ? `w-[${width}px]` : "w-full",
-            height ? `h-[${height}px]` : "h-3",
             "max-w-full max-h-full",
             className)
     }/>;