@hexclave/dashboard-ui-components 1.0.5 → 1.0.8

package/dist/dashboard-ui-components.global.js

@@ -333,6 +333,8 @@ var DashboardUI = (() => {
     defaultFormatRelative: () => defaultFormatRelative,
     defaultMatchRow: () => defaultMatchRow,
     defaultParseDate: () => defaultParseDate,
+    designDialogGlassmorphicOverlayClass: () => designDialogGlassmorphicOverlayClass,
+    designDialogGlassmorphicSurfaceClass: () => designDialogGlassmorphicSurfaceClass,
     exportToCsv: () => exportToCsv,
     findAnnotationsLayer: () => findAnnotationsLayer,
     findCompareLayer: () => findCompareLayer,
@@ -4750,7 +4752,11 @@ This is likely an error in Hexclave. Please make sure you are running the newest
   var AnonymousAccountsNotEnabled = createKnownErrorConstructor(KnownError, "ANONYMOUS_ACCOUNTS_NOT_ENABLED", () => [400, "Anonymous accounts are not enabled for this project."], () => []);
   var AnonymousAuthenticationNotAllowed = createKnownErrorConstructor(KnownError, "ANONYMOUS_AUTHENTICATION_NOT_ALLOWED", () => [401, "X-Stack-Access-Token is for an anonymous user, but anonymous users are not enabled. Set the X-Stack-Allow-Anonymous-User header of this request to 'true' to allow anonymous users."], () => []);
   var EmailPasswordMismatch = createKnownErrorConstructor(KnownError, "EMAIL_PASSWORD_MISMATCH", () => [400, "Wrong e-mail or password."], () => []);
-  var RedirectUrlNotWhitelisted = createKnownErrorConstructor(KnownError, "REDIRECT_URL_NOT_WHITELISTED", () => [400, "Redirect URL not whitelisted. Did you forget to add this domain to the trusted domains list on the Hexclave dashboard?"], () => []);
+  var RedirectUrlNotWhitelisted = createKnownErrorConstructor(KnownError, "REDIRECT_URL_NOT_WHITELISTED", (redirectUrl) => [
+    400,
+    "Redirect URL not whitelisted. Did you forget to add this domain to the trusted domains list on the Hexclave dashboard?",
+    redirectUrl === void 0 ? void 0 : { redirect_url: redirectUrl }
+  ], (json) => [json?.redirect_url]);
   var PasswordRequirementsNotMet = createKnownErrorConstructor(KnownError, "PASSWORD_REQUIREMENTS_NOT_MET", "inherit", "inherit");
   var PasswordTooShort = createKnownErrorConstructor(PasswordRequirementsNotMet, "PASSWORD_TOO_SHORT", (minLength) => [
     400,
@@ -17573,7 +17579,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     [
       "default",
       {
-        container: "bg-background border-border",
+        container: "border-black/[0.08] bg-white/90 ring-1 ring-black/[0.06] dark:border-border dark:bg-background dark:ring-0",
         icon: "text-foreground",
         title: "text-foreground"
       }
@@ -17605,9 +17611,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     [
       "info",
       {
-        container: "bg-blue-500/[0.06] border-blue-500/30",
-        icon: "text-blue-500",
-        title: "text-blue-600 dark:text-blue-400"
+        container: "border-blue-500/20 bg-blue-50/90 ring-1 ring-blue-500/10 dark:border-blue-500/30 dark:bg-blue-500/[0.06] dark:ring-0",
+        icon: "text-blue-600 dark:text-blue-400",
+        title: "text-blue-700 dark:text-blue-400"
       }
     ]
   ]);
@@ -17707,7 +17713,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       "div",
       {
         className: cn(
-          "inline-flex items-center gap-1.5 rounded-full font-medium",
+          "inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full font-medium leading-none",
           colorClasses,
           sizeClasses2
         ),
@@ -17729,9 +17735,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         variant: {
           default: "bg-primary text-primary-foreground hover:bg-primary/90",
           destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-          outline: "border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground",
-          secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-          ghost: "hover:bg-accent hover:text-accent-foreground",
+          outline: "border border-input bg-white/85 dark:bg-background hover:bg-zinc-50 dark:hover:bg-accent dark:hover:text-accent-foreground",
+          secondary: "bg-white dark:bg-secondary text-secondary-foreground hover:bg-zinc-50 dark:hover:bg-secondary/80",
+          ghost: "hover:bg-zinc-100 dark:hover:bg-accent dark:hover:text-accent-foreground",
           link: "text-primary underline-offset-4 hover:underline",
           plain: ""
         },
@@ -18216,13 +18222,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ["full", "max-w-[calc(100vw-2rem)]"]
   ]);
   var dialogSurfaceClasses = /* @__PURE__ */ new Map([
-    ["glassmorphic", "border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"],
-    ["plain", "border bg-background shadow-lg sm:rounded-lg"]
-  ]);
-  var dialogOverlayClasses = /* @__PURE__ */ new Map([
-    ["glassmorphic", "bg-black/50 backdrop-blur-sm"],
-    ["plain", void 0]
+    ["glassmorphic", "border-0 sm:rounded-2xl bg-white/95 backdrop-blur-2xl ring-1 ring-black/[0.08] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"],
+    ["plain", "border border-black/[0.08] bg-white shadow-lg sm:rounded-lg dark:border-white/[0.06] dark:bg-background"]
   ]);
+  var designDialogGlassmorphicSurfaceClass = dialogSurfaceClasses.get("glassmorphic") ?? "";
+  var designDialogGlassmorphicOverlayClass = "bg-black/50 backdrop-blur-sm";
   function DesignDialog({
     trigger,
     size: size4 = "lg",
@@ -18240,12 +18244,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     headerClassName,
     bodyClassName,
     footerClassName,
+    contentProps,
     children,
     ...dialogRootProps
   }) {
     const resolvedSizeClass = dialogSizeClasses.get(size4) ?? "max-w-lg";
     const resolvedSurfaceClass = dialogSurfaceClasses.get(variant) ?? dialogSurfaceClasses.get("glassmorphic");
-    const resolvedOverlayClass = cn(dialogOverlayClasses.get(variant), overlayClassName);
+    const resolvedOverlayClass = cn(
+      variant === "glassmorphic" ? designDialogGlassmorphicOverlayClass : void 0,
+      overlayClassName
+    );
     const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;
     const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;
     const shouldRenderBody = import_react19.default.Children.toArray(children).filter(Boolean).length > 0;
@@ -18262,20 +18270,25 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         DialogContent2,
         {
           className: cn(
-            "gap-0 p-0 overflow-hidden",
+            "gap-0 h-auto max-h-[min(100dvh-2rem,36rem)] overflow-hidden p-0",
             resolvedSizeClass,
             resolvedSurfaceClass,
             className
           ),
           overlayProps: resolvedOverlayClass ? { className: resolvedOverlayClass } : void 0,
           noCloseButton: hideTopCloseButton,
+          ...contentProps,
           children: [
             needsAccessibleTitleFallback && /* @__PURE__ */ jsx(DialogTitle2, { className: "sr-only", children: "Dialog" }),
-            shouldRenderHeader && /* @__PURE__ */ jsx(DialogHeader, { className: cn("px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName), children: customHeader ?? /* @__PURE__ */ jsxs(Fragment24, { children: [
-              shouldRenderTopHeaderRow && /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", Icon == null && "gap-0"), children: [
+            shouldRenderHeader && /* @__PURE__ */ jsx(DialogHeader, { className: cn("shrink-0 px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName), children: customHeader ?? /* @__PURE__ */ jsxs(Fragment24, { children: [
+              shouldRenderTopHeaderRow && /* @__PURE__ */ jsxs("div", { className: cn(
+                "flex gap-3",
+                description != null ? "items-start" : "items-center",
+                Icon == null && "gap-0"
+              ), children: [
                 Icon != null && /* @__PURE__ */ jsx("div", { className: "h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-primary" }) }),
                 (title != null || description != null) && /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [
-                  title != null ? /* @__PURE__ */ jsx(DialogTitle2, { className: "text-base", children: title }) : null,
+                  title != null ? /* @__PURE__ */ jsx(DialogTitle2, { className: "text-base font-semibold leading-snug", children: title }) : null,
                   description != null ? /* @__PURE__ */ jsx(DialogDescription2, { className: "text-xs", children: description }) : null
                 ] })
               ] }),
@@ -18285,14 +18298,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
               DialogBody,
               {
                 className: cn(
-                  "mx-0 my-0 w-auto",
+                  "mx-0 my-0 w-auto min-h-0 overflow-y-auto",
                   noBodyPadding ? "px-0 py-0" : "px-6 py-4",
                   bodyClassName
                 ),
                 children
               }
             ),
-            footer != null ? /* @__PURE__ */ jsx(DialogFooter, { className: cn("px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName), children: footer }) : null
+            footer != null ? /* @__PURE__ */ jsx(DialogFooter, { className: cn("shrink-0 px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName), children: footer }) : null
           ]
         }
       )
@@ -18317,17 +18330,20 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   // src/components/input.tsx
   var DesignInput = forwardRefIfNeeded(
     ({ className, type, prefixItem, leadingIcon, size: size4 = "md", ...props }, ref) => {
-      const sizeClasses2 = size4 === "sm" ? "h-7 px-2 text-xs" : size4 === "lg" ? "h-10 px-4 text-sm" : "h-9 px-3 text-sm";
+      const heightTextClasses = size4 === "sm" ? "h-7 text-xs" : size4 === "lg" ? "h-10 text-sm" : "h-9 text-sm";
+      const horizontalPaddingClasses = size4 === "sm" ? "px-2" : size4 === "lg" ? "px-4" : "px-3";
       const baseClasses = cn(
         "stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
         "file:border-0 file:bg-transparent file:text-sm file:font-medium",
         "placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]",
-        sizeClasses2
+        heightTextClasses
       );
+      const leadingIconClasses = size4 === "sm" ? "left-2.5 [&_svg]:size-3" : size4 === "lg" ? "left-3.5 [&_svg]:size-4" : "left-3 [&_svg]:size-3.5";
+      const leadingIconPadding = size4 === "sm" ? "pl-8" : size4 === "lg" ? "pl-10" : "pl-9";
       if (prefixItem) {
-        return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]", children: [
+        return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row items-center overflow-hidden rounded-xl border border-black/[0.08] bg-white/80 shadow-sm ring-1 ring-black/[0.08] transition-all duration-150 hover:bg-white hover:transition-none dark:border-white/[0.06] dark:bg-foreground/[0.03] dark:ring-white/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1] dark:hover:bg-foreground/[0.06]", children: [
           /* @__PURE__ */ jsx("div", { className: cn(
             "flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]",
             size4 === "sm" ? "px-2.5 text-xs" : size4 === "lg" ? "px-3.5 text-sm" : "px-3 text-sm"
@@ -18341,7 +18357,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
                 "file:border-0 file:bg-transparent file:text-sm file:font-medium",
                 "placeholder:text-muted-foreground/50 focus-visible:outline-none",
                 "disabled:cursor-not-allowed disabled:opacity-50",
-                sizeClasses2,
+                heightTextClasses,
+                horizontalPaddingClasses,
                 "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0",
                 className
               ),
@@ -18352,24 +18369,27 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         ] });
       }
       if (leadingIcon) {
-        return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-row items-center flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-2.5 flex items-center text-muted-foreground", children: leadingIcon }),
+        return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:block",
+            leadingIconClasses
+          ), children: leadingIcon }),
           /* @__PURE__ */ jsx(
             "input",
             {
               type,
-              className: cn(baseClasses, "pl-8", className),
+              className: cn(baseClasses, leadingIconPadding),
               ref,
               ...props
             }
           )
         ] });
       }
-      return /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center flex-1", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
         "input",
         {
           type,
-          className: cn(baseClasses, className),
+          className: cn(baseClasses, horizontalPaddingClasses, className),
           ref,
           ...props
         }
@@ -18444,7 +18464,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
                 "relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none",
                 sizeClass.button,
                 isActive ? cn(
-                  "bg-background text-foreground shadow-sm ring-1",
+                  "bg-white dark:bg-background text-foreground shadow-sm ring-1",
                   glassmorphic ? "ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20" : activeRingClass
                 ) : cn(
                   "text-muted-foreground hover:text-foreground",
@@ -18674,7 +18694,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       {
         className: cn(
           "flex w-full min-w-0 items-center gap-2",
-          glassmorphic ? "rounded-xl bg-black/[0.08] dark:bg-white/[0.04] p-1 backdrop-blur-sm" : "border-b border-gray-300 dark:border-gray-800",
+          glassmorphic ? "rounded-xl bg-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]" : "border-b border-gray-300 dark:border-gray-800",
           className
         ),
         ...props,
@@ -18701,8 +18721,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
                       glassmorphic ? "rounded-lg" : "",
                       isActive ? cn(
                         gradientClass.activeText,
-                        glassmorphic && "bg-background shadow-sm ring-1 ring-black/[0.12] dark:ring-white/[0.06]"
-                      ) : "text-gray-700 dark:text-gray-400"
+                        glassmorphic && "bg-white shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]"
+                      ) : cn(
+                        "text-gray-700 dark:text-gray-400",
+                        glassmorphic && "rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]"
+                      )
                     ),
                     children: [
                       loadingCategoryId === category.id && /* @__PURE__ */ jsx(
@@ -22045,18 +22068,18 @@ ${colorConfig.map(([key, itemConfig]) => {
     placeholder
   }) {
     return /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 items-center sm:flex-initial", children: [
-      /* @__PURE__ */ jsx(f, { className: "absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" }),
+      /* @__PURE__ */ jsx(f, { className: "absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none" }),
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           className: cn(
             "h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs",
-            "bg-background",
-            "border border-black/[0.08] dark:border-white/[0.08]",
-            "placeholder:text-muted-foreground/40",
+            "border border-black/[0.08] dark:border-white/[0.06]",
+            "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
+            "placeholder:text-muted-foreground/50",
             "focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]",
-            "transition-all duration-150"
+            "transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]"
           ),
           placeholder,
           value,
@@ -22152,13 +22175,13 @@ ${colorConfig.map(([key, itemConfig]) => {
       ] }),
       hasDateColumns && /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-foreground/[0.06]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1", children: [
         /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: strings.dateFormat }),
-        /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.04] p-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               className: cn(
-                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75",
-                dateDisplay === "relative" ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]" : "text-muted-foreground hover:text-foreground"
+                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
+                dateDisplay === "relative" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"
               ),
               onClick: () => onDateDisplayChange("relative"),
               children: strings.dateFormatRelative
@@ -22168,8 +22191,8 @@ ${colorConfig.map(([key, itemConfig]) => {
             "button",
             {
               className: cn(
-                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75",
-                dateDisplay === "absolute" ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]" : "text-muted-foreground hover:text-foreground"
+                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
+                dateDisplay === "absolute" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"
               ),
               onClick: () => onDateDisplayChange("absolute"),
               children: strings.dateFormatAbsolute
@@ -22772,9 +22795,10 @@ ${colorConfig.map(([key, itemConfig]) => {
             "select",
             {
               className: cn(
-                "h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.08] bg-background px-1.5",
+                "h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.06] px-1.5",
+                "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
                 "text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]",
-                "cursor-pointer"
+                "cursor-pointer transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]"
               ),
               value: state.pagination.pageSize,
               onChange: (e40) => setPageSize(Number(e40.target.value)),
@@ -22984,12 +23008,22 @@ ${colorConfig.map(([key, itemConfig]) => {
       const grid = gridRef.current;
       const scroller = scrollContainerRef.current;
       if (!grid) return;
-      const update = () => {
-        const w = scroller?.clientWidth ?? grid.clientWidth;
-        if (w > 0) setContainerWidth(w);
+      const update = (entries) => {
+        let measured = 0;
+        if (entries != null) {
+          for (const entry of entries) {
+            measured = Math.max(measured, entry.contentRect.width);
+          }
+        }
+        if (measured <= 0) {
+          const scrollerWidth = scroller?.clientWidth ?? 0;
+          const gridWidth = grid.clientWidth;
+          measured = scrollerWidth > 0 ? scrollerWidth : gridWidth;
+        }
+        if (measured > 0) setContainerWidth(measured);
       };
       update();
-      const observer = new ResizeObserver(update);
+      const observer = new ResizeObserver((entries) => update(entries));
       observer.observe(grid);
       if (scroller) observer.observe(scroller);
       return () => observer.disconnect();