@rebasepro/ui 0.4.0 → 0.6.0

package/dist/src/index.css

@@ -0,0 +1,126 @@
+@theme {
+    /* Font Families */
+    --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
+
+    /* Colors */
+    --color-primary: #0070F4;
+    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
+    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
+    --color-secondary: #FF5B79;
+    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
+    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
+
+    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
+    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
+
+    /* Field Colors */
+    --color-field-disabled: rgb(224 224 226);
+    --color-field-disabled-dark: rgb(35 35 37);
+
+    /* Text Colors — using opaque values so icon strokes render solidly */
+    --color-text-primary: #212121;
+    --color-text-secondary: #757575;
+    --color-text-disabled: #9e9e9e;
+    --color-text-primary-dark: #ffffff;
+    --color-text-secondary-dark: #a0a0a9;
+    --color-text-disabled-dark: #757580;
+
+    /* Surface Colors */
+    --color-surface-50: #fafafa;
+    --color-surface-100: #f5f5f5;
+    --color-surface-200: #e5e5e5;
+    --color-surface-300: #d4d4d4;
+    --color-surface-400: #a3a3a3;
+    --color-surface-500: #737373;
+    --color-surface-600: #404040;
+    --color-surface-700: #262626;
+    --color-surface-800: #111111;
+    --color-surface-900: #0a0a0a;
+    --color-surface-950: #000000;
+
+    /* Surface Accent Colors */
+    --color-surface-accent-50: #f8fafc;
+    --color-surface-accent-100: #f1f5f9;
+    --color-surface-accent-200: #e2e8f0;
+    --color-surface-accent-300: #cbd5e1;
+    --color-surface-accent-400: #94a3b8;
+    --color-surface-accent-500: #64748b;
+    --color-surface-accent-600: #475569;
+    --color-surface-accent-700: #334155;
+    --color-surface-accent-800: #1e293b;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+.typography-h1 {
+    @apply text-6xl font-headers font-light tracking-tight;
+}
+
+.typography-h2 {
+    @apply text-5xl font-headers font-light tracking-tight;
+}
+
+.typography-h3 {
+    @apply text-4xl font-headers font-normal tracking-tight;
+}
+
+.typography-h4 {
+    @apply text-3xl font-headers font-normal tracking-tight;
+}
+
+.typography-h5 {
+    @apply text-2xl font-headers font-normal;
+}
+
+.typography-h6 {
+    @apply text-xl font-headers font-normal;
+}
+
+.typography-subtitle1 {
+    @apply text-lg font-headers font-medium;
+}
+
+.typography-subtitle2 {
+    @apply text-base font-headers font-medium;
+}
+
+.typography-body1 {
+    @apply text-base;
+}
+
+.typography-body2 {
+    @apply text-sm;
+}
+
+.typography-caption {
+    @apply text-xs;
+}
+
+.typography-label {
+    @apply text-sm font-medium;
+}
+
+.typography-inherit {
+    @apply text-inherit;
+}
+
+.typography-button {
+    @apply text-sm font-semibold;
+}
+
+:focus-visible {
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -46,32 +46,31 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-portal": "^1.1.10",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@radix-ui/react-checkbox": "^1.3.4",
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-menubar": "^1.1.17",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-portal": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.4.0",
+    "@radix-ui/react-select": "^2.3.0",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slider": "^1.4.0",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.14",
+    "@radix-ui/react-tooltip": "^1.2.9",
+    "@radix-ui/react-visually-hidden": "^1.2.5",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "fast-equals": "6.0.0",
-    "lucide-react": "1.14.0",
-    "markdown-it": "^14.1.1",
-    "react-compiler-runtime": "1.0.0",
-    "react-dropzone": "^14.4.1",
+    "lucide-react": "1.18.0",
+    "markdown-it": "^14.2.0",
+    "react-dropzone": "^15.0.0",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "tailwind-merge": "^2.6.1"
+    "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -82,24 +81,25 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^20.19.41",
+    "@types/node": "^25.9.3",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@types/react-window": "^1.8.8",
+    "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-react-compiler": "beta",
-    "cross-env": "^7.0.3",
-    "jest": "^29.7.0",
+    "cross-env": "^10.1.0",
+    "jest": "^30.4.2",
     "rollup-preserve-directives": "^1.1.3",
-    "tailwindcss": "^4.3.0",
-    "ts-jest": "^29.4.10",
-    "tsd": "^0.31.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.3",
-    "vite-plugin-static-copy": "^3.4.0"
+    "tailwindcss": "^4.3.1",
+    "ts-jest": "^29.4.11",
+    "tsd": "^0.33.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-static-copy": "^4.1.1"
   },
   "files": [
     "dist",
@@ -112,7 +112,7 @@
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "rm -rf dist || true && vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/index.css 2>/dev/null; tsc --emitDeclarationOnly -p tsconfig.prod.json",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",

package/src/components/BooleanSwitchWithLabel.tsx

@@ -86,9 +86,10 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
             )}
             onClick={disabled ? undefined : (e) => {
                 if (props.allowIndeterminate) {
-                    if (value === null || value === undefined) onValueChange?.(true)
-                    else if (value) onValueChange?.(false)
-                    else onValueChange?.(null as unknown as boolean); // SAFETY: null represents indeterminate state when allowIndeterminate is true
+                    const onChange = onValueChange as ((newValue: boolean | null) => void) | undefined;
+                    if (value === null || value === undefined) onChange?.(true)
+                    else if (value) onChange?.(false)
+                    else onChange?.(null);
                 } else {
                     onValueChange?.(!value);
                 }

package/src/components/DebouncedTextField.tsx

@@ -1,7 +1,9 @@
 "use client";
-import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TextField, TextFieldProps } from "./index";
 
+type TextFieldChangeEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
+
 export function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {
 
     const [internalValue, setInternalValue] = useState<T | string>(props.value ?? "");
@@ -24,7 +26,7 @@ export function DebouncedTextField<T extends string | number>(props: TextFieldPr
         };
     }, []);
 
