@rebasepro/ui 0.0.1-canary.f81da60 → 0.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.0.1-canary.f81da60",
+  "version": "0.1.2",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -69,7 +69,7 @@
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
     "tailwind-merge": "^2.6.0",
-    "@rebasepro/types": "0.0.1-canary.f81da60"
+    "@rebasepro/types": "0.1.2"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/Button.tsx

@@ -42,22 +42,22 @@ const ButtonInner = React.memo(React.forwardRef<
         "border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
         "border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
         "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": variant === "filled" && color === "error" && !disabled,
-        "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": variant === "filled" && color === "text" && !disabled,
-        "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": variant === "filled" && color === "neutral" && !disabled,
+        "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": variant === "filled" && color === "text" && !disabled,
+        "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": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants
         "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": variant === "text" && color === "primary" && !disabled,
         "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": variant === "text" && color === "secondary" && !disabled,
         "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": variant === "text" && color === "error" && !disabled,
-        "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": variant === "text" && color === "text" && !disabled,
-        "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": variant === "text" && color === "neutral" && !disabled,
+        "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": variant === "text" && color === "text" && !disabled,
+        "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": variant === "text" && color === "neutral" && !disabled,
 
         // Outlined Variants
         "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
         "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
-        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": variant === "outlined" && color === "text" && !disabled,
-        "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": variant === "outlined" && color === "neutral" && !disabled,
+        "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": variant === "outlined" && color === "text" && !disabled,
+        "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": variant === "outlined" && color === "neutral" && !disabled,
 
         // Disabled states for all variants
         "text-text-disabled dark:text-text-disabled-dark": disabled,

package/src/components/DateTimeField.tsx

@@ -292,7 +292,7 @@ hour12: false,
                     }}
                     className="absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!"
                 >
-                    <CalendarIcon color={"disabled"}/>
+                    <CalendarIcon/>
                 </IconButton>
                 {clearable && value && (
                     <IconButton

package/src/components/SearchBar.tsx

@@ -28,6 +28,10 @@ interface SearchBarProps {
     disabled?: boolean;
     loading?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Optional initial value for the search input, e.g. from URL params.
+     */
+    initialValue?: string;
 }
 
 export function SearchBar({
@@ -41,10 +45,11 @@ export function SearchBar({
     autoFocus,
     disabled,
     loading,
-    inputRef
+    inputRef,
+    initialValue
 }: SearchBarProps) {
 
-    const [searchText, setSearchText] = useState<string>("");
+    const [searchText, setSearchText] = useState<string>(initialValue ?? "");
     const [active, setActive] = useState<boolean>(false);
 
     const deferredValues = useDebounceValue(searchText, 200);

package/src/components/Tooltip.tsx

@@ -65,7 +65,7 @@ export const Tooltip = ({
 
     return (
         <TooltipPrimitive.Provider delayDuration={delayDuration}>
-            <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
+            <TooltipPrimitive.Root {...(open !== undefined ? { open, onOpenChange } : {})} defaultOpen={defaultOpen}>
                 {trigger}
                 <TooltipPrimitive.Portal container={finalContainer}>
                     <TooltipPrimitive.Content

package/src/components/VirtualTable/VirtualTable.tsx

@@ -8,7 +8,7 @@ import { deepEqual as equal } from "fast-equals"
 import { FixedSizeList as List } from "react-window";
 import useMeasure from "react-use-measure";
 
-import { CircularProgressCenter } from "../CircularProgressCenter";
+import { CircularProgress } from "../CircularProgress";
 import {
     OnVirtualTableColumnResizeParams,
     VirtualTableColumn,
@@ -74,7 +74,7 @@ const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
                                 }}>
                                 <div style={{ position: "sticky",
 top: 0,
-zIndex: 10 }}>
+zIndex: 20 }}>
                                     <VirtualTableHeaderRow {...virtualTableProps}/>
                                 </div>
                                 {!customView && children}
@@ -333,9 +333,11 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             </CenteredView>
             : (empty
                 ? (loading
-                    ? <CircularProgressCenter/>
+                    ? <div className="flex items-center justify-center py-12 px-8">
+                        <CircularProgress size="small"/>
+                    </div>
                     : <div
-                        className="flex flex-col overflow-auto items-center justify-center p-8 h-full">
+                        className="flex flex-col overflow-auto items-center justify-center py-12 px-8">
                         {emptyComponent}
                     </div>)
                 : undefined);
@@ -469,7 +471,7 @@ const SortableCellWrapper = ({
             style={style}
             className={cls(
                 "flex-shrink-0",
-                frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"
+                frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
             )}
             {...attrsWithoutTabIndex}
         >
@@ -579,7 +581,7 @@ function MemoizedList({
                                     key={`cell_wrapper_${column.key}`}
                                     className={cls(
                                         "flex-shrink-0 relative",
-                                        column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"
+                                        column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
                                     )}
                                     style={{
                                         minWidth: column.width,

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -90,7 +90,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center",
                         isDragging
                             ? "bg-primary-bg dark:bg-primary-bg-dark"
-                            : "bg-surface-50 dark:bg-surface-800",
+                            : "bg-surface-50 dark:bg-surface-900",
                         "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
                         !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",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0",
@@ -134,7 +134,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                 invisible={!sort}>
                                 <IconButton
                                     size={"small"}
-                                    className={onHover || openFilter ? "bg-white dark:bg-surface-800" : undefined}
+                                    className={onHover || openFilter ? "bg-white dark:bg-surface-900" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
@@ -161,7 +161,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                 modal={true}
                                 trigger={
                                     <IconButton
-                                        className={onHover || openFilter ? "bg-white dark:bg-surface-800" : undefined}
+                                        className={onHover || openFilter ? "bg-white dark:bg-surface-900" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
                                         <FilterIcon size={iconSize.small}/>

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -209,7 +209,7 @@ export const VirtualTableHeaderRow = ({
     return (
         <>
             <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")}
+                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 }}>
                 {columns.map((column, columnIndex) => {
                     const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -28,7 +28,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-900",
+                    "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,

package/src/index.css

@@ -50,8 +50,8 @@
     --color-surface-accent-600: #475569;
     --color-surface-accent-700: #334155;
     --color-surface-accent-800: #1e293b;
-    --color-surface-accent-900: #0f172a;
-    --color-surface-accent-950: #020617;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
 }
 
 /* Chrome, Safari and Opera */