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

package/dist/styles.d.ts

@@ -1,12 +1,12 @@
 export declare const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
-export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
-export declare const fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
-export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-90";
+export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
+export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
+export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
+export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60";
 export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
-export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-90 border-gray-100";
-export declare const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1 border border-transparent";
+export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
+export declare const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
 export declare const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
 export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";

package/dist/util/{cn.d.ts → cls.d.ts}

@@ -1,2 +1,6 @@
 import { type ClassValue } from "clsx";
+export declare function cls(...classes: ClassValue[]): string;
+/**
+ * @deprecated
+ */
 export declare function cn(...classes: ClassValue[]): string;

package/dist/util/index.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-canary.8",
+    "version": "3.0.0-canary.80",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -31,9 +31,10 @@
         ".": {
             "import": "./dist/index.es.js",
             "require": "./dist/index.umd.js",
-            "types": "./dist/src/index.d.ts"
+            "types": "./dist/index.d.ts"
         },
-        "./package.json": "./package.json"
+        "./package.json": "./package.json",
+        "./tailwind.config.js": "./tailwind.config.js"
     },
     "scripts": {
         "watch": "vite build --watch",
@@ -47,72 +48,61 @@
     },
     "dependencies": {
         "@material-design-icons/font": "^0.14.13",
-        "@radix-ui/react-checkbox": "^1.0.4",
-        "@radix-ui/react-collapsible": "^1.0.3",
-        "@radix-ui/react-dialog": "^1.0.5",
-        "@radix-ui/react-dropdown-menu": "^2.0.6",
-        "@radix-ui/react-label": "^2.0.2",
-        "@radix-ui/react-popover": "^1.0.7",
-        "@radix-ui/react-portal": "^1.0.4",
-        "@radix-ui/react-radio-group": "^1.1.3",
-        "@radix-ui/react-scroll-area": "^1.0.5",
-        "@radix-ui/react-select": "^2.0.0",
-        "@radix-ui/react-separator": "^1.0.3",
-        "@radix-ui/react-switch": "^1.0.3",
-        "@radix-ui/react-tabs": "^1.0.4",
-        "@radix-ui/react-tooltip": "^1.0.7",
+        "@radix-ui/react-checkbox": "^1.1.1",
+        "@radix-ui/react-collapsible": "^1.1.0",
+        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-menubar": "^1.1.1",
+        "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-portal": "^1.1.1",
+        "@radix-ui/react-radio-group": "^1.2.0",
+        "@radix-ui/react-scroll-area": "^1.1.0",
+        "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-tooltip": "^1.1.2",
+        "clsx": "^2.1.1",
         "cmdk": "^0.2.1",
-        "react-datepicker": "^6.4.0",
+        "date-fns": "^3.6.0",
+        "react-datepicker": "^6.9.0",
         "react-dropzone": "^14.2.3",
         "react-fast-compare": "^3.2.2",
-        "tailwind-merge": "^2.2.2"
+        "tailwind-merge": "^2.3.0"
     },
     "peerDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
     },
     "devDependencies": {
         "@jest/globals": "^29.7.0",
-        "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/react": "^14.2.1",
+        "@testing-library/jest-dom": "^6.4.6",
+        "@testing-library/react": "^15.0.7",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
-        "@types/node": "^20.11.30",
+        "@types/node": "^20.14.9",
         "@types/object-hash": "^3.0.6",
-        "@types/react": "^18.2.67",
-        "@types/react-dom": "^18.2.22",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
         "@types/react-measure": "^2.0.12",
-        "@typescript-eslint/eslint-plugin": "^7.3.1",
-        "@typescript-eslint/parser": "^7.3.1",
-        "@vitejs/plugin-react": "^4.2.1",
+        "@vitejs/plugin-react": "^4.3.1",
         "cross-env": "^7.0.3",
-        "eslint": "^8.57.0",
-        "eslint-config-standard": "^17.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-n": "^16.6.2",
-        "eslint-plugin-promise": "^6.1.1",
-        "eslint-plugin-react": "^7.34.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "firebase": "^10.9.0",
+        "firebase": "^10.12.2",
         "jest": "^29.7.0",
         "npm-run-all": "^4.1.5",
-        "ts-jest": "^29.1.2",
+        "ts-jest": "^29.1.5",
         "ts-node": "^10.9.2",
-        "tsd": "^0.30.7",
-        "typescript": "^5.4.2",
-        "vite": "^5.1.6"
+        "tsd": "^0.31.1",
+        "typescript": "^5.5.3",
+        "vite": "^5.3.2"
     },
     "files": [
         "dist",
-        "src"
+        "src",
+        "tailwind.config.js"
     ],
