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

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("date-fns/locale"), require("react-datepicker"), require("@radix-ui/react-checkbox"), require("material-icons/iconfont/filled.css"), require("@radix-ui/react-label"), require("@radix-ui/react-dialog"), require("react-dropzone"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("cmdk"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("@radix-ui/react-separator"), require("react-dom"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-tabs"), require("@radix-ui/react-popover")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "date-fns/locale", "react-datepicker", "@radix-ui/react-checkbox", "material-icons/iconfont/filled.css", "@radix-ui/react-label", "@radix-ui/react-dialog", "react-dropzone", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "cmdk", "@radix-ui/react-radio-group", "@radix-ui/react-select", "@radix-ui/react-separator", "react-dom", "@radix-ui/react-tooltip", "@radix-ui/react-tabs", "@radix-ui/react-popover"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.locales, global.DatePicker, global.CheckboxPrimitive, null, global.LabelPrimitive, global.DialogPrimitive, global.reactDropzone, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.cmdk, global.RadioGroupPrimitive, global.SelectPrimitive, global.SeparatorPrimitive, global.ReactDOM, global.TooltipPrimitive, global.TabsPrimitive, global.PopoverPrimitive));
-})(this, function(exports2, jsxRuntime, React, Collapsible, clsx, tailwindMerge, locales, DatePicker, CheckboxPrimitive, filled_css, LabelPrimitive, DialogPrimitive, reactDropzone, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, cmdk, RadioGroupPrimitive, SelectPrimitive, SeparatorPrimitive, ReactDOM, TooltipPrimitive, TabsPrimitive, PopoverPrimitive) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("date-fns/locale"), require("react-datepicker"), require("@radix-ui/react-checkbox"), require("material-icons/iconfont/filled.css"), require("@radix-ui/react-dialog"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("cmdk"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("@radix-ui/react-separator"), require("react-dom"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-tabs"), require("@radix-ui/react-popover")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "date-fns/locale", "react-datepicker", "@radix-ui/react-checkbox", "material-icons/iconfont/filled.css", "@radix-ui/react-dialog", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "cmdk", "@radix-ui/react-radio-group", "@radix-ui/react-select", "@radix-ui/react-separator", "react-dom", "@radix-ui/react-tooltip", "@radix-ui/react-tabs", "@radix-ui/react-popover"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.locales, global.DatePicker, global.CheckboxPrimitive, null, global.DialogPrimitive, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.cmdk, global.RadioGroupPrimitive, global.SelectPrimitive, global.SeparatorPrimitive, global.ReactDOM, global.TooltipPrimitive, global.TabsPrimitive, global.PopoverPrimitive));
+})(this, function(exports2, jsxRuntime, React, Collapsible, clsx, tailwindMerge, locales, DatePicker, CheckboxPrimitive, filled_css, DialogPrimitive, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, cmdk, RadioGroupPrimitive, SelectPrimitive, SeparatorPrimitive, ReactDOM, TooltipPrimitive, TabsPrimitive, PopoverPrimitive) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -22,8 +22,8 @@
   const Collapsible__namespace = /* @__PURE__ */ _interopNamespaceDefault(Collapsible);
   const locales__namespace = /* @__PURE__ */ _interopNamespaceDefault(locales);
   const CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
-  const LabelPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(LabelPrimitive);
   const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
+  const LabelPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(LabelPrimitive);
   const DropdownMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenu);
   const MenubarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(MenubarPrimitive);
   const RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
@@ -39,7 +39,7 @@
   const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
   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-60";
+  const fieldBackgroundHoverMixin = "hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
   const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
   const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
   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";
@@ -13651,7 +13651,7 @@
       "div",
       {
         className: cls(
-          "rounded-lg w-fit h-fit font-regular inline-flex gap-1",
+          "rounded-lg w-max h-fit font-regular inline-flex gap-1",
           "text-ellipsis",
           onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
           sizeClassNames[size],
@@ -13725,27 +13725,6 @@
     );
   };
   const IconButton = React.forwardRef(IconButtonInner);
-  const Label = React__namespace.forwardRef(({
-    className,
-    border,
-    onClick,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
-    {
-      ref,
-      onClick,
-      className: cls(
-        "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
-        onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
-        defaultBorderMixin,
-        className
-      ),
-      ...props
-    }
-  ));
-  Label.displayName = LabelPrimitive__namespace.Root.displayName;
   const defaultClasses = {
     root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
     shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
@@ -13766,11 +13745,15 @@
       className
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Label,
+      "label",
       {
+        className: cls(
+          "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          defaultBorderMixin,
+          computedClassName
+        ),
         "data-shrink": shrink,
         ref,
-        className: computedClassName,
         ...other
       }
     );
@@ -13816,20 +13799,20 @@
     label: "mb-2"
   };
   const variantToClasses = {
-    h1: "text-6xl font-headers font-light",
-    h2: "text-5xl font-headers font-light",
-    h3: "text-4xl font-headers font-normal",
-    h4: "text-3xl font-headers font-normal",
-    h5: "text-2xl font-headers font-normal",
-    h6: "text-xl font-headers font-medium",
-    subtitle1: "text-lg font-headers font-medium",
-    subtitle2: "text-base font-headers font-medium",
-    body1: "text-base",
-    body2: "text-sm",
-    label: "text-sm font-medium text-slate-500",
-    inherit: "text-inherit",
-    caption: "text-xs",
-    button: "text-sm font-medium"
+    h1: "typography-h1",
+    h2: "typography-h2",
+    h3: "typography-h3",
+    h4: "typography-h4",
+    h5: "typography-h5",
+    h6: "typography-h6",
+    subtitle1: "typography-subtitle1",
+    subtitle2: "typography-subtitle2",
+    body1: "typography-body1",
+    body2: "typography-body2",
+    label: "typography-label",
+    inherit: "typography-inherit",
+    caption: "typography-caption",
+    button: "typography-button"
   };
   function Typography({
     align = "inherit",
@@ -15149,6 +15132,27 @@
       }
     );
   }
+  const Label = React__namespace.forwardRef(({
+    className,
+    border,
+    onClick,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    LabelPrimitive__namespace.Root,
+    {
+      ref,
+      onClick,
+      className: cls(
+        "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
+        onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
+        defaultBorderMixin,
+        className
+      ),
+      ...props
+    }
+  ));
+  Label.displayName = LabelPrimitive__namespace.Root.displayName;
   function LoadingButton({
     children,
     loading,
@@ -15199,27 +15203,33 @@
     },
     equal
   );
-  function Menu({
+  const Menu = React.forwardRef(({
     children,
     trigger,
     open,
     defaultOpen,
     onOpenChange,
     portalContainer
-  }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenu__namespace.Root,
-      {
-        open,
-        defaultOpen,
-        onOpenChange,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: trigger }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Content, { className: cls(paperMixin, "shadow py-2 z-30"), children }) })
-        ]
-      }
-    );
-  }
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenu__namespace.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenu__namespace.Trigger,
+          {
+            ref,
+            asChild: true,
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Content, { className: cls(paperMixin, "shadow py-2 z-30"), children }) })
+      ]
+    }
+  ));
+  Menu.displayName = "Menu";
   function MenuItem({
     children,
     dense = false,
@@ -15805,7 +15815,7 @@
       }
     );
   }
