@firecms/ui 3.0.0-canary.105 → 3.0.0-canary.107

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-canary.105",
+    "version": "3.0.0-canary.107",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -102,7 +102,7 @@
         "src",
         "tailwind.config.js"
     ],
-    "gitHead": "e5b79b1a4af2fd750b9e8c8f73052322aa3e86ab",
+    "gitHead": "07f66833d1cc898c000b92029a8c33992a1dea55",
     "publishConfig": {
         "access": "public"
     }

package/src/components/BooleanSwitch.tsx

@@ -5,7 +5,7 @@ export type BooleanSwitchProps = {
     value: boolean | null;
     className?: string;
     disabled?: boolean;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium";
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;
@@ -20,7 +20,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                                                                          className,
                                                                          onValueChange,
                                                                          disabled = false,
-                                                                         size = "medium",
+                                                                         size = "small",
                                                                          ...props
                                                                      }: BooleanSwitchProps, ref: React.Ref<HTMLButtonElement>) {
         return <button
@@ -40,7 +40,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                     }
                 }}
             className={cls(
-                size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
+                size === "smallest" ? "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"
@@ -55,10 +55,10 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                     "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" || size === "large",
-                        "w-[19px] h-[8px]": size === "small",
-                        "translate-x-[10px]": size === "medium" || size === "large",
-                        "translate-x-[9px]": size === "small"
+                        "w-[21px] h-[10px]": size === "small" || size === "medium",
+                        "w-[19px] h-[8px]": size === "smallest",
+                        "translate-x-[10px]": size === "small" || size === "medium",
+                        "translate-x-[9px]": size === "smallest"
                     }
                 )}
             />}
@@ -69,10 +69,10 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                     "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" || size === "large",
-                        "w-[19px] h-[19px]": size === "small",
-                        [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
-                        [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
+                        "w-[21px] h-[21px]": size === "small" || size === "medium",
+                        "w-[19px] h-[19px]": size === "smallest",
+                        [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "small" || size === "medium",
+                        [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "smallest"
                     }
                 )}
             />}

package/src/components/BooleanSwitchWithLabel.tsx

@@ -60,9 +60,9 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 "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]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
-                size === "small" ? "pl-2" : "pl-4",
-                size === "small" ? "pr-4" : "pr-6",
+                size === "smallest" ? "min-h-[40px]" : (size === "small" ? "min-h-[48px]" : "min-h-[64px]"),
+                size === "smallest" ? "pl-2" : "pl-4",
+                size === "smallest" ? "pr-4" : "pr-6",
                 position === "end" ? "flex-row-reverse" : "flex-row"
             )}
             onClick={disabled ? undefined : (e) => {
@@ -89,7 +89,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
             <div className={cls(
                 "flex-grow",
                 position === "end" ? "mr-4" : "ml-4",
-                size === "small" ? "text-sm" : "text-base"
+                size === "smallest" ? "text-sm" : "text-base"
             )}>
                 {label}
             </div>

package/src/components/Checkbox.tsx

@@ -11,7 +11,7 @@ export interface CheckboxProps {
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     padding?: boolean;
-    size?: "tiny" | "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
 
@@ -19,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 = {
@@ -57,7 +57,7 @@ export const Checkbox = ({
         ? 20
         : size === "small"
             ? 16
-            : size === "tiny"
+            : size === "smallest"
                 ? 14
                 : 24;
     return (

package/src/components/Chip.tsx

@@ -11,7 +11,7 @@ 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;
@@ -21,7 +21,7 @@ export interface ChipProps {
 }
 
 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"
 }

package/src/components/TextField.tsx

@@ -70,7 +70,6 @@ export function TextField<T extends string | number>({
                                                          ...inputProps
                                                      }: TextFieldProps<T>) {
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const inputRef = inputRefProp ?? useRef(null);
 
     // @ts-ignore
@@ -106,8 +105,6 @@ export function TextField<T extends string | number>({
             placeholder={focused || hasValue || !label ? placeholder : undefined}
             autoFocus={autoFocus}
             rows={rows}
-            // onFocus={() => setFocused(true)}
-            // onBlur={() => setFocused(false)}
             value={value ?? ""}
             onChange={onChange}
             style={inputStyle}