@popgrids/ui 0.0.27 → 0.0.29

package/dist/index.js

@@ -364,6 +364,24 @@ var tintVariants = cva(
     ]
   }
 );
+var loaderCompoundVariants = [
+  { theme: "base", variant: "default", loaderTheme: "reversed" },
+  { theme: "base", variant: "primary", loaderTheme: "reversed" },
+  { theme: "base", variant: "tertiary", loaderTheme: "black" },
+  { theme: "base", variant: "outline", loaderTheme: "white" },
+  { theme: "brand", variant: "secondary", loaderTheme: "default" },
+  { theme: "brand", variant: "default", loaderTheme: "reversed" },
+  { theme: "brand", variant: "primary", loaderTheme: "reversed" },
+  { theme: "brand", variant: "tertiary", loaderTheme: "black" },
+  { theme: "brand", variant: "outline", loaderTheme: "reversed" }
+];
+function loaderVariants2({
+  theme,
+  variant
+}) {
+  const match = loaderCompoundVariants.find((c) => c.theme === theme && c.variant === variant);
+  return match?.loaderTheme ?? "default";
+}
 function Button({
   align = "center",
   children,
@@ -400,7 +418,7 @@ function Button({
     tintVariants({ variant, outline })
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && (loadingElement || /* @__PURE__ */ jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: "reversed" })),
+    loading && (loadingElement || /* @__PURE__ */ jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: loaderVariants2({ theme, variant }) })),
     leading && /* @__PURE__ */ jsx("div", { className: cn("group-aria-busy/button:opacity-0 transition-opacity", { "opacity-0": loading }), children: leading }),
     children && /* @__PURE__ */ jsx("span", { className: cn("min-w-[18px] truncate relative transition-opacity", { "opacity-0": loading }), children }),
     trailing && /* @__PURE__ */ jsx(
@@ -628,16 +646,16 @@ function DialogContent({
       Dialog.Popup,
       {
         "data-slot": "dialog-content",
-        className: "group/popup pointer-events-none flex h-full max-h-full min-h-0 w-full max-w-full justify-center overflow-hidden transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className: "group/popup pointer-events-none flex h-auto max-h-full min-h-0 w-full max-w-full justify-center overflow-hidden transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "bg-background pointer-events-auto fixed top-1/2 left-1/2 flex h-full max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl shadow-2xl transition-all",
+                "bg-background pointer-events-auto fixed top-1/2 left-1/2 flex h-auto max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl shadow-2xl transition-all",
                 {
                   "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom,
-                  "group-data-open/popup:slide-in-from-bottom group-data-closed/popup:slide-out-to-bottom group-data-starting-style/popup-scale-100 group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out top-auto bottom-0 h-full translate-y-0 rounded-b-none group-data-closed/popup:duration-200 group-data-ending-style/popup:translate-y-full group-data-open/popup:duration-300 group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-closed/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-full": bottom
+                  "group-data-open/popup:slide-in-from-bottom group-data-closed/popup:slide-out-to-bottom group-data-closed/popup:zoom-out-95 group-data-starting-style/popup-scale-100 group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out top-auto bottom-0 h-full translate-y-0 rounded-b-none group-data-closed/popup:duration-1000 group-data-ending-style/popup:translate-y-full group-data-open/popup:duration-500 group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-open/popup:zoom-in-95 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-full": bottom
                 },
                 className
               ),
@@ -648,7 +666,7 @@ function DialogContent({
           showCloseButton && /* @__PURE__ */ jsxs(
             DialogClose,
             {
-              className: cn("pointer-events-auto fixed top-[7px] z-50 transition-all", { "left-4": closePosition === "top-left", "right-4": closePosition === "top-right", "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom, " group-data-starting-style/popup-scale-[0.96] group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out group-data-closed/popup:duration-200 group-data-closed/popup:ease-[cubic-bezier(1,0,0.72,0.32)] group-data-ending-style/popup:translate-y-1/2 group-data-open/popup:duration-pop-hover group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-1/2": bottom }),
+              className: cn("pointer-events-auto fixed top-[7px] z-50 transition-all", { "left-4": closePosition === "top-left", "right-4": closePosition === "top-right", "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom, " group-data-starting-style/popup-scale-[0.96] group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out group-data-closed/popup:duration-1000 group-data-closed/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-open/popup:duration-500 group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)]": bottom }),
               "aria-label": "Close",
               children: [
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
@@ -681,7 +699,7 @@ function DialogFooter({
     "div",
     {
       "data-slot": "dialog-footer",
-      className: cn("flex flex-col-reverse gap-2 sm:flex-row", className),
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row mt-auto", className),
       ...props,
       children: [
         children,
@@ -718,9 +736,9 @@ function DialogBody({ className, children, ...props }) {
     "div",
     {
       "data-slot": "dialog-body",
-      className: cn("flex shrink-0 grow basis-0 flex-col items-start self-stretch", className),
+      className: cn("flex flex-col items-start self-stretch overflow-auto", className),
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "flex shrink-0 grow basis-0 flex-col items-start gap-10 self-stretch overflow-auto p-4", children })
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 self-stretch overflow-auto p-4 items-stretch", children })
     }
   );
 }
@@ -1147,7 +1165,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-sm border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className