@firecms/ui 3.0.0-canary.16 → 3.0.0-canary.160

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 focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
+export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-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 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 fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
+export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
+export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
+export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
+export declare const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
+export declare const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
+export declare const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 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,121 +1,122 @@
 {
-    "name": "@firecms/ui",
-    "type": "module",
-    "version": "3.0.0-canary.16",
-    "description": "Awesome Firebase/Firestore-based headless open-source CMS",
-    "funding": {
-        "url": "https://github.com/sponsors/firecmsco"
+  "name": "@firecms/ui",
+  "type": "module",
+  "version": "3.0.0-canary.160",
+  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
+  "funding": {
+    "url": "https://github.com/sponsors/firecmsco"
+  },
+  "author": "FireCMS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firecmsco/firecms.git",
+    "directory": "packages/ui"
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "source": "src/index.ts",
+  "engines": {
+    "node": ">=14"
+  },
+  "keywords": [
+    "firebase",
+    "cms",
+    "admin",
+    "admin panel",
+    "firebase panel",
+    "firestore",
+    "headless",
+    "headless cms",
+    "content manager"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
     },
-    "author": "FireCMS",
-    "license": "MIT",
-    "repository": "git@github.com:FireCMSco/firecms.git",
-    "main": "./dist/index.umd.js",
-    "module": "./dist/index.es.js",
-    "types": "./dist/index.d.ts",
-    "source": "src/index.ts",
-    "engines": {
-        "node": ">=14"
-    },
-    "keywords": [
-        "firebase",
-        "cms",
-        "admin",
-        "admin panel",
-        "firebase panel",
-        "firestore",
-        "headless",
-        "headless cms",
-        "content manager"
-    ],
-    "exports": {
-        ".": {
-            "import": "./dist/index.es.js",
-            "require": "./dist/index.umd.js",
-            "types": "./dist/index.d.ts"
-        },
-        "./package.json": "./package.json",
-        "./tailwind.config.js": "./tailwind.config.js"
-    },
-    "scripts": {
-        "watch": "vite build --watch",
-        "build": "vite build && tsc --emitDeclarationOnly",
-        "prepublishOnly": "run-s build",
-        "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
-        "test:lint": "eslint \"src/**\" --quiet",
-        "test": "jest",
-        "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
-        "generateIcons": "ts-node --esm src/scripts/generateIcons.ts"
-    },
-    "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",
-        "cmdk": "^0.2.1",
-        "react-datepicker": "^6.4.0",
-        "react-dropzone": "^14.2.3",
-        "react-fast-compare": "^3.2.2",
-        "tailwind-merge": "^2.2.2"
-    },
-    "peerDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "devDependencies": {
-        "@jest/globals": "^29.7.0",
-        "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/react": "^14.2.1",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/jest": "^29.5.12",
-        "@types/node": "^20.11.30",
-        "@types/object-hash": "^3.0.6",
-        "@types/react": "^18.2.67",
-        "@types/react-dom": "^18.2.22",
-        "@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",
-        "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",
-        "jest": "^29.7.0",
-        "npm-run-all": "^4.1.5",
-        "ts-jest": "^29.1.2",
-        "ts-node": "^10.9.2",
-        "tsd": "^0.30.7",
-        "typescript": "^5.4.2",
-        "vite": "^5.2.3"
-    },
-    "files": [
-        "dist",
-        "src",
-        "tailwind.config.js"
-    ],
-    "gitHead": "6c7d1dd64fa4b9f31433ab6dd938835589e8a25a",
-    "publishConfig": {
-        "access": "public"
-    }
+    "./package.json": "./package.json",
+    "./tailwind.config.js": "./tailwind.config.js",
+    "./index.css": "./dist/index.css",
+    "./dist/index.css": "./dist/index.css"
+  },
+  "scripts": {
+    "watch": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "prepublishOnly": "run-s build",
+    "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
+    "test:lint": "eslint \"src/**\" --quiet",
+    "test": "jest",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
+    "generateIcons": "bun --esm src/scripts/generateIcons.ts"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^0.2.1",
+    "date-fns": "^3.6.0",
+    "markdown-it": "^14.1.0",
+    "material-icons": "^1.13.12",
+    "react-dropzone": "^14.3.5",
+    "react-fast-compare": "^3.2.2",
+    "tailwind-merge": "^2.5.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.17.9",
+    "@types/object-hash": "^3.0.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-measure": "^2.0.12",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "beta",
+    "cross-env": "^7.0.3",
+    "eslint-plugin-react-compiler": "beta",
+    "firebase": "^10.14.1",
+    "jest": "^29.7.0",
+    "npm-run-all": "^4.1.5",
+    "rollup-preserve-directives": "^1.1.3",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "tsd": "^0.31.2",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-plugin-static-copy": "^1.0.6"
+  },
+  "files": [
+    "dist",
+    "src",
+    "index.css",
+    "tailwind.config.js"
+  ],
+  "gitHead": "840f2733672a90a6a56aed89259eaa5365589512",
+  "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;
@@ -34,7 +34,7 @@ const getColorClasses = (severity: string) => {
             return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
         case "base":
         default:
-            return "bg-slate-50 dark:bg-slate-800 dark:text-white text-slate-900";
+            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
     }
 };
 
