@rebasepro/ui 0.0.1-canary.f81da60 → 0.1.2

package/dist/index.umd.js

@@ -970,18 +970,18 @@
           "border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": t8,
           "border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": t9,
           "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 shadow-sm hover:shadow-md text-white hover:text-white": t10,
-          "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
-          "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
+          "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
+          "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
           "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t13,
           "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t14,
           "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": t15,
-          "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t16,
-          "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
+          "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t16,
+          "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": t17,
           "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": t18,
           "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t19,
           "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t20,
-          "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t21,
-          "border border-surface-300 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t22,
+          "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t21,
+          "border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": t22,
           "text-text-disabled dark:text-text-disabled-dark": disabled,
           "border border-transparent opacity-50": t23,
           "border border-surface-500 opacity-50": t24,
@@ -1782,7 +1782,7 @@
     return t11;
   }
   const Tooltip = (t0) => {
-    const $ = reactCompilerRuntime.c(28);
+    const $ = reactCompilerRuntime.c(30);
     const {
       open,
       defaultOpen,
@@ -1830,61 +1830,72 @@
     }
     const trigger = t4;
     let t5;
-    if ($[7] !== tooltipClassName) {
-      t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
-      $[7] = tooltipClassName;
-      $[8] = t5;
+    if ($[7] !== onOpenChange || $[8] !== open) {
+      t5 = open !== void 0 ? {
+        open,
+        onOpenChange
+      } : {};
+      $[7] = onOpenChange;
+      $[8] = open;
+      $[9] = t5;
     } else {
-      t5 = $[8];
+      t5 = $[9];
     }
-    const t6 = sideOffset === void 0 ? 4 : sideOffset;
-    let t7;
-    if ($[9] !== align || $[10] !== side || $[11] !== t5 || $[12] !== t6 || $[13] !== title || $[14] !== tooltipStyle) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Content, { className: t5, style: tooltipStyle, sideOffset: t6, align, side, children: title });
-      $[9] = align;
-      $[10] = side;
-      $[11] = t5;
-      $[12] = t6;
-      $[13] = title;
-      $[14] = tooltipStyle;
-      $[15] = t7;
+    let t6;
+    if ($[10] !== tooltipClassName) {
+      t6 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
+      $[10] = tooltipClassName;
+      $[11] = t6;
     } else {
-      t7 = $[15];
+      t6 = $[11];
     }
+    const t7 = sideOffset === void 0 ? 4 : sideOffset;
     let t8;
-    if ($[16] !== finalContainer || $[17] !== t7) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { container: finalContainer, children: t7 });
-      $[16] = finalContainer;
-      $[17] = t7;
+    if ($[12] !== align || $[13] !== side || $[14] !== t6 || $[15] !== t7 || $[16] !== title || $[17] !== tooltipStyle) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Content, { className: t6, style: tooltipStyle, sideOffset: t7, align, side, children: title });
+      $[12] = align;
+      $[13] = side;
+      $[14] = t6;
+      $[15] = t7;
+      $[16] = title;
+      $[17] = tooltipStyle;
       $[18] = t8;
     } else {
       t8 = $[18];
     }
     let t9;
-    if ($[19] !== defaultOpen || $[20] !== onOpenChange || $[21] !== open || $[22] !== t8 || $[23] !== trigger) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { open, onOpenChange, defaultOpen, children: [
+    if ($[19] !== finalContainer || $[20] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { container: finalContainer, children: t8 });
+      $[19] = finalContainer;
+      $[20] = t8;
+      $[21] = t9;
+    } else {
+      t9 = $[21];
+    }
+    let t10;
+    if ($[22] !== defaultOpen || $[23] !== t5 || $[24] !== t9 || $[25] !== trigger) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { ...t5, defaultOpen, children: [
         trigger,
-        t8
+        t9
       ] });
-      $[19] = defaultOpen;
-      $[20] = onOpenChange;
-      $[21] = open;
-      $[22] = t8;
-      $[23] = trigger;
+      $[22] = defaultOpen;
+      $[23] = t5;
       $[24] = t9;
+      $[25] = trigger;
+      $[26] = t10;
     } else {
-      t9 = $[24];
+      t10 = $[26];
     }
-    let t10;
-    if ($[25] !== delayDuration || $[26] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration, children: t9 });
-      $[25] = delayDuration;
-      $[26] = t9;
-      $[27] = t10;
+    let t11;
+    if ($[27] !== delayDuration || $[28] !== t10) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration, children: t10 });
+      $[27] = delayDuration;
+      $[28] = t10;
+      $[29] = t11;
     } else {
-      t10 = $[27];
+      t11 = $[29];
     }
