@firecms/ui 3.0.0-canary.102 → 3.0.0-canary.103

package/dist/components/Popover.d.ts

@@ -17,5 +17,6 @@ export interface PopoverProps {
     enabled?: boolean;
     modal?: boolean;
     className?: string;
+    portalContainer?: HTMLElement | null;
 }
-export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, className }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, portalContainer, className }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.es.js

@@ -28,7 +28,7 @@ const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark
 const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
 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-80 dark:bg-opacity-90";
+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 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";
@@ -574,10 +574,10 @@ const ButtonInner = React__default.forwardRef(({
     "w-full": fullWidth,
     "w-fit": !fullWidth,
     // Filled Variants
-    "border border-transparent bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white": variant === "filled" && color === "primary" && !disabled,
-    "border border-transparent bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white": variant === "filled" && color === "secondary" && !disabled,
-    "border border-transparent bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white": variant === "filled" && color === "error" && !disabled,
-    "border border-transparent bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+    "border border-transparent bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
+    "border border-transparent bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
+    "border border-transparent bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+    "border border-transparent bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
     // Text Variants
     "border border-transparent text-primary hover:bg-slate-200 dark:hover:bg-gray-900": variant === "text" && color === "primary" && !disabled,
     "border border-transparent text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
@@ -13666,7 +13666,7 @@ function Chip({
     }
   );
 }
-const buttonClasses = "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50";
+const buttonClasses = "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800";
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses$1 = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-gray-300";
 const sizeClasses = {
@@ -16043,7 +16043,7 @@ const Sheet = ({
   overlayClassName,
   ...props
 }) => {
-  const [displayed, setDisplayed] = React__default.useState(false);
+  const [displayed, setDisplayed] = useState(false);
   useEffect(() => {
     const timeout = setTimeout(() => {
       setDisplayed(open);
@@ -16073,7 +16073,7 @@ const Sheet = ({
           DialogPrimitive.Overlay,
           {
             className: cls(
-              "fixed inset-0 transition-opacity z-20 ease-in-out duration-100  backdrop-blur-sm",
+              "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
               "bg-black bg-opacity-50",
               "dark:bg-gray-900 dark:bg-opacity-60",
               displayed && open ? "opacity-100" : "opacity-0",
@@ -16081,13 +16081,15 @@ const Sheet = ({
             ),
             style: {
               pointerEvents: displayed ? "auto" : "none"
-            }
+            },
+            onClick: () => onOpenChange && onOpenChange(false)
           }
         ),
         /* @__PURE__ */ jsx(
           DialogPrimitive.Content,
           {
             ...props,
+            onFocusCapture: (event) => event.preventDefault(),
             className: cls(
               borderClass[side],
               defaultBorderMixin,
@@ -16610,7 +16612,7 @@ function Tab({
       ),
       children: /* @__PURE__ */ jsx("div", { className: cls(
         "uppercase inline-block p-2 px-4 m-2 rounded",
-        "hover:bg-slate-100 dark:hover:bg-slate-800"
+        "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800"
       ), children })
     }
   );
@@ -16729,6 +16731,7 @@ function Popover({
   avoidCollisions,
   enabled = true,
   modal = false,
+  portalContainer,
   className
 }) {
   useInjectStyles("Popover", popoverStyles);
@@ -16742,7 +16745,7 @@ function Popover({
       modal,
       children: [
         /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
-        /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
           PopoverPrimitive.Content,
           {
             className: cls(