@firecms/ui 3.0.0-canary.135 → 3.0.0-canary.137

package/README.md

@@ -89,7 +89,7 @@ navigating through **subcollections** and accessing custom views (such as custom
 forms or blog previews). This functionality can also be accessed
 programmatically using the `useSideEntityController` hook.
 
-FireCMS includes **over 15 built-in fields** with numerous customization and
+FireCMS includes **over 20 built-in fields** with numerous customization and
 validation options. The components have been carefully designed for an
 outstanding user experience, including advanced features like **references** to
 other collections, **markdown**, and **array reordering**.

package/dist/index.css

@@ -60,7 +60,7 @@
 }
 
 .typography-button {
-    @apply text-sm font-medium;
+    @apply text-sm font-semibold uppercase;
 }
 
 
@@ -71,7 +71,3 @@
 a {
     @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
 }
-
-body {
-    @apply w-full min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center;
-}

package/dist/index.es.js

@@ -33,9 +33,9 @@ const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:b
 const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
 const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
 const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
-const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
-const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-50 m-1 -p-1";
+const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
+const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
+const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-40 m-1 -p-1";
 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";
 const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
 function cls(...classes) {
@@ -389,7 +389,7 @@ const AvatarInner = ({
       ...props,
       className: cls(
         "rounded-full flex items-center justify-center overflow-hidden",
-        "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12",
+        "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12 min-w-12 min-h-12",
         outerClassName
       ),
       children: src ? /* @__PURE__ */ jsx(
@@ -571,7 +571,7 @@ const ButtonInner = React__default.forwardRef(({
   color = "primary",
   ...props
 }, ref) => {
-  const baseClasses2 = "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 baseClasses2 = "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2";
   const buttonClasses2 = cls({
     "w-full": fullWidth,
     "w-fit": !fullWidth,
@@ -13917,7 +13917,7 @@ const DateTimeField = ({
                 clearable ? "pr-14" : "pr-12",
                 "rounded-md",
                 size === "small" ? "min-h-[48px]" : "min-h-[64px]",
-                label ? "pt-[28px] pb-2" : "py-2",
+                label ? "pt-8 pb-2" : "py-2",
                 inputClassName,
                 disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-600 dark:text-slate-500"
               )
@@ -14931,7 +14931,7 @@ function DialogContent({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cls("py-6 px-6 h-full flex-grow", className),
+      className: cls("my-6 mx-6 h-full flex-grow", className),
       children
     }
   );
@@ -14940,14 +14940,14 @@ function DialogTitle({
   children,
   hidden,
   className,
-  variant = "h4",
+  variant = "subtitle2",
   ...props
 }) {
   const title = /* @__PURE__ */ jsx(DialogPrimitive.Title, { asChild: true, children: /* @__PURE__ */ jsx(
     Typography,
     {
       variant,
-      className,
+      className: cls("mt-8 mb-6 mx-6", className),
       ...props,
       children
     }
@@ -15034,6 +15034,8 @@ function ExpandablePanel({
               "rounded-t flex items-center justify-between w-full min-h-[52px]",
               "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
               invisible ? "border-b px-2" : "p-4",
+              open ? "py-6" : "py-4",
+              "transition-all duration-200",
               invisible && defaultBorderMixin,
               asField && fieldBackgroundMixin,
               titleClassName
@@ -15569,7 +15571,7 @@ const MultiSelect = React.forwardRef(
     invisible,
     disabled,
     placeholder,
-    modalPopover = false,
+    modalPopover = true,
     includeClear = true,
     useChips = true,
     className,
@@ -16037,7 +16039,7 @@ const Select = forwardRef(({
       onChange(event);
     }
   }, [onChange, value, onValueChange]);
-  const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
+  const hasValue = Array.isArray(value) ? value.length > 0 : value != null && value !== "" && value !== void 0;
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Root,
     {
@@ -16053,84 +16055,78 @@ const Select = forwardRef(({
       ...props,
       children: [
         typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ 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
+        ), children: /* @__PURE__ */ jsxs(
+          SelectPrimitive.Trigger,
           {
+            ref: inputRef,
+            id,
             className: cls(
-              size === "small" ? "min-h-[42px]" : "min-h-[64px]",
+              "w-full h-full",
+              size === "small" ? "h-[42px]" : "h-[64px]",
+              padding ? "px-4 " : "",
+              "outline-none focus:outline-none",
               "select-none rounded-md text-sm",
-              invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
-              disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-              "relative flex items-center",
-              className
+              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-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-white",
+              "relative flex flex-row items-center",
+              inputClassName
             ),
             children: [
-              /* @__PURE__ */ jsxs(
-                SelectPrimitive.Trigger,
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  ref: inputRef,
-                  id,
+                  ref,
                   className: cls(
-                    "w-full h-full",
-                    size === "small" ? "h-[42px]" : "h-[64px]",
-                    padding ? "px-4 " : "",
-                    "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-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-white",
-                    "relative flex items-center",
-                    inputClassName
+                    "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
+                    "overflow-visible",
+                    size === "small" ? "h-[42px]" : "h-[64px]"
                   ),
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        ref,
-                        className: cls(
-                          "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
-                          "overflow-visible",
-                          size === "small" ? "h-[42px]" : "h-[64px]"
-                        ),
-                        children: /* @__PURE__ */ jsxs(
-                          SelectPrimitive.Value,
-                          {
-                            onClick: (e) => {
-                              e.preventDefault();
-                              e.stopPropagation();
-                            },
-                            placeholder,
-                            className: "w-full",
-                            children: [
-                              hasValue && value && renderValue ? renderValue(value) : placeholder,
-                              hasValue && !renderValue && value
-                            ]
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(SelectPrimitive.Icon, { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(ExpandMoreIcon, { size: "small", className: cls("transition", open ? "rotate-180" : "") }) })
-                  ]
+                  children: /* @__PURE__ */ jsxs(
+                    SelectPrimitive.Value,
+                    {
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      },
+                      placeholder,
+                      className: "w-full",
+                      children: [
+                        hasValue && value && renderValue ? renderValue(value) : placeholder,
+                        hasValue && !renderValue && value
+                      ]
+                    }
+                  )
                 }
               ),
               endAdornment && /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14"),
+                  className: cls("h-full flex items-center"),
                   onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                   },
                   children: endAdornment
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+                ExpandMoreIcon,
+                {
+                  size: "small",
+                  className: cls("px-2 transition", open ? "rotate-180" : "")
+                }
+              ) })
             ]
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
           SelectPrimitive.Content,
           {
@@ -16162,10 +16158,6 @@ function SelectItem({
     {
       value,
       disabled,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
       className: cls(
         "w-full",
         "relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
@@ -16345,8 +16337,7 @@ const Sheet = ({
             ),
             style: {
               pointerEvents: displayed ? "auto" : "none"
-            },
-            onClick: () => onOpenChange && onOpenChange(false)
+            }
           }
         ),
         /* @__PURE__ */ jsx(
@@ -16661,7 +16652,7 @@ function TextField({
       style: inputStyle,
       className: cls(
         invisible ? focusedInvisibleMixin : "",
-        "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-[28px]",
+        "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
         disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
       )
     }
@@ -16679,7 +16670,7 @@ function TextField({
         invisible ? focusedInvisibleMixin : "",
         disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
         size === "smallest" ? "min-h-[32px]" : size === "small" ? "min-h-[48px]" : "min-h-[64px]",
-        label ? size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2" : "py-2",
+        label ? size === "medium" ? "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-slate-800 dark:text-white",