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

package/src/components/CenteredView.tsx

@@ -1,24 +1,34 @@
 import React from "react";
 import { Container } from "./Container";
-import { cn } from "../util";
+import { cls } from "../util";
 
-export function CenteredView({
-                                 children,
-                                 maxWidth,
-                                 className,
-                                 fullScreen
-                             }: {
+export type CenteredViewProps = {
     children: React.ReactNode;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+    outerClassName?: string;
     className?: string;
     fullScreen?: boolean;
-}) {
+};
 
-    return <div className={cn("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full")}>
-        <Container className={cn("m-auto", className)}
-                   maxWidth={maxWidth}>
-            {children}
-        </Container>
-    </div>
+export const CenteredView = React.forwardRef<HTMLDivElement, CenteredViewProps>(({
+                                                                                     children,
+                                                                                     maxWidth,
+                                                                                     outerClassName,
+                                                                                     className,
+                                                                                     fullScreen,
+                                                                                     ...rest
+                                                                                 }, ref) => { // Notice how the ref is now received as the second argument
 
-}
+    return (
+        <div ref={ref}
+             className={cls("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
+             {...rest}>
+            <Container className={cls("m-auto", className)} maxWidth={maxWidth}>
+                {children}
+            </Container>
+        </div>
+    );
+
+});
+
+CenteredView.displayName = "CenteredView";

package/src/components/Checkbox.tsx

@@ -2,15 +2,16 @@ import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 import { Icon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface CheckboxProps {
     checked: boolean;
+    id?: string;
     disabled?: boolean;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     padding?: boolean;
-    size?: "tiny" | "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
 
@@ -18,20 +19,20 @@ const sizeClasses = {
     large: "w-6 h-6 rounded flex items-center justify-center",
     medium: "w-5 h-5 rounded flex items-center justify-center",
     small: "w-4 h-4 rounded flex items-center justify-center",
-    tiny: "w-4 h-4 rounded flex items-center justify-center"
+    smallest: "w-4 h-4 rounded flex items-center justify-center"
 };
 
 const outerSizeClasses = {
     medium: "w-10 h-10",
     small: "w-8 h-8",
     large: "w-12 h-12 ",
-    tiny: "w-6 h-6"
+    smallest: "w-6 h-6"
 }
 const paddingClasses = {
     medium: "p-2",
     small: "p-2",
     large: "p-2",
-    tiny: ""
+    smallest: ""
 }
 
 const colorClasses = {
@@ -40,6 +41,7 @@ const colorClasses = {
 }
 
 export const Checkbox = ({
+                             id,
                              checked,
                              indeterminate = false,
                              padding = true,
@@ -55,17 +57,17 @@ export const Checkbox = ({
         ? 20
         : size === "small"
             ? 16
-            : size === "tiny"
+            : size === "smallest"
                 ? 14
                 : 24;
     return (
         <CheckboxPrimitive.Root
-            asChild
+            id={id}
             checked={indeterminate || isChecked}
             disabled={disabled}
             onCheckedChange={disabled ? undefined : onCheckedChange}>
 
-            <div className={cn(
+            <div className={cls(
                 padding ? paddingClasses[size] : "",
                 outerSizeClasses[size],
                 "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
@@ -73,7 +75,7 @@ export const Checkbox = ({
                 onCheckedChange ? "cursor-pointer" : "cursor-default"
             )}>
                 <div
-                    className={cn(
+                    className={cls(
                         "border-2 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled

package/src/components/Chip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CHIP_COLORS, cn, getColorSchemeForKey } from "../util";
+import { CHIP_COLORS, cls, getColorSchemeForKey } from "../util";
 
 export type ChipColorScheme = {
     color: string;
@@ -11,16 +11,17 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "tiny" | "small" | "medium";
+    size?: "smallest" | "small" | "medium";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;
     onClick?: () => void;
     icon?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 
 const sizeClassNames = {
-    tiny: "px-2 py-0.5 text-sm",
+    smallest: "px-2 py-0.5 text-sm",
     small: "px-3 py-1 text-sm",
     medium: "px-4 py-1.5 text-sm"
 }
@@ -36,13 +37,14 @@ export function Chip({
                          onClick,
                          icon,
                          size = "medium",
-                         className
+                         className,
+                         style
                      }: ChipProps) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
-            className={cn("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
                 sizeClassNames[size],
@@ -54,6 +56,7 @@ export function Chip({
                 backgroundColor: error || !usedColorScheme ? undefined : usedColorScheme.color,
                 color: error || !usedColorScheme ? undefined : usedColorScheme.text,
                 overflow: "hidden",
+                ...style
                 // display: "-webkit-box",
                 // WebkitLineClamp: 1,
                 // WebkitBoxOrient: "vertical",

package/src/components/CircularProgress.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type CircularProgressProps = {
     size?: "small" | "medium" | "large",
@@ -31,7 +31,7 @@ export function CircularProgress({
 
     return (
         <div
-            className={cn(
+            className={cls(
                 sizeClasses,
                 borderClasses,
                 "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",

package/src/components/Collapse.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 interface CollapseProps {
     children?: React.ReactNode;
@@ -53,7 +54,7 @@ export function Collapse({
             className={className}>
 
             <Collapsible.Content
-                className={cn(`CollapseContent-${duration}`)}
+                className={cls(`CollapseContent-${duration}`)}
             >
                 {children}
             </Collapsible.Content>

package/src/components/Container.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardRefRenderFunction } from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ContainerProps = {
     children: React.ReactNode;
@@ -37,7 +37,7 @@ const ContainerInner: ForwardRefRenderFunction<HTMLDivElement, ContainerProps> =
     return (
         <div
             ref={ref}
-            className={cn("mx-auto px-3 md:px-4 lg-px-6",
+            className={cls("mx-auto px-3 md:px-4 lg-px-6",
                 classForMaxWidth,
                 className)}
             style={style}>

package/src/components/DateTimeField.tsx

@@ -1,34 +1,33 @@
 import React, { useRef } from "react";
-// @ts-ignore
-import DatePicker from "react-datepicker";
+import * as RDP from "react-datepicker"
 
 import { CalendarMonthIcon, ClearIcon, ErrorIcon } from "../icons";
 import { IconButton } from "./IconButton";
-import {
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    focusedMixin,
-    paperMixin
-} from "../styles";
+import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, paperMixin } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn, useInjectStyles } from "../util";
 import { Typography } from "./Typography";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
+
+// this fixes the issue with the default export, affecting Next.js
+const DatePicker = (((RDP.default as any).default as any) ||
+    (RDP.default as any) ||
+    (RDP as any)) as typeof RDP.default
+
+export type DateTimeFieldProps = {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
 
-interface DateTimeFieldProps {
-    value?: Date;
-    onChange: (date: Date | null) => void;
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size: "small" | "medium";
+    size?: "small" | "medium";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
-    preventOpenOnFocus?: boolean;
     locale?: string;
 }
 
@@ -40,11 +39,10 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                                                                 clearable,
                                                                 mode = "date",
                                                                 error,
-                                                                size,
+                                                                size = "medium",
                                                                 className,
                                                                 style,
                                                                 inputClassName,
-                                                                preventOpenOnFocus,
                                                                 invisible,
                                                                 locale
                                                             }) => {
@@ -60,14 +58,14 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
     const handleClear = (e: React.MouseEvent) => {
         e.preventDefault();
-        onChange(null);
+        onChange?.(null);
     }
 
     return (
         <>
 
             <div
-                className={cn(
+                className={cls(
                     "rounded-md relative max-w-full",
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -80,7 +78,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
                 {label && (
                     <InputLabel
-                        className={cn("absolute top-1 pointer-events-none",
+                        className={cls("absolute top-1 pointer-events-none",
                             !error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-500",
                             disabled ? "opacity-50" : "")}
                         shrink={hasValue || focused}
@@ -95,8 +93,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     selected={(invalidValue ? null : value) ?? null}
                     onChange={onChange}
                     disabled={false}
-                    popperClassName={cn(paperMixin, "my-4 shadow")}
-                    onClick={(e: any) => e.stopPropagation()}
+                    popperClassName={cls(paperMixin, "my-4 shadow")}
                     onFocus={() => setFocused(true)}
                     onBlur={() => setFocused(false)}
                     showTimeSelect={mode === "date_time"}
@@ -105,11 +102,10 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     timeCaption="time"
                     dateFormat={mode === "date_time" ? "Pp" : "P"}
                     preventOpenOnFocus={true}
-                    className={cn(
+                    className={cls(
                         "w-full outline-none bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
                         "rounded-md",
-                        !invisible && focusedMixin,
                         size === "small" ? "min-h-[48px]" : "min-h-[64px]",
                         label ? "pt-[28px] pb-2" : "py-2",
                         inputClassName,
@@ -117,7 +113,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     )}
                 />
 
-
                 <IconButton
                     onClick={() => {
                         // @ts-ignore
@@ -527,7 +522,7 @@ const datePickerCss = `
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
   border-radius: 100%;
-  background-color: #5193f6;
+  background-color: #186ef0;
   color: #fff;
 }
 .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
@@ -540,22 +535,22 @@ const datePickerCss = `
 .react-datepicker__year-text--selected:hover,
 .react-datepicker__year-text--in-selecting-range:hover,
 .react-datepicker__year-text--in-range:hover {
-  background-color: #186ef0;
-}
-.react-datepicker__day--keyboard-selected,
-.react-datepicker__month-text--keyboard-selected,
-.react-datepicker__quarter-text--keyboard-selected,
-.react-datepicker__year-text--keyboard-selected {
-  border-radius: 100%;
-  background-color: #cee2ff;
-  color: rgb(0, 0, 0);
-}
-.react-datepicker__day--keyboard-selected:hover,
-.react-datepicker__month-text--keyboard-selected:hover,
-.react-datepicker__quarter-text--keyboard-selected:hover,
-.react-datepicker__year-text--keyboard-selected:hover {
-  background-color: #186ef0;
-}
+  background-color: #5698f9;
+}
+// .react-datepicker__day--keyboard-selected,
+// .react-datepicker__month-text--keyboard-selected,
+// .react-datepicker__quarter-text--keyboard-selected,
+// .react-datepicker__year-text--keyboard-selected {
+//   border-radius: 100%;
+//   background-color: #5193f6;
+//   color: rgb(0, 0, 0);
+// }
+// .react-datepicker__day--keyboard-selected:hover,
+// .react-datepicker__month-text--keyboard-selected:hover,
+// .react-datepicker__quarter-text--keyboard-selected:hover,
+// .react-datepicker__year-text--keyboard-selected:hover {
+//   background-color: #5193f6;
+// }
 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
 .react-datepicker__month-text--in-range,
 .react-datepicker__quarter-text--in-range,
@@ -838,7 +833,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__month-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__month-year-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__navigation-icon::before {
-  border-color: #333;
+  border-color: #999;
 }
 
 
@@ -912,7 +907,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__year-text--selected:hover,
 :is([data-theme="dark"]) .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover
  {
-  background-color: #1a1a1a;
+  background-color: #262626;
 }
 
 :is([data-theme="dark"]) .react-datepicker__day--selected,
@@ -930,12 +925,12 @@ const datePickerCss = `
   background-color: #0e528f;
 }
 
-:is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
-  background-color: #0e529f;
-}
+// :is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
+//   background-color: #0e529f;
+// }
 
 :is([data-theme="dark"]) .react-datepicker__today-button {
   background-color: #262626;

package/src/components/Dialog.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type DialogProps = {
     open?: boolean;
@@ -15,6 +15,9 @@ export type DialogProps = {
     maxWidth?: keyof typeof widthClasses;
     modal?: boolean;
     onOpenAutoFocus?: (e: Event) => void;
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+    onPointerDownOutside?: (e: Event) => void;
+    onInteractOutside?: (e: Event) => void;
 };
 
 const widthClasses = {
@@ -43,7 +46,10 @@ export const Dialog = ({
                            scrollable = true,
                            maxWidth = "lg",
                            modal = true,
-                           onOpenAutoFocus
+                           onOpenAutoFocus,
+                           onEscapeKeyDown,
+                           onPointerDownOutside,
+                           onInteractOutside
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
@@ -51,7 +57,7 @@ export const Dialog = ({
         if (!open) {
             const timeout = setTimeout(() => {
                 setDisplayed(false);
-            }, 250);
+            }, 150);
             return () => clearTimeout(timeout);
         } else {
             setDisplayed(true);
@@ -69,7 +75,7 @@ export const Dialog = ({
                 <div className={"fixed inset-0 z-30"}>
 
                     <DialogPrimitive.Overlay
-                        className={cn("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
+                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}
@@ -79,11 +85,14 @@ export const Dialog = ({
                     />
 
                     <DialogPrimitive.Content
+                        onEscapeKeyDown={onEscapeKeyDown}
                         onOpenAutoFocus={onOpenAutoFocus}
-                        className={cn("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
+                        onPointerDownOutside={onPointerDownOutside}
+                        onInteractOutside={onInteractOutside}
+                        className={cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div
-                            className={cn(paperMixin,
+                            className={cls(paperMixin,
                                 "z-30",
                                 "relative",
                                 "outline-none focus:outline-none",

package/src/components/DialogActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { defaultBorderMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function DialogActions({
                                   children,
@@ -15,7 +15,7 @@ export function DialogActions({
 }) {
 
     return <div
-        className={cn(
+        className={cls(
             defaultBorderMixin,
             "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
             position,

package/src/components/DialogContent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function DialogContent({
                                   children,
@@ -17,7 +17,7 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cn("py-6 px-6 h-full flex-grow", className)}>
+        className={cls("py-6 px-6 h-full flex-grow", className)}>
         {children}
     </div>;
 }

package/src/components/ExpandablePanel.tsx

@@ -1,9 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from "react";
 
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { defaultBorderMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
+import { defaultBorderMixin, fieldBackgroundMixin } from "../styles";
 import { ExpandMoreIcon } from "../icons";
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export function ExpandablePanel({
                                     title,
@@ -75,9 +76,10 @@ export function ExpandablePanel({
 
     return (<>
             <Collapsible.Root
-                className={cn(
+                className={cls(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md"
+                    "rounded-md",
+                    "w-full"
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {
@@ -86,9 +88,9 @@ export function ExpandablePanel({
                 }}>
 
                 <Collapsible.Trigger
-                    className={cn(focusedMixin,
+                    className={cls(
                         "rounded flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
+                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,
@@ -96,11 +98,11 @@ export function ExpandablePanel({
                     )}
                 >
                     {title}
-                    <ExpandMoreIcon className={cn("transition", open ? "rotate-180" : "")}/>
+                    <ExpandMoreIcon className={cls("transition", open ? "rotate-180" : "")}/>
                 </Collapsible.Trigger>
 
                 <Collapsible.Content
-                    className={cn("CollapsibleContent")}
+                    className={cls("CollapsibleContent")}
                     style={{
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}

package/src/components/FileUpload.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDropzone } from "react-dropzone";
-import { fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { fieldBackgroundHoverMixin, fieldBackgroundMixin } from "../styles";
+import { cls } from "../util";
 import { Typography } from "./Typography";
 
 export interface FileUploadError {
@@ -38,7 +38,7 @@ export function FileUpload({
                                disabled,
                                maxFiles,
                                title,
-                               uploadDescription = "Drag and drop a file here or click",
+                               uploadDescription,
                                children,
                                preventDropOnDocument = true,
                                size
@@ -63,21 +63,18 @@ export function FileUpload({
     );
     return <div
         {...getRootProps()}
-        className={cn(
+        className={cls(
             fieldBackgroundMixin,
-            fieldBackgroundHoverMixin,
-            focusedMixin,
             "flex gap-2",
             "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
             {
                 "h-44": size === "medium",
                 "h-28": size === "small",
                 "cursor-pointer": !disabled,
-                "hover:bg-field-hover dark:hover:bg-field-hover-dark": !isDragActive,
+                [fieldBackgroundHoverMixin]: !isDragActive,
                 "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
                 "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": isDragAccept,
-            })}
-    >
+            })}>
 
         <Typography variant={"caption"} color={"secondary"} className={"absolute top-2 left-3.5 cursor-inherit"}>
             {title}

package/src/components/IconButton.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type IconButtonProps<C extends React.ElementType> =
     Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick">
@@ -15,7 +14,7 @@ export type IconButtonProps<C extends React.ElementType> =
 }
 
 const buttonClasses =
-    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50";
+    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800";
 const baseClasses =
     "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-gray-300";
@@ -42,15 +41,14 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      ...props
                                                                  }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-50 dark:bg-gray-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-200 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-50";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component
             type="button"
             ref={ref}
             {...props}
-            className={cn(
-                focusedMixin,
+            className={cls(
                 disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
                 toggled ? "outline outline-2 outline-primary" : "",
                 colorClasses,