@firecms/ui 3.0.0-canary.150 → 3.0.0-canary.152

package/dist/index.umd.js

@@ -427,7 +427,7 @@
       className,
       onValueChange,
       disabled = false,
-      size = "small",
+      size = "medium",
       ...props
     }, ref) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -447,7 +447,7 @@
             }
           },
           className: cls(
-            size === "smallest" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
+            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-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
@@ -461,10 +461,10 @@
                   "block rounded-full transition-transform duration-100 transform will-change-auto",
                   disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
                   {
-                    "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"
+                    "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"
                   }
                 )
               },
@@ -477,10 +477,10 @@
                   "block rounded-full transition-transform duration-100 transform will-change-auto",
                   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 === "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"
+                    "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"
                   }
                 )
               },
@@ -528,9 +528,9 @@
           "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 === "smallest" ? "min-h-[40px]" : size === "small" ? "min-h-[48px]" : "min-h-[64px]",
-          size === "smallest" ? "pl-2" : "pl-4",
-          size === "smallest" ? "pr-4" : "pr-6",
+          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",
           fullWidth ? "w-full" : "",
           className
@@ -559,7 +559,7 @@
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls(
             "flex-grow",
             position === "end" ? "mr-4" : "ml-4",
-            size === "smallest" ? "text-sm" : "text-base"
+            size === "small" ? "text-sm" : "text-base"
           ), children: label })
         ]
       }
@@ -13633,9 +13633,9 @@
     );
   };
   const sizeClassNames = {
-    smallest: "px-2 py-0.5 text-sm",
-    small: "px-3 py-1 text-sm",
-    medium: "px-4 py-1.5 text-sm"
+    small: "px-2 py-0.5 text-sm",
+    medium: "px-3 py-1 text-sm",
+    large: "px-4 py-1.5 text-sm"
   };
   function Chip({
     children,
@@ -13644,7 +13644,7 @@
     outlined,
     onClick,
     icon,
-    size = "medium",
+    size = "large",
     className,
     style
   }) {
@@ -13859,7 +13859,7 @@
     clearable,
     mode = "date",
     error,
-    size = "medium",
+    size = "large",
     className,
     style,
     inputClassName,
@@ -13923,8 +13923,8 @@
             !invisible && fieldBackgroundMixin,
             disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
             {
-              "min-h-[48px]": size === "small",
-              "min-h-[64px]": size === "medium"
+              "min-h-[48px]": size === "medium",
+              "min-h-[64px]": size === "large"
             },
             className
           ),
@@ -13961,7 +13961,7 @@
                   "w-full outline-none bg-transparent leading-normal text-base px-3",
                   clearable ? "pr-14" : "pr-12",
                   "rounded-md",
-                  size === "small" ? "min-h-[48px]" : "min-h-[64px]",
+                  size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
                   label ? "pt-8 pb-2" : "py-2",
                   inputClassName,
                   disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
@@ -13991,9 +13991,9 @@
         }
       ),
       invalidValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { size: "small", color: "error" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { size: "medium", color: "error" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "font-medium", children: "Invalid date value for this field" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "font-large", children: "Invalid date value for this field" }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
         ] })
       ] })
@@ -14311,8 +14311,8 @@
           "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",
+            "h-44": size === "large",
+            "h-28": size === "medium",
             "cursor-pointer": !disabled,
             [fieldBackgroundHoverMixin]: !isDragActive,
             "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