-    const flushChange = useCallback((value: T | string, event?: ChangeEvent<any>) => {
+    const flushChange = useCallback((value: T | string, event?: TextFieldChangeEvent) => {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
             timerRef.current = undefined;
@@ -38,12 +40,12 @@ export function DebouncedTextField<T extends string | number>(props: TextFieldPr
                     value: value,
                     name: props.name
                 }
-            };
-            props.onChange(e as any);
+            } as TextFieldChangeEvent;
+            props.onChange(e);
         }
     }, [props.value, props.onChange, props.name]);
 
-    const internalOnChange = useCallback((event: ChangeEvent<any>) => {
+    const internalOnChange = useCallback((event: TextFieldChangeEvent) => {
         const newValue = event.target.value;
         setInternalValue(newValue);
 
@@ -58,17 +60,17 @@ export function DebouncedTextField<T extends string | number>(props: TextFieldPr
         };
 
         timerRef.current = setTimeout(() => {
-            flushChange(newValue, eventCopy as any);
+            flushChange(newValue, eventCopy as TextFieldChangeEvent);
         }, 150);
     }, [flushChange]);
 
-    const internalOnBlur = useCallback((event: React.FocusEvent<any>) => {
-        flushChange(internalValue, event as any);
+    const internalOnBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+        flushChange(internalValue, event as TextFieldChangeEvent);
         props.onBlur?.(event);
     }, [internalValue, flushChange, props.onBlur]);
 
     return <TextField {...props}
         onChange={internalOnChange}
         onBlur={internalOnBlur}
-        value={internalValue as T}/>
+        value={internalValue as T}/>;
 }

package/src/components/Dialog.tsx

@@ -26,6 +26,7 @@ export type DialogProps = {
      */
     disableInitialFocus?: boolean;
     portalContainer?: HTMLElement | null;
+    "aria-describedby"?: string;
 };
 
 const widthClasses = {
@@ -60,7 +61,8 @@ export const Dialog = ({
                            onPointerDownOutside,
                            onInteractOutside,
                            disableInitialFocus = true,
-                           portalContainer
+                           portalContainer,
+                           "aria-describedby": ariaDescribedby
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
@@ -92,7 +94,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 backdrop-blur-sm",
+                        className={cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black/50 dark:bg-black/60 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"
                         )}
@@ -111,7 +113,8 @@ export const Dialog = ({
                         }}
                         onPointerDownOutside={onPointerDownOutside}
                         onInteractOutside={onInteractOutside}
-                        className={cls("h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out")}
+                        aria-describedby={ariaDescribedby}
+                        className={cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div
                             className={cls(paperMixin,

package/src/components/ErrorBoundary.tsx

@@ -48,7 +48,8 @@ interface ErrorBoundaryState {
 export class ErrorBoundary extends React.Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
     constructor(props: PropsWithChildren<ErrorBoundaryProps>) {
         super(props);
-        this.state = { error: null, showDetails: false };
+        this.state = { error: null,
+showDetails: false };
     }
 
     static getDerivedStateFromError(error: Error) {
@@ -60,7 +61,8 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<ErrorBounda
     }
 
     private handleReset = () => {
-        this.setState({ error: null, showDetails: false });
+        this.setState({ error: null,
+showDetails: false });
         this.props.onReset?.();
     };
 

package/src/components/Table.tsx

@@ -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);
             }
         }, []);

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/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/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["']/;