@rebasepro/ui 0.5.0 → 0.6.1

package/src/components/Table.tsx

@@ -19,7 +19,7 @@ export const Table = React.memo(({
                           ...rest
                       }: TableProps) => (
     <table
-        className={cls("text-left text-surface-900 dark:text-white rounded-md overflow-x-auto", className)}
+        className={cls("text-left text-surface-900 dark:text-white rounded-lg overflow-x-auto", className)}
         style={style}
         {...rest}
     >
@@ -88,7 +88,7 @@ export const TableRow = React.memo(({
         style={style}
         className={cls(
             "bg-white dark:bg-surface-900",
-            onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "",
+            onClick ? "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer" : "",
             className
         )}
         {...rest}
@@ -137,6 +137,14 @@ export const TableCell = React.memo(({
     );
 });
 
+interface ReactFiber {
+    return: ReactFiber;
+    type: string | Function;
+    elementType?: {
+        name?: string;
+    };
+}
+
 // This is highly experimental and might break in the future
 function getParentName(element: HTMLElement | null): string | undefined {
     if (element) {
@@ -146,19 +154,19 @@ function getParentName(element: HTMLElement | null): string | undefined {
                 key.startsWith("__reactInternalInstance$")
             );
         });
-        // @ts-ignore
-        const domFiber = element[key];
-        // @ts-ignore
-        const getComponentFiber = (fiber) => {
-            let parentFiber = fiber.return;
-            while (typeof parentFiber.type === "string") {
-                parentFiber = parentFiber.return;
-            }
-            return parentFiber;
-        };
-        let fiber = getComponentFiber(domFiber);
-        fiber = getComponentFiber(fiber);
-        return fiber?.elementType?.name;
+        if (key) {
+            const domFiber = (element as unknown as Record<string, ReactFiber>)[key];
+            const getComponentFiber = (fiber: ReactFiber): ReactFiber => {
+                let parentFiber = fiber.return;
+                while (parentFiber && typeof parentFiber.type === "string") {
+                    parentFiber = parentFiber.return;
+                }
+                return parentFiber;
+            };
+            let fiber = getComponentFiber(domFiber);
+            fiber = getComponentFiber(fiber);
+            return fiber?.elementType?.name;
+        }
     }
     return undefined;
 }

package/src/components/TextField.tsx

@@ -53,7 +53,7 @@ export type TextFieldProps<T extends string | number> = {
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value">;
 
 export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | number>>(
     <T extends string | number>(
@@ -92,8 +92,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
         const hasValue = value !== undefined && value !== null && value !== "";
 
         useEffect(() => {
-            // @ts-ignore
-            if (inputRef.current && document.activeElement === inputRef.current) {
+            const element = inputRef && "current" in inputRef ? inputRef.current : null;
+            if (element && document.activeElement === element) {
                 setFocused(true);
             }
         }, []);
@@ -131,7 +131,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 style={inputStyle}
                 className={cls(
                     invisible ? focusedInvisibleMixin : "",
-                    "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
+                    "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
                     label ? "pt-8 pb-2" : "py-2",
                     disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
                     inputClassName
@@ -149,7 +149,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 style={inputStyle}
                 className={cls(
                     "w-full outline-none bg-transparent leading-normal px-3",
-                    "rounded-md",
+                    "rounded-lg",
                     "focused:text-text-primary focused:dark:text-text-primary-dark",
                     invisible ? focusedInvisibleMixin : "",
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -187,7 +187,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
             <div
                 ref={ref}
                 className={cls(
-                    "rounded-md relative max-w-full",
+                    "rounded-lg relative max-w-full",
                     invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     error ? "border border-red-500 dark:border-red-600" : "",

package/src/components/Tooltip.tsx

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

package/src/components/VirtualTable/VirtualTable.performance.test.tsx

@@ -9,7 +9,7 @@ import { VirtualTableProps } from "./VirtualTableProps";
 // Mock VirtualTableRow to track renders
 const renderCallback = jest.fn();
 jest.mock("./VirtualTableRow", () => {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
+
     const React = require("react");
     // Ensure it's memoized as in the real component, otherwise it would re-render anyway if parent renders
     // But wait, if parent passes new props, it re-renders.

package/src/components/VirtualTable/VirtualTable.tsx

@@ -4,7 +4,6 @@ import React, { createContext, forwardRef, RefObject, useCallback, useEffect, us
 
 import { deepEqual as equal } from "fast-equals"
 
-// @ts-expect-error -- react-window does not ship type declarations and @types/react-window is not installed
 import { FixedSizeList as List } from "react-window";
 import useMeasure from "react-use-measure";
 
@@ -320,7 +319,7 @@ export const VirtualTable = React.memo<VirtualTableProps<Record<string, unknown>
         }, [checkFilterCombination, currentSort, onFilterUpdate, sortByProperty]);
 
         const empty = !loading && (data?.length ?? 0) === 0;
-        const customView = error
+        const customView = (error && (data?.length ?? 0) === 0)
             ? <CenteredView maxWidth={"2xl"}
                 className="flex flex-col gap-2">
 

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -110,10 +110,21 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<Record<stri
                         <div
                             className={`flex items-center justify-${column.headerAlign} flex-row`}>
 
-                            {column.icon}
+                            {column.icon && (
+                                <div className="flex-shrink-0 flex items-center justify-center mr-1">
+                                    {React.isValidElement(column.icon) ? (
+                                        React.cloneElement(column.icon as React.ReactElement<any>, {
+                                            size: 14,
+                                            className: cls((column.icon as React.ReactElement<any>).props?.className, "flex-shrink-0")
+                                        })
+                                    ) : (
+                                        column.icon
+                                    )}
+                                </div>
+                            )}
 
                             <div
-                                className="truncate -webkit-box w-full mx-1 overflow-hidden"
+                                className="truncate -webkit-box w-full mr-1 overflow-hidden"
                                 style={{
                                     WebkitBoxOrient: "vertical",
                                     WebkitLineClamp: 2,
@@ -130,27 +141,29 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<Record<stri
                             <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
 
                         {column.sortable && (sort || hovered || openFilter) &&
-                            <Badge color="secondary"
-                                invisible={!sort}>
-                                <IconButton
-                                    size={"small"}
-                                    className={onHover || openFilter ? "bg-white dark:bg-surface-900" : undefined}
-                                    onClick={() => {
-                                        onColumnSort(column.key as Extract<keyof M, string>);
-                                    }}
-                                >
-                                    {!sort &&
-                                        <ArrowUpIcon/>}
-                                    {sort === "asc" &&
-                                        <ArrowUpIcon/>}
-                                    {sort === "desc" &&
-                                        <ArrowUpIcon className={"rotate-180"}/>}
-                                </IconButton>
-                            </Badge>
+                            <div className="flex-shrink-0">
+                                <Badge color="secondary"
+                                    invisible={!sort}>
+                                    <IconButton
+                                        size={"small"}
+                                        className={onHover || openFilter ? "bg-white dark:bg-surface-900" : undefined}
+                                        onClick={() => {
+                                            onColumnSort(column.key as Extract<keyof M, string>);
+                                        }}
+                                    >
+                                        {!sort &&
+                                            <ArrowUpIcon size={14} className="flex-shrink-0" />}
+                                        {sort === "asc" &&
+                                            <ArrowUpIcon size={14} className="flex-shrink-0" />}
+                                        {sort === "desc" &&
+                                            <ArrowUpIcon size={14} className="flex-shrink-0 rotate-180" />}
+                                    </IconButton>
+                                </Badge>
+                            </div>
                         }
                     </>
 
-                    {column.filter && createFilterField && <div>
+                    {column.filter && createFilterField && <div className="flex-shrink-0">
                         <Badge color="secondary"
                             invisible={!filter}>
 
@@ -164,7 +177,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<Record<stri
                                         className={onHover || openFilter ? "bg-white dark:bg-surface-900" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
-                                        <FilterIcon size={iconSize.small}/>
+                                        <FilterIcon size={14} className="flex-shrink-0"/>
                                     </IconButton>}
                             >
                                 <FilterForm column={column}

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -31,7 +31,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<Record<string, un
                     "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,
+                        "hover:!bg-primary/[0.03] dark:hover:!bg-primary/5": hoverRow,
                         "cursor-pointer ": onRowClick
                     }
                 )}

package/src/hooks/useDebounceCallback.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export function useDebounceCallback<T extends (...args: any[]) => unknown>(
     callback?: T,
     delay?: number

package/src/icons/Icon.tsx

@@ -11,7 +11,7 @@ export const iconSize = {
     smallest: 16,
     small: 20,
     medium: 24,
-    large: 28,
+    large: 28
 } as const satisfies Record<IconSize, number>;
 
 export type IconProps = {

package/src/icons/icon_keys.ts

@@ -1933,4 +1933,4 @@ export const iconKeys = [
     "ZodiacVirgo",
     "ZoomIn",
     "ZoomOut"
-];
+];

package/src/icons/index.ts

@@ -125,5 +125,5 @@ export {
     VoteIcon,
     Wand2Icon,
     XCircleIcon,
-    XIcon,
+    XIcon
 } from "lucide-react";

package/src/index.css

@@ -65,51 +65,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-normal;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
-    @apply text-base;
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -117,7 +117,7 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {

package/src/scripts/fixIconSizes.cjs

@@ -20,7 +20,7 @@ const SIZE_MAP = {
     smallest: 16,
     small: 20,
     medium: 24,
-    large: 28,
+    large: 28
 };
 
 const files = process.argv.slice(2);
@@ -46,21 +46,21 @@ for (const filePath of files) {
         // We replace size={"small"} -> size={20} only when it appears on a lucide icon line
         const patterns = [
             `size={"${sizeStr}"}`,
-            `size="${sizeStr}"`,
+            `size="${sizeStr}"`
         ];
-        
+
         for (const pattern of patterns) {
             const replacement = `size={${sizeNum}}`;
-            
+
             // Process line by line to check context
             const lines = modified.split("\n");
             for (let i = 0; i < lines.length; i++) {
                 const line = lines[i];
                 if (!line.includes(pattern)) continue;
-                
+
                 // Skip if this is IconButton, CircularProgress, or other non-lucide components
                 if (/\<(IconButton|CircularProgress|Icon |AIIcon|FileIcon|IconForView|CollectionSize)/.test(line)) continue;
-                
+
                 // Check if this line contains a lucide-style icon component (PascalCase ending with Icon)
                 if (/\<[A-Z][a-zA-Z0-9]+Icon/.test(line)) {
                     const newLine = line.replace(pattern, replacement);
@@ -80,7 +80,7 @@ for (const filePath of files) {
             // Add iconSize import — but actually we're using raw numbers, not iconSize references
             // So no import needed. The migration from previous session already set up the constants.
         }
-        
+
         fs.writeFileSync(filePath, modified, "utf8");
         console.log(`✅ ${path.relative(process.cwd(), filePath)}: ${fileReplacements} replacement(s)`);
         totalReplacements += fileReplacements;

package/src/scripts/fixIconSizesToConst.cjs

@@ -16,7 +16,7 @@ const SIZE_MAP = {
     16: "iconSize.smallest",
     20: "iconSize.small",
     24: "iconSize.medium",
-    28: "iconSize.large",
+    28: "iconSize.large"
 };
 
 // Regex to match lucide icon components with raw numeric sizes
@@ -71,7 +71,7 @@ for (const filePath of files) {
     if (!content.includes("iconSize")) {
         // This shouldn't happen since we just added it, but safety check
     }
-    
+
     if (content.includes("iconSize") && !content.match(/import\s.*iconSize/)) {
         // Try to add to existing @rebasepro/ui import
         const uiImportRe = /import\s*\{([^}]+)\}\s*from\s*["']@rebasepro\/ui["']/;

package/src/scripts/generateIconKeys.ts

@@ -4,15 +4,15 @@ import { fileURLToPath } from "url";
 import * as LucideIcons from "lucide-react";
 
 export async function generateIconKeys() {
-    const keys = Object.keys(LucideIcons).filter(k => 
-        k !== "createLucideIcon" && 
-        k !== "default" && 
-        k !== "icons" && 
-        k !== "LucideIcon" && 
-        k !== "Icon" && 
+    const keys = Object.keys(LucideIcons).filter(k =>
+        k !== "createLucideIcon" &&
+        k !== "default" &&
+        k !== "icons" &&
+        k !== "LucideIcon" &&
+        k !== "Icon" &&
         k !== "LucideProvider" &&
         k !== "useLucideContext" &&
-        !k.endsWith("Node") && 
+        !k.endsWith("Node") &&
         !k.endsWith("Props") &&
         !k.endsWith("Icon") &&
         // Filter out Lucide-prefixed duplicates (e.g. "LucideArrowDown" duplicates "ArrowDown")

package/src/scripts/saveIconFiles.ts

@@ -22,7 +22,7 @@ export function saveIconFiles(iconKeys: string[]) {
 
         // Ensure key works as component name
         let componentName = `${key}Icon`;
-        
+
         // Handle names that might start with numbers like "10k" -> "_10k"
         if (/^[0-9]/.test(componentName)) {
             componentName = `_${componentName}`;

package/src/styles.ts

@@ -1,12 +1,12 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
-export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-0 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-900 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-900/0";
-export const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90";
-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-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 focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
+export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
+export const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
+export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
+export const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+export const defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
+export const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
+export const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
+export const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
 export const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";

package/src/util/debounce.ts

@@ -1,13 +1,12 @@
 /**
  * @ignore
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export function debounce<T extends (...args: any[]) => unknown>(func: T, wait = 166) {
     let timeout: ReturnType<typeof setTimeout>;
 
-    function debounced(...args: Parameters<T>) {
+    function debounced(this: unknown, ...args: Parameters<T>) {
         const later = () => {
-            // @ts-ignore
             func.apply(this, args);
         };
         clearTimeout(timeout);