@@ -52,7 +52,7 @@ export const Alert: React.FC<AlertProps> = ({
     return (
         <div
             style={style}
-            className={cn(
+            className={cls(
                 getSizeClasses(size),
                 "w-full",
                 "font-medium",
@@ -61,7 +61,7 @@ export const Alert: React.FC<AlertProps> = ({
                 className)}>
             <div className={"flex-grow"}>{children}</div>
             {onDismiss && (
-                <button className="text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-400"
+                <button className="text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400"
                         onClick={onDismiss}>
                     &times;
                 </button>

package/src/components/Autocomplete.tsx

@@ -1,8 +1,10 @@
+"use client";
 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,16 +51,16 @@ 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"
+                 "bg-surface-accent-50 dark:bg-surface-accent-900 py-2"
              )}>
             {children}
         </div>
@@ -78,7 +80,7 @@ export function AutocompleteItem({
 
     return (
         <div
-            className="flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800"
+            className="flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800"
             onClick={onClick}>
             {children}
         </div>

package/src/components/Avatar.tsx

@@ -1,12 +1,13 @@
-import React from "react";
-import { cn } from "../util";
-import { focusedMixin } from "../styles";
+"use client";
+import React, { useState } from "react";
+import { cls } from "../util";
 
 export interface AvatarProps {
     src?: string;
     alt?: string;
     children?: React.ReactNode;
     className?: string;
+    outerClassName?: string;
     style?: React.CSSProperties;
 }
 
@@ -17,37 +18,51 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
         children,
         className,
         style,
+        outerClassName,
         ...props
-    }, ref) => {
+    },
+    ref
+) => {
+    const [isImageError, setIsImageError] = useState(false);
+
+    const handleImageError = () => {
+        setIsImageError(true);
+    };
 
     return (
         <button
             ref={ref}
             style={style}
             {...props}
-            className={cn("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",
-            )}>
-            {src
-                ? (
-                    <img className={cn(
-                        "bg-slate-100 dark:bg-slate-800",
+            className={cls(
+                "rounded-full flex items-center justify-center overflow-hidden",
+                "p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12",
+                outerClassName
+            )}
+        >
+            {src && !isImageError ? (
+                <img
+                    className={cls(
+                        "bg-surface-accent-100 dark:bg-surface-accent-800",
                         "w-full h-full object-cover rounded-full",
-                        className)}
-                         src={src}
-                         alt={alt}/>
-                )
-                : (
-                    <span
-                        className={cn(
-                            "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",
-                            className)}>
-                        {children}
-                    </span>
-                )}
+                        className
+                    )}
+                    src={src}
+                    alt={alt}
+                    onError={handleImageError}
+                />
+            ) : (
+                <span
+                    className={cls(
+                        "bg-surface-accent-100 dark:bg-surface-accent-800",
+                        "flex items-center justify-center",
+                        "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full",
+                        className
+                    )}
+                >
+          {children}
+        </span>
+            )}
         </button>
     );
 };

package/src/components/Badge.tsx

@@ -17,7 +17,7 @@ const getColor = (color: BadgeColor) => {
         case "error":
             return "bg-red-500";
         default:
-            return "bg-slate-300 dark:bg-slate-700";
+            return "bg-surface-accent-300 dark:bg-surface-accent-700";
     }
 }
 
@@ -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,12 @@
+"use client";
 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,25 +40,25 @@ 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
-                    ? "bg-white bg-opacity-54 dark:bg-slate-950 border-slate-100 dark:border-slate-700 ring-1 ring-slate-200 dark:ring-slate-700"
-                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-slate-700",
+                    ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700"
+                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700",
                 className
             )}
             {...props}
         >
             {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",
+                    disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-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 +66,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"),
+                    disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-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

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import {
     fieldBackgroundDisabledMixin,
@@ -6,7 +7,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",
@@ -14,6 +15,9 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     label?: React.ReactNode,
     error?: boolean,
     autoFocus?: boolean,
+    fullWidth?: boolean,
+    className?: string,
+    inputClassName?: string,
 };
 
 /**
@@ -30,6 +34,9 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                                                                           autoFocus,
                                                                           disabled,
                                                                           size,
+                                                                          className,
+                                                                          fullWidth = true,
+                                                                          inputClassName,
                                                                           ...props
                                                                       }: BooleanSwitchWithLabelProps) {
 
@@ -53,23 +60,25 @@ 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 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"
+                position === "end" ? "flex-row-reverse" : "flex-row",
+                fullWidth ? "w-full" : "",
+                className
             )}
             onClick={disabled ? undefined : (e) => {
                 if (props.allowIndeterminate) {
                     if (value === null || value === undefined) onValueChange?.(true)
                     else if (value) onValueChange?.(false)
-                    else onValueChange?.(null as any); // TODO: fix this
+                    else onValueChange?.(null as any);
                 } else {
                     onValueChange?.(!value);
                 }
@@ -81,12 +90,12 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 value={value}
                 ref={refInput}
                 size={size}
-                className={invisible && focus ? focusedClasses : ""}
+                className={cls(invisible && focus ? focusedClasses : "", inputClassName)}
                 disabled={disabled}
                 {...props}
             />
 
-            <div className={cn(
+            <div className={cls(
                 "flex-grow",
                 position === "end" ? "mr-4" : "ml-4",
                 size === "small" ? "text-sm" : "text-base"