@rebasepro/ui 0.2.1 → 0.2.4

package/dist/index.umd.js

@@ -989,15 +989,15 @@
           "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": t25
         });
         const sizeClasses2 = cls({
-          "py-1 px-2": size === "small",
-          "py-2 px-4": size === "medium",
-          "py-2.5 px-5": size === "large",
-          "py-3 px-6": size === "xl",
-          "py-4 px-10": size === "2xl"
+          "py-0.5 px-1.5": size === "small",
+          "py-1.5 px-3": size === "medium",
+          "py-2 px-4": size === "large",
+          "py-2.5 px-5": size === "xl",
+          "py-3 px-6": size === "2xl"
         });
         const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
         if (Component) {
-          t30 = /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
+          t30 = /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-1.5 px-3 focus:outline-none transition-all ease-in-out duration-150 gap-1.5 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
             startIcon,
             children
           ] });
@@ -1006,7 +1006,7 @@
         t26 = ref;
         t27 = props.type ?? "button";
         t28 = props.onClick;
-        t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className);
+        t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-1.5 px-3 focus:outline-none transition-all ease-in-out duration-150 gap-1.5 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className);
       }
       $[11] = Component;
       $[12] = children;
@@ -1552,11 +1552,18 @@
     disabled: "text-text-disabled dark:text-text-disabled-dark",
     error: "text-red-500"
   };
+  function isPermissionError(error) {
+    if (!error) return false;
+    const msg = error.message?.toLowerCase() ?? "";
+    const code = error.code?.toLowerCase() ?? "";
+    return msg.includes("permission") || msg.includes("insufficient") || msg.includes("unauthorized") || msg.includes("forbidden") || msg.includes("access denied") || code === "permission_denied" || code === "insufficient_permissions" || error.status === 403;
+  }
   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
-        error: null
+        error: null,
+        showDetails: false
       };
     }
     static getDerivedStateFromError(error) {
@@ -1567,18 +1574,71 @@
     componentDidCatch(error, _errorInfo) {
       console.error(error);
     }
+    handleReset = () => {
+      this.setState({
+        error: null,
+        showDetails: false
+      });
+      this.props.onReset?.();
+    };
+    handleReload = () => {
+      window.location.reload();
+    };
+    toggleDetails = () => {
+      this.setState((prev) => ({
+        showDetails: !prev.showDetails
+      }));
+    };
     render() {
       if (this.state.error) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col m-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "text-red-500", size: iconSize.small }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4", children: "Error" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", children: this.state.error?.message ?? "See the error in the console" })
-        ] });
+        if (this.props.fullPage) {
+          return this.renderFullPage();
+        }
+        return this.renderInline();
       }
       return this.props.children;
     }