-    "gitHead": "6d3cbe74b9d5ac0fbd7ee9110a92d0188a252f02",
+    "gitHead": "e41e7401fda1929c44300ada0b993e5b0703b7a1",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface AlertProps {
     children: React.ReactNode;
@@ -52,7 +52,7 @@ export const Alert: React.FC<AlertProps> = ({
     return (
         <div
             style={style}
-            className={cn(
+            className={cls(
                 getSizeClasses(size),
                 "w-full",
                 "font-medium",

package/src/components/Autocomplete.tsx

@@ -2,7 +2,8 @@ import React from "react";
 
 import { paperMixin } from "../styles";
 import { Collapse } from "./Collapse";
-import { cn, useOutsideAlerter } from "../util";
+import { cls } from "../util";
+import { useOutsideAlerter } from "../hooks";
 
 export type AutocompleteProps = {
     children: React.ReactNode;
@@ -49,14 +50,14 @@ export function Autocomplete({
     return <Collapse
         in={open}
         duration={50}
-        className={cn(
+        className={cls(
             "absolute top-full left-0 right-0 overflow-visible",
             open ? "shadow" : "",
             "my-2",
             "z-20",
             "w-full")}>
         <div ref={autocompleteRef}
-             className={cn(
+             className={cls(
                  open ? paperMixin : "",
                  "bg-slate-50 dark:bg-slate-900 py-2"
              )}>

package/src/components/Avatar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 import { focusedMixin } from "../styles";
 
 export interface AvatarProps {
@@ -7,6 +7,7 @@ export interface AvatarProps {
     alt?: string;
     children?: React.ReactNode;
     className?: string;
+    outerClassName?: string;
     style?: React.CSSProperties;
 }
 
@@ -17,6 +18,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
         children,
         className,
         style,
+        outerClassName,
         ...props
     }, ref) => {
 
@@ -25,13 +27,14 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             ref={ref}
             style={style}
             {...props}
-            className={cn("rounded-full flex items-center justify-center overflow-hidden",
+            className={cls("rounded-full flex items-center justify-center overflow-hidden",
                 focusedMixin,
                 "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12",
+                outerClassName
             )}>
             {src
                 ? (
-                    <img className={cn(
+                    <img className={cls(
                         "bg-slate-100 dark:bg-slate-800",
                         "w-full h-full object-cover rounded-full",
                         className)}
@@ -40,7 +43,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
                 )
                 : (
                     <span
-                        className={cn(
+                        className={cls(
                             "bg-slate-100 dark:bg-slate-800",
                             "flex items-center justify-center",
                             "w-full h-full py-1.5 text-lg font-medium text-slate-900 dark:text-white rounded-full",

package/src/components/Badge.tsx

@@ -27,7 +27,7 @@ export const Badge: React.FC<BadgeProps> = ({
                                                 children
                                             }) => {
     return (
-        <div className="relative inline-block">
+        <div className="relative inline-block w-fit">
             {children}
             <span
                 className={`absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full

package/src/components/BooleanSwitch.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type BooleanSwitchProps = {
     value: boolean | null;
     className?: string;
     disabled?: boolean;
-    size?: "small" | "medium";
+    size?: "small" | "medium" | "large";
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;
@@ -39,7 +39,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                         onValueChange?.(!value);
                     }
                 }}
-            className={cn(
+            className={cls(
                 size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
                 "outline-none rounded-full relative shadow-sm",
                 value ? (disabled
@@ -51,13 +51,13 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
         >
             {allowIndeterminate && (value === null || value === undefined) && <div
                 key={"knob"}
-                className={cn(
+                className={cls(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
                     disabled ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600",
                     {
-                        "w-[21px] h-[10px]": size === "medium",
+                        "w-[21px] h-[10px]": size === "medium" || size === "large",
                         "w-[19px] h-[8px]": size === "small",
-                        "translate-x-[10px]": size === "medium",
+                        "translate-x-[10px]": size === "medium" || size === "large",
                         "translate-x-[9px]": size === "small"
                     }
                 )}
@@ -65,13 +65,13 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
 
             {!(allowIndeterminate && (value === null || value === undefined)) && <div
                 key={"knob"}
-                className={cn(
+                className={cls(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
                     disabled ? "bg-slate-300 dark:bg-slate-700" : (value ? "bg-white" : "bg-slate-600 dark:bg-slate-400"),
                     {
-                        "w-[21px] h-[21px]": size === "medium",
+                        "w-[21px] h-[21px]": size === "medium" || size === "large",
                         "w-[19px] h-[19px]": size === "small",
-                        [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium",
+                        [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
                         [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
                     }
                 )}

package/src/components/BooleanSwitchWithLabel.tsx

@@ -6,7 +6,7 @@ import {
     focusedClasses
 } from "../styles";
 import { BooleanSwitch, BooleanSwitchProps } from "./BooleanSwitch";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     position?: "start" | "end",
@@ -53,14 +53,14 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
             onFocus={onFocus}
             onBlur={onBlur}
             tabIndex={-1}
-            className={cn(
+            className={cls(
                 !invisible && fieldBackgroundMixin,
                 !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin),
                 disabled ? "cursor-default" : "cursor-pointer",
-                "rounded-md relative max-w-full justify-between w-full box-border relative inline-flex items-center",
+                "rounded-md max-w-full justify-between w-full box-border relative inline-flex items-center",
                 !invisible && focus && !disabled ? focusedClasses : "",
                 error ? "text-red-500 dark:text-red-600" : (focus && !disabled ? "text-primary" : (!disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark")),
-                size === "small" ? "min-h-[40px]" : "min-h-[64px]",
+                size === "small" ? "min-h-[40px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
                 size === "small" ? "pl-2" : "pl-4",
                 size === "small" ? "pr-4" : "pr-6",
                 position === "end" ? "flex-row-reverse" : "flex-row"
@@ -86,7 +86,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 {...props}
             />
 
-            <div className={cn(
+            <div className={cls(
                 "flex-grow",
                 position === "end" ? "mr-4" : "ml-4",
                 size === "small" ? "text-sm" : "text-base"

package/src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ButtonProps<P extends React.ElementType> =
     Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
@@ -32,9 +32,9 @@ const ButtonInner = React.forwardRef<
    }: ButtonProps<any>, ref) => {
 
     const baseClasses =
-        "h-fit rounded-md uppercase inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
+        "h-fit rounded-md uppercase whitespace-nowrap inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
 
-    const buttonClasses = cn({
+    const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
         // Filled Variants
@@ -50,7 +50,7 @@ const ButtonInner = React.forwardRef<
         // Outlined Variants
         "border border-primary text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
         "border border-secondary text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
-        "border border-red-500 text-red-500 hover:bg-red-500": variant === "outlined" && color === "error" && !disabled,
+        "border border-red-500 text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
         "border border-slate-400 text-text-primary dark:text-text-primary-dark hover:bg-slate-200": variant === "outlined" && color === "text" && !disabled,
         // Disabled states for all variants
         "border border-transparent opacity-50": variant === "text" && disabled,
@@ -58,7 +58,7 @@ const ButtonInner = React.forwardRef<
         "border border-gray-500 bg-gray-500 opacity-50": variant === "filled" && disabled,
     });
 
-    const sizeClasses = cn(
+    const sizeClasses = cls(
         {
             "py-1 px-2": size === "small",
             "py-2 px-4": size === "medium",
@@ -73,7 +73,7 @@ const ButtonInner = React.forwardRef<
             <Component
                 ref={ref}
                 onClick={props.onClick}
-                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 {...(props as React.ComponentPropsWithRef<any>)}>
                 {startIcon}
                 {children}
@@ -85,7 +85,7 @@ const ButtonInner = React.forwardRef<
         <button ref={ref as any}
                 type={props.type ?? "button"}
                 onClick={props.onClick}
-                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 disabled={disabled}
                 {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}>
             {startIcon}

package/src/components/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { cardClickableMixin, cardMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 type CardProps = {
     children: React.ReactNode;
@@ -29,7 +29,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(({
             role={onClick ? "button" : undefined}
             tabIndex={onClick ? 0 : undefined}
             onClick={onClick}
-            className={cn(cardMixin, onClick && focusedMixin, onClick && cardClickableMixin, className)}
+            className={cls(cardMixin, onClick && focusedMixin, onClick && cardClickableMixin, className)}
             style={style}
             {...props}>
             {children}

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,13 +2,15 @@ import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 import { Icon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 
-interface CheckboxProps {
+export interface CheckboxProps {
     checked: boolean;
+    id?: string;
     disabled?: boolean;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    padding?: boolean;
     size?: "tiny" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
@@ -21,11 +23,17 @@ const sizeClasses = {
 };
 
 const outerSizeClasses = {
-    medium: "w-10 h-10 p-2",
-    small: "w-8 h-8 p-2",
-    large: "w-12 h-12 p-2",
+    medium: "w-10 h-10",
+    small: "w-8 h-8",
+    large: "w-12 h-12 ",
     tiny: "w-6 h-6"
 }
+const paddingClasses = {
+    medium: "p-2",
+    small: "p-2",
+    large: "p-2",
+    tiny: ""
+}
 
 const colorClasses = {
     primary: "bg-primary",
@@ -33,8 +41,10 @@ const colorClasses = {
 }
 
 export const Checkbox = ({
+                             id,
                              checked,
                              indeterminate = false,
+                             padding = true,
                              disabled,
                              size = "medium",
                              onCheckedChange,
@@ -51,19 +61,21 @@ export const Checkbox = ({
                 ? 14
                 : 24;
     return (
-        <div className={cn(
-            outerSizeClasses[size],
-            "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-            onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
-            onCheckedChange ? "cursor-pointer" : "cursor-default"
-        )}>
-            <CheckboxPrimitive.Root
-                asChild
-                checked={indeterminate || isChecked}
-                disabled={disabled}
-                onCheckedChange={disabled ? undefined : onCheckedChange}>
+        <CheckboxPrimitive.Root
+            id={id}
+            checked={indeterminate || isChecked}
+            disabled={disabled}
+            onCheckedChange={disabled ? undefined : onCheckedChange}>
+
+            <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",
+                onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
+                onCheckedChange ? "cursor-pointer" : "cursor-default"
+            )}>
                 <div
-                    className={cn(
+                    className={cls(
                         "border-2 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled
@@ -84,12 +96,7 @@ export const Checkbox = ({
                             )}
                     </CheckboxPrimitive.Indicator>
                 </div>
-            </CheckboxPrimitive.Root>
-            {/*{indeterminate && (*/}
-            {/*    <div >*/}
-            {/*         YO*/}
-            {/*    </div>*/}
-            {/*)}*/}
-        </div>
+            </div>
+        </CheckboxPrimitive.Root>
     );
 };

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;
@@ -42,7 +42,7 @@ export function Chip({
     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 w-fit h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
                 sizeClassNames[size],

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>