@rebasepro/ui 0.0.1-canary.eae7889 → 0.1.0

package/dist/styles.d.ts

@@ -7,6 +7,6 @@ export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opac
 export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
 export declare const defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
 export declare const paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-export declare const cardMixin = "bg-white dark:bg-surface-800 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
+export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
 export declare const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.0.1-canary.eae7889",
+  "version": "0.1.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -62,14 +62,14 @@
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "fast-equals": "5.3.0",
+    "fast-equals": "6.0.0",
     "lucide-react": "1.14.0",
     "markdown-it": "^14.1.0",
     "react-dropzone": "^14.3.8",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
     "tailwind-merge": "^2.6.0",
-    "@rebasepro/types": "0.0.1-canary.eae7889"
+    "@rebasepro/types": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -95,7 +95,6 @@
     "rollup-preserve-directives": "^1.1.3",
     "tailwindcss": "^4.1.3",
     "ts-jest": "^29.4.5",
-    "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
     "typescript": "^5.9.3",
     "vite": "^7.2.4",

package/src/components/Alert.tsx

@@ -26,16 +26,16 @@ const getSizeClasses = (size: "small" | "medium" | "large") => {
 const getColorClasses = (severity: string) => {
     switch (severity) {
         case "error":
-            return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900";
+            return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900 border-l-[3px] border-l-red-500";
         case "warning":
-            return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
+            return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900 border-l-[3px] border-l-amber-500";
         case "info":
-            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900 border-l-[3px] border-l-blue-500";
         case "success":
-            return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
+            return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900 border-l-[3px] border-l-emerald-500";
         case "base":
         default:
-            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
+            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900 border-l-[3px] border-l-surface-accent-400";
     }
 };
 

package/src/components/BooleanSwitch.tsx

@@ -56,7 +56,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
             {allowIndeterminate && (value === null || value === undefined) && <div
                 key={"knob"}
                 className={cls(
-                    "block rounded-full transition-transform duration-100 transform will-change-auto",
+                    "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
                     disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
                     {
                         "w-[21px] h-[10px]": size === "medium" || size === "large",
@@ -72,8 +72,8 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
             {!(allowIndeterminate && (value === null || value === undefined)) && <div
                 key={"knob"}
                 className={cls(
-                    "block rounded-full transition-transform duration-100 transform will-change-auto",
-                    disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
+                    "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
+                    disabled ? "bg-surface-accent-300 dark:bg-surface-700" : (value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
                     {
                         "w-[21px] h-[21px]": size === "medium" || size === "large",
                         "w-[19px] h-[19px]": size === "small",

package/src/components/Button.tsx

@@ -32,32 +32,32 @@ const ButtonInner = React.memo(React.forwardRef<
    }: ButtonProps<any>, ref) => {
 
     const baseClasses =
-        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2";
+        "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]";
 
     const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
 
         // Filled Variants
-        "border border-primary bg-primary focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
-        "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 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 hover:ring-1 hover:ring-surface-accent-400 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-900 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,
+        "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: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/Checkbox.tsx

@@ -89,7 +89,7 @@ export const Checkbox = React.memo(({
                         (indeterminate || isChecked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
                         disabled
                             ? "border-transparent"
-                            : (indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
+                            : (indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500")
                     )}>
                     <CheckboxPrimitive.Indicator asChild>
                         {indeterminate

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/Dialog.tsx

@@ -92,7 +92,7 @@ export const Dialog = ({
                 <div className={cls("fixed inset-0 z-50", containerClassName)}>
 
                     <DialogPrimitive.Overlay
-                        className={cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/60  backdrop-blur-sm ",
+                        className={cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 backdrop-blur-sm",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}
@@ -127,7 +127,7 @@ export const Dialog = ({
                                 fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
                                 "ease-in-out duration-200",
                                 scrollable && "overflow-y-auto",
-                                displayed && open ? "opacity-100" : "opacity-0",
+                                displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]",
                                 maxWidth && !fullScreen ? widthClasses[maxWidth] : undefined,
                                 className
                             )}>

package/src/components/ExpandablePanel.tsx

@@ -96,7 +96,7 @@ export function ExpandablePanel({
                     <div
                         className={cls(
                             "rounded-t flex items-center justify-between w-full min-h-[52px]",
-                            "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40",
+                            "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50",
                             invisible ? "border-b px-2" : "p-4",
                             open ? "py-6" : "py-4",
                             "transition-all duration-200",

package/src/components/FileUpload.tsx

@@ -19,7 +19,7 @@ export type OnFilesUploadAdded = (files: File[]) => void;
 
 export type FileUploadProps = {
     // e.g. accept={{ "*/image": [] }}
-    accept: Record<string, string[]>,
+    accept?: Record<string, string[]>,
     onFilesAdded: OnFilesUploadAdded,
     onFilesRejected?: OnFileUploadRejected,
     maxSize?: number,

package/src/components/IconButton.tsx

@@ -15,7 +15,7 @@ export type IconButtonProps<C extends React.ElementType> =
     "aria-label"?: string;
 }
 
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
 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 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {

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);
@@ -81,7 +86,7 @@ export function SearchBar({
                 heightClass,
                 "bg-surface-accent-50 dark:bg-surface-900 border",
                 defaultBorderMixin,
-                "focus-within:ring-2 focus-within:ring-primary focus-within:border-primary",
+                "focus-within:ring-1 focus-within:ring-primary/60 focus-within:border-primary focus-within:shadow-[0_0_0_3px_rgba(0,112,244,0.1)]",
                 "rounded-lg overflow-hidden",
                 className)}>
             <div

package/src/components/Select.tsx

@@ -237,7 +237,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {/* Pass the calculated finalContainer */}
             <SelectPrimitive.Portal container={finalContainer}>
                 <SelectPrimitive.Content position={position}
-                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg", defaultBorderMixin)}>
+                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg shadow-lg animate-in fade-in-0 zoom-in-95 duration-150", defaultBorderMixin)}>
                     <SelectPrimitive.Viewport className={cls("p-1", viewportClassName)}
                         style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}

package/src/components/Separator.tsx

@@ -15,12 +15,12 @@ export function Separator({
             <SeparatorPrimitive.Root
                 decorative={decorative}
                 orientation="horizontal"
-                className={cls("dark:bg-opacity-80 dark:bg-surface-900 dark:bg-surface-900/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
+                className={cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
         );
     else
         return (
             <SeparatorPrimitive.Root
-                className={cls("dark:bg-opacity-80 dark:bg-surface-900 dark:bg-surface-900/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
+                className={cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
                 decorative={decorative}
                 orientation="vertical"
             />

package/src/components/Skeleton.tsx

@@ -40,8 +40,8 @@ export function Skeleton({
             className)
     }>
         <span
-            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 dark:via-white/5 to-transparent"
-            style={{ animation: "shimmer 1s infinite" }}
+            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent"
+            style={{ animation: "shimmer 1.8s ease-in-out infinite" }}
         />
     </span>;
 }

package/src/components/Tabs.tsx

@@ -161,7 +161,7 @@ export function Tab({
                 "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
                 "disabled:pointer-events-none disabled:opacity-50",
-                variant === "standard" && "rounded-sm px-3 py-1.5 data-[state=active]:bg-white data-[state=active]:text-surface-900 dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
+                variant === "standard" && "rounded-sm px-3 py-1.5 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
                 variant === "boxy" && cls(
                     "flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-[12px] font-medium transition-colors group relative box-border overflow-hidden",
                     "border-b-2 border-b-transparent",

package/src/components/ToggleButtonGroup.tsx

@@ -55,7 +55,7 @@ export function ToggleButtonGroup<T extends string = string>({
                     className={cls(
                         "flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors",
                         value === option.value
-                            ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300"
+                            ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300 shadow-sm"
                             : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700",
                         option.disabled && "opacity-50 cursor-not-allowed"
                     )}

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);

package/src/index.css

@@ -97,6 +97,7 @@
 }
 
 .typography-body1 {
+    @apply text-base;
 }
 
 .typography-body2 {

package/src/styles.ts

@@ -7,6 +7,6 @@ export const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 d
 export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
 export const defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
 export const paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-export const cardMixin = "bg-white dark:bg-surface-800 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+export const cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
+export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
 export const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";