@rebasepro/ui 0.3.0 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -67,12 +67,10 @@
     "fast-equals": "6.0.0",
     "lucide-react": "1.14.0",
     "markdown-it": "^14.1.1",
-    "react-compiler-runtime": "1.0.0",
+    "tailwind-merge": "^2.6.1",
     "react-dropzone": "^14.4.1",
     "react-use-measure": "^2.1.7",
-    "react-window": "^1.8.11",
-    "tailwind-merge": "^2.6.1",
-    "@rebasepro/types": "0.3.0"
+    "react-window": "^1.8.11"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

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

@@ -32,7 +32,7 @@ const ButtonInner = React.memo(React.forwardRef<
    }: ButtonProps<React.ElementType>, ref) => {
 
     const baseClasses =
-        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-1.5 px-3 focus:outline-none transition-all ease-in-out duration-150 gap-1.5 active:scale-[0.98]";
+        "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,
@@ -68,11 +68,11 @@ const ButtonInner = React.memo(React.forwardRef<
 
     const sizeClasses = cls(
         {
-            "py-0.5 px-1.5": size === "small",
-            "py-1.5 px-3": size === "medium",
-            "py-2 px-4": size === "large",
-            "py-2.5 px-5": size === "xl",
-            "py-3 px-6": size === "2xl"
+            "py-1 px-2": size === "small",
+            "py-2 px-4": size === "medium",
+            "py-2.5 px-5": size === "large",
+            "py-3 px-6": size === "xl",
+            "py-4 px-10": size === "2xl"
         }
     );
 

package/src/components/Card.tsx

@@ -8,7 +8,7 @@ type CardProps = {
     style?: React.CSSProperties;
     onClick?: (e?: React.MouseEvent) => void;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({
     children,

package/src/components/DebouncedTextField.tsx

@@ -1,33 +1,76 @@
 "use client";
-import React, { ChangeEvent, useCallback, useDeferredValue, useEffect } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TextField, TextFieldProps } from "./index";
 
-export function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {
+type TextFieldChangeEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
 
-    const previousEventRef = React.useRef<ChangeEvent<any>>(undefined);
-    const [internalValue, setInternalValue] = React.useState(props.value);
+export function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {
 
-    const deferredValue = useDeferredValue(internalValue);
+    const [internalValue, setInternalValue] = useState<T | string>(props.value ?? "");
+    const lastSentValueRef = useRef<T | string>(props.value ?? "");
+    const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
+    // Sync state with props.value when it changes externally
     useEffect(() => {
-        setInternalValue(props.value);
+        const externalValue = props.value ?? "";
+        if (externalValue !== lastSentValueRef.current) {
+            setInternalValue(externalValue);
+            lastSentValueRef.current = externalValue;
+        }
     }, [props.value]);
 
+    // Cleanup timer on unmount
     useEffect(() => {
-        const emptyInitialValue = !props.value;
-        if (emptyInitialValue && !deferredValue)
-            return;
-        if (deferredValue !== props.value && previousEventRef.current && props.onChange) {
-            props.onChange(previousEventRef.current);
+        return () => {
+            if (timerRef.current) clearTimeout(timerRef.current);
+        };
+    }, []);
+
+    const flushChange = useCallback((value: T | string, event?: TextFieldChangeEvent) => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+        if (value !== props.value && props.onChange) {
+            lastSentValueRef.current = value;
+            const e = {
+                ...event,
+                target: {
+                    ...event?.target,
+                    value: value,
+                    name: props.name
+                }
+            } as TextFieldChangeEvent;
+            props.onChange(e);
         }
-    }, [deferredValue, props.value]);
+    }, [props.value, props.onChange, props.name]);
 
-    const internalOnChange = useCallback((event: ChangeEvent<any>) => {
-        previousEventRef.current = event;
-        setInternalValue(event.target.value);
-    }, []);
+    const internalOnChange = useCallback((event: TextFieldChangeEvent) => {
+        const newValue = event.target.value;
+        setInternalValue(newValue);
+
+        if (timerRef.current) clearTimeout(timerRef.current);
+
+        const eventCopy = {
+            ...event,
+            target: {
+                ...event?.target,
+                name: event?.target?.name
+            }
+        };
+
+        timerRef.current = setTimeout(() => {
+            flushChange(newValue, eventCopy as TextFieldChangeEvent);
+        }, 150);
+    }, [flushChange]);
+
+    const internalOnBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+        flushChange(internalValue, event as TextFieldChangeEvent);
+        props.onBlur?.(event);
+    }, [internalValue, flushChange, props.onBlur]);
 
     return <TextField {...props}
         onChange={internalOnChange}
-        value={internalValue}/>
+        onBlur={internalOnBlur}
+        value={internalValue as T}/>;
 }

package/src/components/FilterChip.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { cls } from "../util";
 
-export interface FilterChipProps {
+export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /**
      * The text label displayed on the chip.
      */
@@ -10,10 +10,6 @@ export interface FilterChipProps {
      * Whether the chip is currently in an active/selected state.
      */
     active?: boolean;
-    /**
-     * Callback when the chip is clicked.
-     */
-    onClick?: () => void;
     /**
      * Optional icon rendered before the label.
      */
@@ -23,10 +19,6 @@ export interface FilterChipProps {
      * @default "medium"
      */
     size?: "small" | "medium";
-    /**
-     * Additional class names.
-     */
-    className?: string;
     /**
      * Whether the chip is disabled.
      */
@@ -47,17 +39,19 @@ const sizeClasses = {
  *
  * @group Interactive components
  */
-export function FilterChip({
+export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(function FilterChip({
     children,
     active = false,
     onClick,
     icon,
     size = "medium",
     className,
-    disabled = false
-}: FilterChipProps) {
+    disabled = false,
+    ...rest
+}: FilterChipProps, ref) {
     return (
         <button
+            ref={ref}
             type="button"
             onClick={onClick}
             disabled={disabled}
@@ -76,9 +70,10 @@ export function FilterChip({
                 disabled && "opacity-50 cursor-not-allowed",
                 className
             )}
+            {...rest}
         >
             {icon}
             {children}
         </button>
     );
-}
+});

package/src/components/IconButton.tsx

@@ -19,10 +19,10 @@ const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-
 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 = {
-    medium: "w-9 !h-9 min-w-9 min-h-9",
-    small: "w-7 !h-7 min-w-7 min-h-7",
-    smallest: "w-5 !h-5 min-w-5 min-h-5",
-    large: "w-10 !h-10 min-w-10 min-h-10"
+    medium: "w-10 !h-10 min-w-10 min-h-10",
+    small: "w-8 !h-8 min-w-8 min-h-8",
+    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    large: "w-12 !h-12 min-w-12 min-h-12"
 }
 const shapeClasses = {
     circular: "rounded-full",

package/src/components/Tabs.tsx

@@ -107,7 +107,7 @@ export function Tabs({
 msOverflowStyle: "none" }}
             >
                 <TabsPrimitive.List className={cls(
-                    variant === "standard" && "inline-flex h-10 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border",
+                    variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border",
                     variant === "standard" && defaultBorderMixin,
                     variant === "boxy" && "flex items-center h-full",
                     variant === "pill" && "flex items-center gap-0.5",
@@ -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 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
+                variant === "standard" && "rounded-sm px-3 py-1 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/VirtualTable/VirtualTableHeaderRow.tsx

@@ -212,9 +212,10 @@ export const VirtualTableHeaderRow = ({
                 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 columnFilter = column && filter && filter[column.key] ? filter[column.key] : undefined;
                     const filterForThisProperty: [VirtualTableWhereFilterOp, unknown] | undefined =
-                        column && filter && filter[column.key]
-                            ? filter[column.key]
+                        columnFilter
+                            ? (Array.isArray(columnFilter[0]) ? (columnFilter as [VirtualTableWhereFilterOp, unknown][])[0] : (columnFilter as [VirtualTableWhereFilterOp, unknown]))
                             : undefined;
 
                     const isDraggable = !column.frozen && !!onColumnsOrderChange;

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -274,6 +274,25 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn
 };
 
+/**
+ * @see Table
+ * @group Components
+ */
+export type WhereFilterOp =
+    | "<"
+    | "<="
+    | "=="
+    | "!="
+    | ">="
+    | ">"
+    | "array-contains"
+    | "in"
+    | "not-in"
+    | "array-contains-any";
+
+export type FilterValues<Key extends string> =
+    Partial<Record<Key, [WhereFilterOp, unknown] | [WhereFilterOp, unknown][]>>;
+
 /**
  * @see Table
  * @group Components
@@ -284,7 +303,7 @@ export type VirtualTableSort = "asc" | "desc" | undefined;
  * @see Table
  * @group Components
  */
-export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [VirtualTableWhereFilterOp, unknown]>>;
+export type VirtualTableFilterValues<Key extends string> = FilterValues<Key>;
 
 /**
  * Filter conditions in a `Query.where()` clause are specified using the
@@ -292,14 +311,4 @@ export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [
  * @see Table
  * @group Models
  */
-export type VirtualTableWhereFilterOp =
-    | "<"
-    | "<="
-    | "=="
-    | "!="
-    | ">="
-    | ">"
-    | "array-contains"
-    | "in"
-    | "not-in"
-    | "array-contains-any";
+export type VirtualTableWhereFilterOp = WhereFilterOp;

package/src/index.css

@@ -117,7 +117,7 @@
 }
 
 .typography-button {
-    @apply text-[13px] font-semibold;
+    @apply text-sm font-semibold;
 }
 
 :focus-visible {