-  function Select({
+  const Select = React.forwardRef(({
     inputRef,
     open,
     name,
@@ -15832,7 +15842,7 @@
     invisible,
     children,
     ...props
-  }) {
+  }, ref) => {
     const [openInternal, setOpenInternal] = React.useState(false);
     React.useEffect(() => {
       setOpenInternal(open ?? false);
@@ -15905,34 +15915,30 @@
                       inputClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { 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__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Value, { placeholder, className: "w-full", children: [
-                        renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 max-w-full", children: renderValue ? renderValue(v, i) : v }, v)) : typeof value === "string" ? renderValue ? renderValue(value, 0) : value : placeholder),
-                        renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value ?? []) : null,
-                        !renderValue && !renderValues && hasValue
-                      ] }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { className: cls(
-                        "px-2 h-full flex items-center"
-                      ), children: /* @__PURE__ */ jsxRuntime.jsx(
-                        ExpandMoreIcon,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
                         {
-                          size: "small",
-                          className: cls("transition", open ? "rotate-180" : "")
+                          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__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Value, { placeholder, className: "w-full", children: [
+                            renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 max-w-full", children: renderValue ? renderValue(v, i) : v }, v)) : typeof value === "string" ? renderValue ? renderValue(value, 0) : value : placeholder),
+                            renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value ?? []) : null,
+                            !renderValue && !renderValues && hasValue
+                          ] })
                         }
-                      ) })
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(ExpandMoreIcon, { size: "small", className: cls("transition", open ? "rotate-180" : "") }) })
                     ]
                   }
                 ),
                 endAdornment && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: cls(
-                      "absolute h-full flex items-center",
-                      size === "small" ? "right-10" : "right-14"
-                    ),
+                    className: cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14"),
                     onClick: (e) => e.stopPropagation(),
                     children: endAdornment
                   }
@@ -15949,9 +15955,7 @@
                 SelectPrimitive__namespace.Viewport,
                 {
                   className: "p-1",
-                  style: {
-                    maxHeight: "var(--radix-select-content-available-height)"
-                  },
+                  style: { maxHeight: "var(--radix-select-content-available-height)" },
                   children
                 }
               )
@@ -15960,7 +15964,8 @@
         ]
       }
     );
-  }
+  });
+  Select.displayName = "Select";
   function SelectItem({
     value,
     children,
@@ -16461,7 +16466,7 @@
             InputLabel,
             {
               className: cls(
-                "pointer-events-none absolute",
+                "absolute",
                 size === "medium" ? "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" : ""
@@ -16491,17 +16496,19 @@
     align,
     onOpenChange,
     title,
-    className,
-    style,
     tooltipClassName,
     tooltipStyle,
-    children
+    children,
+    asChild = false,
+    className,
+    style
   }) => {
     useInjectStyles("Tooltip", styles);
     if (!title)
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+    const trigger = asChild ? /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style, className, children }) });
     return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { open, onOpenChange, defaultOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children }) }),
+      trigger,
       /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
         TooltipPrimitive__namespace.Content,
         {