@@ -14906,7 +14906,7 @@
                             return /* @__PURE__ */ jsxRuntime.jsxs(
                               Chip,
                               {
-                                size: "small",
+                                size: "medium",
                                 className: cls("flex flex-row items-center p-1"),
                                 children: [
                                   option?.children,
@@ -14987,8 +14987,8 @@
                         /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" }),
                         /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
                           /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." }),
-                          includeSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsxs(
+                          /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
+                            includeSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
                               cmdk.Command.Item,
                               {
                                 onSelect: toggleAll,
@@ -15227,7 +15227,7 @@
     placeholder,
     renderValue,
     label,
-    size = "medium",
+    size = "large",
     error,
     disabled,
     padding = true,
@@ -15270,12 +15270,16 @@
         children: [
           typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls(
-            size === "small" ? "min-h-[42px]" : "min-h-[64px]",
             "select-none rounded-md text-sm",
             invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
             disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
             "relative flex items-center",
-            className
+            className,
+            {
+              "min-h-[28px]": size === "small",
+              "min-h-[42px]": size === "medium",
+              "min-h-[64px]": size === "large"
+            }
           ), children: /* @__PURE__ */ jsxRuntime.jsxs(
             SelectPrimitive__namespace.Trigger,
             {
@@ -15283,14 +15287,22 @@
               id,
               className: cls(
                 "w-full h-full",
-                size === "small" ? "h-[42px]" : "h-[64px]",
-                padding ? "px-4 " : "",
+                padding ? {
+                  "px-4": size === "large",
+                  "px-3": size === "medium",
+                  "px-2": size === "small"
+                } : "",
                 "outline-none focus:outline-none",
                 "select-none rounded-md text-sm",
                 error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                 error ? "border border-red-500 dark:border-red-600" : "",
                 disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
                 "relative flex flex-row items-center",
+                {
+                  "min-h-[28px]": size === "small",
+                  "min-h-[42px]": size === "medium",
+                  "min-h-[64px]": size === "large"
+                },
                 inputClassName
               ),
               children: [
@@ -15301,7 +15313,11 @@
                     className: cls(
                       "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
                       "overflow-visible",
-                      size === "small" ? "h-[42px]" : "h-[64px]"
+                      {
+                        "min-h-[28px]": size === "small",
+                        "min-h-[42px]": size === "medium",
+                        "min-h-[64px]": size === "large"
+                      }
                     ),
                     children: /* @__PURE__ */ jsxRuntime.jsxs(
                       SelectPrimitive__namespace.Value,
@@ -15314,7 +15330,15 @@
                         className: "w-full",
                         children: [
                           hasValue && value && renderValue ? renderValue(value) : placeholder,
-                          hasValue && !renderValue && value
+                          hasValue && !renderValue && (() => {
+                            const childrenProps = React.Children.map(children, (child) => {
+                              if (React.isValidElement(child)) {
+                                return child.props;
+                              }
+                            }).filter(Boolean);
+                            const option = childrenProps.find((o) => o.value === value);
+                            return option?.children;
+                          })()
                         ]
                       }
                     )
@@ -15334,8 +15358,11 @@
                 /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   ExpandMoreIcon,
                   {
-                    size: "small",
-                    className: cls("px-2 transition", open ? "rotate-180" : "")
+                    size: "medium",
+                    className: cls("transition", open ? "rotate-180" : "", {
+                      "px-2": size === "large",
+                      "px-1": size === "medium" || size === "small"
+                    })
                   }
                 ) })
               ]
@@ -15828,7 +15855,7 @@
     endAdornment,
     autoFocus,
     placeholder,
-    size = "medium",
+    size = "large",
     className,
     style,
     inputClassName,
@@ -15883,8 +15910,8 @@
           "rounded-md",
           invisible ? focusedInvisibleMixin : "",
           disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-          size === "smallest" ? "min-h-[32px]" : size === "small" ? "min-h-[48px]" : "min-h-[64px]",
-          label ? size === "medium" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2",
+          size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
+          label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2",
           focused ? "text-text-primary dark:text-text-primary-dark" : "",
           endAdornment ? "pr-10" : "pr-3",
           disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
@@ -15908,9 +15935,9 @@
           disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
           error ? "border border-red-500 dark:border-red-600" : "",
           {
-            "min-h-[32px]": !invisible && size === "smallest",
-            "min-h-[48px]": !invisible && size === "small",
-            "min-h-[64px]": !invisible && size === "medium"
+            "min-h-[32px]": !invisible && size === "small",
+            "min-h-[48px]": !invisible && size === "medium",
+            "min-h-[64px]": !invisible && size === "large"
           },
           className
         ),
@@ -15921,7 +15948,7 @@
             {
               className: cls(
                 "pointer-events-none absolute",
-                size === "medium" ? "top-1" : "-top-1",
+                size === "large" ? "top-1" : "-top-1",
                 !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600",
                 disabled ? "opacity-50" : ""
               ),
@@ -15933,7 +15960,11 @@
           endAdornment && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4 ",
+              className: cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
+                "mr-4": size === "large",
+                "mr-3": size === "medium",
+                "mr-2": size === "small"
+              }),
               children: endAdornment
             }
           )