-    return t10;
+    return t11;
   };
   const styles$2 = `
 
@@ -2340,7 +2351,7 @@
         /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: (e_2) => {
           e_2.stopPropagation();
           inputRef.current?.showPicker();
-        }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { color: "disabled" }) }),
+        }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}) }),
         clearable && value && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) })
       ] }),
       invalidValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
@@ -5052,12 +5063,13 @@
       autoFocus,
       disabled,
       loading,
-      inputRef
+      inputRef,
+      initialValue
     } = t0;
     const placeholder = t1 === void 0 ? "Search" : t1;
     const expandable = t2 === void 0 ? false : t2;
     const size = t3 === void 0 ? "medium" : t3;
-    const [searchText, setSearchText] = React.useState("");
+    const [searchText, setSearchText] = React.useState(initialValue ?? "");
     const [active, setActive] = React.useState(false);
     const deferredValues = useDebounceValue(searchText, 200);
     let t4;
@@ -7411,7 +7423,7 @@
     const thisColumnIsResizing = isResizingIndex === columnIndex;
     const anotherColumnIsResizing = isResizingIndex !== columnIndex && isResizingIndex > 0;
     const hovered = !anotherColumnIsResizing && (onHover || thisColumnIsResizing);
-    const t3 = isDragging ? "bg-primary-bg dark:bg-primary-bg-dark" : "bg-surface-50 dark:bg-surface-800";
+    const t3 = isDragging ? "bg-primary-bg dark:bg-primary-bg-dark" : "bg-surface-50 dark:bg-surface-900";
     const t4 = !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-900 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-900/50";
     const t5 = column.frozen ? "sticky left-0 z-10" : "relative z-0";
     const t6 = isDraggable && "cursor-grab";
@@ -7502,7 +7514,7 @@
     }
     let t18;
     if ($[28] !== column.key || $[29] !== column.sortable || $[30] !== hovered || $[31] !== onColumnSort || $[32] !== onHover || $[33] !== openFilter || $[34] !== sort) {
-      t18 = column.sortable && (sort || hovered || openFilter) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "secondary", invisible: !sort, children: /* @__PURE__ */ jsxRuntime.jsxs(IconButton, { size: "small", className: onHover || openFilter ? "bg-white dark:bg-surface-800" : void 0, onClick: () => {
+      t18 = column.sortable && (sort || hovered || openFilter) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "secondary", invisible: !sort, children: /* @__PURE__ */ jsxRuntime.jsxs(IconButton, { size: "small", className: onHover || openFilter ? "bg-white dark:bg-surface-900" : void 0, onClick: () => {
         onColumnSort(column.key);
       }, children: [
         !sort && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}),
@@ -7534,7 +7546,7 @@
     }
     let t20;
     if ($[39] !== column || $[40] !== createFilterField || $[41] !== filter || $[42] !== hidden || $[43] !== onHover || $[44] !== openFilter || $[45] !== update) {
-      t20 = column.filter && createFilterField && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "secondary", invisible: !filter, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: openFilter, onOpenChange: setOpenFilter, className: hidden ? "hidden" : void 0, modal: true, trigger: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { className: onHover || openFilter ? "bg-white dark:bg-surface-800" : void 0, size: "small", onClick: handleSettingsClick, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FilterIcon, { size: iconSize.small }) }), children: /* @__PURE__ */ jsxRuntime.jsx(FilterForm, { column, filter, onHover, onFilterUpdate: update, createFilterField, hidden, setHidden }) }) }) });
+      t20 = column.filter && createFilterField && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "secondary", invisible: !filter, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: openFilter, onOpenChange: setOpenFilter, className: hidden ? "hidden" : void 0, modal: true, trigger: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { className: onHover || openFilter ? "bg-white dark:bg-surface-900" : void 0, size: "small", onClick: handleSettingsClick, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FilterIcon, { size: iconSize.small }) }), children: /* @__PURE__ */ jsxRuntime.jsx(FilterForm, { column, filter, onHover, onFilterUpdate: update, createFilterField, hidden, setHidden }) }) }) });
       $[39] = column;
       $[40] = createFilterField;
       $[41] = filter;
@@ -7963,7 +7975,7 @@
       setIsResizing(index_0);
       setCursorDocument(true);
     }, [setCursorDocument]);
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-800"), style: {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-900"), style: {
       height: headerHeight
     }, children: [
       columns.map((column_0, columnIndex) => {
@@ -8008,7 +8020,7 @@
     const onClick = t1;
     let t2;
     if ($[4] !== hoverRow || $[5] !== onRowClick || $[6] !== rowClassName || $[7] !== rowData) {
-      t2 = cls("flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-900", rowClassName ? rowClassName(rowData) : "", {
+      t2 = cls("flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-800", rowClassName ? rowClassName(rowData) : "", {
         "hover:!bg-surface-50/75 dark:hover:!bg-surface-800/75": hoverRow,
         "cursor-pointer ": onRowClick
       });
@@ -8104,7 +8116,7 @@
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
               position: "sticky",
               top: 0,
-              zIndex: 10
+              zIndex: 20
             }, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTableHeaderRow, { ...virtualTableProps }) }),
             !customView && children
           ] }) }),
@@ -8297,7 +8309,7 @@
     const customView = error ? /* @__PURE__ */ jsxRuntime.jsxs(CenteredView, { maxWidth: "2xl", className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", children: "Error" }),
       error?.message && /* @__PURE__ */ jsxRuntime.jsx(SafeLinkRenderer, { text: error.message })
-    ] }) : empty ? loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {}) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col overflow-auto items-center justify-center p-8 h-full", children: emptyComponent }) : void 0;
+    ] }) : empty ? loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12 px-8", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "small" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col overflow-auto items-center justify-center py-12 px-8", children: emptyComponent }) : void 0;
     const virtualListController = React.useMemo(() => ({
       data,
       rowHeight,
@@ -8392,7 +8404,7 @@
       t5 = $[8];
     }
     const style = t5;
-    const t6 = frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800";
+    const t6 = frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900";
     let t7;
     if ($[9] !== t6) {
       t7 = cls("flex-shrink-0", t6);
@@ -8473,7 +8485,7 @@
                 columnIndex,
                 extraData
               }
-            ) }, `cell_wrapper_${column.key}`) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex-shrink-0 relative", column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"), style: {
+            ) }, `cell_wrapper_${column.key}`) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex-shrink-0 relative", column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"), style: {
               minWidth: column.width,
               maxWidth: column.width,
               width: column.width