+    renderInline() {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col m-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "text-red-500", size: iconSize.small }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4", children: "Error" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", children: this.state.error?.message ?? "See the error in the console" })
+      ] });
+    }
+    renderFullPage() {
+      const {
+        error,
+        showDetails
+      } = this.state;
+      const isPermission = isPermissionError(error);
+      const Icon = isPermission ? lucideReact.ShieldAlertIcon : lucideReact.AlertCircleIcon;
+      const title = isPermission ? "Access denied" : "Something went wrong";
+      const description = isPermission ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator." : "An unexpected error occurred. You can try reloading the page or going back.";
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex items-center justify-center min-h-[400px] h-full w-full", "bg-surface-50 dark:bg-surface-950"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center max-w-md px-6 py-10 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex items-center justify-center w-14 h-14 rounded-2xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : "bg-red-100 dark:bg-red-900/30"), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 28, className: isPermission ? "text-amber-600 dark:text-amber-400" : "text-red-500 dark:text-red-400" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", className: "text-text-primary dark:text-text-primary-dark mb-2", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-text-secondary dark:text-text-secondary-dark mb-8", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outlined", color: "neutral", size: "medium", onClick: this.handleReset, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { size: 16 }),
+            "Try again"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "filled", color: "primary", size: "medium", onClick: this.handleReload, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCwIcon, { size: 16 }),
+            "Reload page"
+          ] })
+        ] }),
+        error?.message && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: this.toggleDetails, className: cls("flex items-center gap-1 mx-auto text-xs", "text-text-disabled dark:text-text-disabled-dark", "hover:text-text-secondary dark:hover:text-text-secondary-dark", "transition-colors cursor-pointer bg-transparent border-none p-0"), children: [
+            "Technical details",
+            showDetails ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { size: 14 })
+          ] }),
+          showDetails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("mt-3 p-3 rounded-lg text-left text-xs", "bg-surface-100 dark:bg-surface-800", "text-text-secondary dark:text-text-secondary-dark", "font-mono break-all"), children: error.message })
+        ] })
+      ] }) });
+    }
   }
   const sizeClasses$2 = {
     large: "w-6 h-6 rounded flex items-center justify-center",
@@ -2091,10 +2151,10 @@
   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-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
   const sizeClasses$1 = {
-    medium: "w-10 !h-10 min-w-10 min-h-10",
-    small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-6 !h-6 min-w-6 min-h-6",
-    large: "w-12 !h-12 min-w-12 min-h-12"
+    medium: "w-9 !h-9 min-w-9 min-h-9",
+    small: "w-7 !h-7 min-w-7 min-h-7",
+    smallest: "w-5 !h-5 min-w-5 min-h-5",
+    large: "w-10 !h-10 min-w-10 min-h-10"
   };
   const shapeClasses = {
     circular: "rounded-full",
@@ -4325,7 +4385,7 @@
         if (selectedValues.some((v_0) => String(v_0) === String(newValue))) {
           newSelectedValues = selectedValues.filter((v) => String(v) !== String(newValue));
         } else {
-          newSelectedValues = [...selectedValues, newValue];
+          newSelectedValues = [...selectedValues, String(newValue)];
         }
         updateValues(newSelectedValues);
       };
@@ -5247,88 +5307,87 @@
       t10 = $[17];
     }
     const t11 = searchText ?? "";
-    const t12 = inputRef;
-    const t13 = !onTextSearch;
-    let t14;
+    const t12 = !onTextSearch;
+    let t13;
     if ($[18] !== onTextSearch) {
-      t14 = onTextSearch ? (event) => {
+      t13 = onTextSearch ? (event) => {
         setSearchText(event.target.value);
       } : void 0;
       $[18] = onTextSearch;
-      $[19] = t14;
+      $[19] = t13;
     } else {
-      t14 = $[19];
+      t13 = $[19];
     }
+    let t14;
     let t15;
-    let t16;
     if ($[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t15 = () => setActive(true);
-      t16 = () => setActive(false);
-      $[20] = t15;
-      $[21] = t16;
+      t14 = () => setActive(true);
+      t15 = () => setActive(false);
+      $[20] = t14;
+      $[21] = t15;
     } else {
-      t15 = $[20];
-      t16 = $[21];
+      t14 = $[20];
+      t15 = $[21];
     }
-    const t17 = (disabled || loading) && "pointer-events-none";
-    const t18 = size === "small" ? "text-sm" : "";
-    const t19 = expandable ? active ? "w-[220px]" : "w-[180px]" : "";
-    let t20;
-    if ($[22] !== innerClassName || $[23] !== inputPaddingClass || $[24] !== t17 || $[25] !== t18 || $[26] !== t19) {
-      t20 = cls(t17, "placeholder-text-disabled dark:placeholder-text-disabled-dark", "relative flex items-center transition-all bg-transparent outline-none focus:outline-none focus:ring-0 appearance-none border-none focus:border-transparent", inputPaddingClass, "h-full w-full text-current", t18, t19, innerClassName);
+    const t16 = (disabled || loading) && "pointer-events-none";
+    const t17 = size === "small" ? "text-sm" : "";
+    const t18 = expandable ? active ? "w-[220px]" : "w-[180px]" : "";
+    let t19;
+    if ($[22] !== innerClassName || $[23] !== inputPaddingClass || $[24] !== t16 || $[25] !== t17 || $[26] !== t18) {
+      t19 = cls(t16, "placeholder-text-disabled dark:placeholder-text-disabled-dark", "relative flex items-center transition-all bg-transparent outline-none focus:outline-none focus:ring-0 appearance-none border-none focus:border-transparent", inputPaddingClass, "h-full w-full text-current", t17, t18, innerClassName);
       $[22] = innerClassName;
       $[23] = inputPaddingClass;
-      $[24] = t17;
-      $[25] = t18;
-      $[26] = t19;
-      $[27] = t20;
+      $[24] = t16;
+      $[25] = t17;
+      $[26] = t18;
+      $[27] = t19;
     } else {
-      t20 = $[27];
+      t19 = $[27];
     }
-    let t21;
-    if ($[28] !== autoFocus || $[29] !== onClick || $[30] !== placeholder || $[31] !== t11 || $[32] !== t12 || $[33] !== t13 || $[34] !== t14 || $[35] !== t20) {
-      t21 = /* @__PURE__ */ jsxRuntime.jsx("input", { value: t11, ref: t12, onClick, placeholder, "aria-label": placeholder, readOnly: t13, onChange: t14, autoFocus, onFocus: t15, onBlur: t16, className: t20 });
+    let t20;
+    if ($[28] !== autoFocus || $[29] !== inputRef || $[30] !== onClick || $[31] !== placeholder || $[32] !== t11 || $[33] !== t12 || $[34] !== t13 || $[35] !== t19) {
+      t20 = /* @__PURE__ */ jsxRuntime.jsx("input", { value: t11, ref: inputRef, onClick, placeholder, "aria-label": placeholder, readOnly: t12, onChange: t13, autoFocus, onFocus: t14, onBlur: t15, className: t19 });
       $[28] = autoFocus;
-      $[29] = onClick;
-      $[30] = placeholder;
-      $[31] = t11;
-      $[32] = t12;
-      $[33] = t13;
-      $[34] = t14;
-      $[35] = t20;
-      $[36] = t21;
+      $[29] = inputRef;
+      $[30] = onClick;
+      $[31] = placeholder;
+      $[32] = t11;
+      $[33] = t12;
+      $[34] = t13;
+      $[35] = t19;
+      $[36] = t20;
     } else {
-      t21 = $[36];
+      t20 = $[36];
     }
-    let t22;
+    let t21;
     if ($[37] !== clearText || $[38] !== searchText || $[39] !== size) {
-      t22 = searchText ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { className: `${size === "small" ? "mr-0 top-0" : "mr-1 top-0"} absolute right-0 z-10`, size: "small", "aria-label": "Clear search", onClick: clearText, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: iconSize.smallest }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      t21 = searchText ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { className: `${size === "small" ? "mr-0 top-0" : "mr-1 top-0"} absolute right-0 z-10`, size: "small", "aria-label": "Clear search", onClick: clearText, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: iconSize.smallest }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         width: 26
       } });
       $[37] = clearText;
       $[38] = searchText;
       $[39] = size;
-      $[40] = t22;
+      $[40] = t21;
     } else {
-      t22 = $[40];
+      t21 = $[40];
     }
-    let t23;
-    if ($[41] !== onClick || $[42] !== t10 || $[43] !== t21 || $[44] !== t22 || $[45] !== t7) {
-      t23 = /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "search", "aria-label": "Search", onClick, className: t7, children: [
+    let t22;
+    if ($[41] !== onClick || $[42] !== t10 || $[43] !== t20 || $[44] !== t21 || $[45] !== t7) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "search", "aria-label": "Search", onClick, className: t7, children: [
         t10,
-        t21,
-        t22
+        t20,
+        t21
       ] });
       $[41] = onClick;
       $[42] = t10;
-      $[43] = t21;
-      $[44] = t22;
+      $[43] = t20;
+      $[44] = t21;
       $[45] = t7;
-      $[46] = t23;
+      $[46] = t22;
     } else {
-      t23 = $[46];
+      t22 = $[46];
     }
-    return t23;
+    return t22;
   }
   const Select = React.forwardRef((t0, ref) => {
     const $ = reactCompilerRuntime.c(123);
@@ -8764,7 +8823,7 @@
             zIndex: 1
           }, children: endAdornment });
         }
-        const rowData = data && data[index];
+        const rowData = data ? data[index] : void 0;
         return /* @__PURE__ */ jsxRuntime.jsxs(VirtualTableRow, { rowData, rowIndex: index, onRowClick, columns, hoverRow, rowClassName, style: {
           ...style,
           top: `calc(${style.top}px + ${headerHeight ?? 48}px)`