@rebasepro/ui 0.3.0 → 0.5.0

package/README.md

@@ -1,84 +1,142 @@
-## Rebase UI
-
-
-**Rebase UI** is a high quality set of components that you can use to build your own custom views. You can
-use these components to build your own Rebase views, or in any other React application. You just need to install
-`tailwindcss` and the `@rebasepro/ui` package.
-
-### Why build this UI kit?
-Rebase was using MUI until version 3.0. MUI provides ready to use components with intuitive APIs, but it also
-comes with a lot of complexity and overhead. We wanted to build a simpler and more flexible UI kit that could be used
-in any React project, not just in Rebase.
-We also wanted to make it easy to transition from MUI to our new UI kit, so we kept the API as similar as possible.
-The result it a set of components that are easy to use, easy to customize, **much more performant** and with a smaller bundle size.
-
-The components are primarily built using **Radix UI** primitives and **tailwindcss**. This means that you can easily customize them
-using tailwindcss classes or override the styles using CSS.
-
-See the full list of components in https://rebase.pro/docs/components
-
-
-> All the components are exported from the `@rebasepro/ui` package. These are the same components used internally in **Rebase**.
+# @rebasepro/ui
 
+React component library and design system for the Rebase ecosystem. Built on Radix UI primitives, Tailwind CSS, and lucide-react icons.
 
 ## Installation
 
-If you are using Rebase, you don't need to install this package, as it is already included, and
-configured for you.
-
-To use the components in your own project, you need to install the `@rebasepro/ui` package:
-
-```bash
-yarn add @rebasepro/ui
-```
-or
 ```bash
-npm install @rebasepro/ui
+pnpm add @rebasepro/ui
 ```
 
-You also need to install `tailwindcss`:
+### Peer Dependencies
 
-```bash
-yarn add tailwindcss @tailwindcss/typography
-```
-
-And initialize it in your project:
+- `react` >= 19.0.0
+- `react-dom` >= 19.0.0
 
-```bash
-npx tailwindcss init
-```
+## What This Package Does
 
-And add then add the rebase preset in your `tailwind.config.js`:
+`@rebasepro/ui` provides all the shared UI primitives used across Rebase packages (`@rebasepro/studio`, `@rebasepro/admin`, etc.). It wraps Radix UI components with Rebase's design tokens and Tailwind styling, and re-exports lucide-react icons so other packages don't need direct icon dependencies.
 
-```javascript
-import rebaseConfig from "@rebasepro/ui/tailwind.config.js";
+Import the stylesheet in your app:
 
-export default {
-    presets: [rebaseConfig],
-    content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx}",
-        "./node_modules/@rebasepro/**/src/**/*.{js,ts,jsx,tsx}"
-    ]
-};
+```typescript
+import "@rebasepro/ui/index.css";
 ```
-(You might need to adjust the paths in the `content` array to match your project structure)
 
-Finally, you need to define your primary and secondary colors in your `index.css` file:
-
-```css
-@import 'tailwindcss';
-@import "@rebasepro/ui/index.css" layer(base);
-
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
-@source "../index.html";
-@source "./**/*.{js,ts,jsx,tsx}";
-@source "../node_modules/@rebasepro/**/*.{js,ts,jsx,tsx}";
+## Key Exports
+
+### Components
+
+| Component | Description |
+|---|---|
+| `Alert` | Status messages and notifications |
+| `Autocomplete` | Text input with suggestions |
+| `Avatar` | User avatar display |
+| `Badge` | Small status indicator |
+| `BooleanSwitch` / `BooleanSwitchWithLabel` | Toggle switch |
+| `Button` / `IconButton` / `LoadingButton` | Action buttons |
+| `Card` | Content container card |
+| `CenteredView` | Horizontally/vertically centered layout |
+| `Checkbox` | Checkbox input (Radix) |
+| `Chip` / `FilterChip` | Tag-like chips |
+| `CircularProgress` / `CircularProgressCenter` | Loading spinners |
+| `Collapse` | Collapsible content (Radix) |
+| `ColorPicker` | Color selection input |
+| `Container` | Max-width content wrapper |
+| `DateTimeField` | Date/time picker input |
+| `DebouncedTextField` | Text field with debounced onChange |
+| `Dialog` / `DialogTitle` / `DialogContent` / `DialogActions` | Modal dialogs (Radix) |
+| `ErrorBoundary` | React error boundary |
+| `ExpandablePanel` | Expandable/collapsible panel |
+| `FileUpload` | Drag-and-drop file upload (react-dropzone) |
+| `InputLabel` / `InfoLabel` / `Label` | Form labels |
+| `Markdown` | Markdown renderer (markdown-it) |
+| `Menu` / `Menubar` | Dropdown and menu bar (Radix) |
+| `MultiSelect` | Multi-value select input |
+| `Paper` | Elevated surface |
+| `Popover` | Popover overlay (Radix) |
+| `RadioGroup` | Radio button group (Radix) |
+| `ResizablePanels` | Resizable split panes |
+| `SearchBar` | Search input with icon |
+| `Select` | Single-value select (Radix) |
+| `Separator` | Visual divider (Radix) |
+| `Sheet` | Slide-out panel |
+| `Skeleton` | Loading placeholder |
+| `Slider` | Range slider (Radix) |
+| `Table` / `VirtualTable` | Data tables (VirtualTable uses react-window) |
+| `Tabs` | Tab navigation (Radix) |
+| `TextareaAutosize` | Auto-resizing textarea |
+| `TextField` | Text input field |
+| `ToggleButtonGroup` | Segmented toggle buttons |
+| `Tooltip` | Hover tooltip (Radix) |
+| `Typography` | Text with variant styling |
+
+### Re-exported Radix Primitives
+
+```typescript
+import { Portal, PopoverPrimitive, Slot } from "@rebasepro/ui";
+```
 
-:root {
-    --color-primary: #0070F4;
-    --color-secondary: #FF5B79;
+### Style Mixins
+
+Tailwind class-string constants for consistent styling:
+
+| Export | Description |
+|---|---|
+| `focusedClasses` | Ring styles for focused elements |
+| `fieldBackgroundMixin` | Standard field background |
+| `fieldBackgroundHoverMixin` | Hover state for fields |
+| `defaultBorderMixin` | Default border color |
+| `paperMixin` | Paper/card surface style |
+| `cardMixin` / `cardClickableMixin` / `cardSelectedMixin` | Card variants |
+
+### Utilities
+
+| Export | Description |
+|---|---|
+| `cls(...)` | Class name merge utility (wraps `clsx`) |
+| `debounce` | Debounce function |
+| `chipColors` | Color palette for chips |
+| `keyToIconComponent` | Map icon string key to lucide component |
+
+### Hooks
+
+| Hook | Description |
+|---|---|
+| `useInjectStyles` | Inject CSS into the document head |
+| `useOutsideAlerter` | Detect clicks outside a ref |
+| `useDebouncedCallback` | Debounced callback hook |
+| `useDebounceCallback` | Callback debounce variant |
+| `useDebounceValue` | Debounced value hook |
+| `PortalContainerContext` | Context for portal target container |
+
+### Icons
+
+Re-exports ~100 individual lucide-react icon components (e.g. `ArrowRightIcon`, `SearchIcon`, `PlusIcon`), the full `lucideIcons` map, the `Icon` component, `GitHubIcon`, `HandleIcon`, `iconKeys`, and `coolIconKeys`.
+
+## Quick Start
+
+```tsx
+import { Button, TextField, Typography, cls } from "@rebasepro/ui";
+import { SearchIcon } from "@rebasepro/ui";
+import "@rebasepro/ui/index.css";
+
+function MyForm() {
+    return (
+        <div className={cls("flex flex-col gap-4 p-4")}>
+            <Typography variant="h6">Search</Typography>
+            <TextField placeholder="Type to search..." />
+            <Button variant="filled">
+                <SearchIcon size={16} />
+                Search
+            </Button>
+        </div>
+    );
 }
 ```
 
+## Related Packages
+
+- `@rebasepro/studio` — Dev tools layer (depends on this package)
+- `@rebasepro/admin` — CMS layer (depends on this package)
+- `@rebasepro/core` — Core framework (uses this for shared UI)

package/dist/components/Card.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
-type CardProps = {
+declare const Card: React.ForwardRefExoticComponent<{
     children: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: (e?: React.MouseEvent) => void;
     className?: string;
-};
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { Card };

package/dist/components/FilterChip.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export interface FilterChipProps {
+export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /**
      * The text label displayed on the chip.
      */
@@ -8,10 +8,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.
      */
@@ -21,10 +17,6 @@ export interface FilterChipProps {
      * @default "medium"
      */
     size?: "small" | "medium";
-    /**
-     * Additional class names.
-     */
-    className?: string;
     /**
      * Whether the chip is disabled.
      */
@@ -39,4 +31,4 @@ export interface FilterChipProps {
  *
  * @group Interactive components
  */
-export declare function FilterChip({ children, active, onClick, icon, size, className, disabled }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/VirtualTable/VirtualTableProps.d.ts

@@ -224,6 +224,12 @@ export type OnVirtualTableColumnResizeParams = {
     key: string;
     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
@@ -233,11 +239,11 @@ 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
  * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
  * @see Table
  * @group Models
  */
-export type VirtualTableWhereFilterOp = "<" | "<=" | "==" | "!=" | ">=" | ">" | "array-contains" | "in" | "not-in" | "array-contains-any";
+export type VirtualTableWhereFilterOp = WhereFilterOp;

package/dist/index.css

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

package/dist/index.es.js

@@ -4,7 +4,7 @@ import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as React from "react";
-import React__default, { createContext, useContext, useEffect, useRef, useState, Children, forwardRef, useLayoutEffect, useId, useDeferredValue, useMemo, createRef, useCallback } from "react";
+import React__default, { createContext, useContext, useEffect, useRef, useState, Children, forwardRef, useLayoutEffect, useId, useCallback, useMemo, createRef } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { AlertCircleIcon, ShieldAlertIcon, ArrowLeftIcon, RefreshCwIcon, ChevronUpIcon, ChevronDownIcon, MinusIcon, CheckIcon, CalendarIcon, XIcon, ChevronRightIcon, SearchIcon, ChevronLeftIcon, ArrowUpIcon, FilterIcon } from "lucide-react";
 import { AlertCircleIcon as AlertCircleIcon2, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon as ArrowLeftIcon2, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon as CalendarIcon2, CheckCircleIcon, CheckIcon as CheckIcon2, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon2, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon2, ChevronUpIcon as ChevronUpIcon2, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon as FilterIcon2, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageOffIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGridIcon, LinkIcon, ListIcon, ListOrderedIcon, LoaderIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MinusCircleIcon, MinusIcon as MinusIcon2, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon as RefreshCwIcon2, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon as SearchIcon2, SendIcon, SettingsIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, VideoIcon, VoteIcon, Wand2Icon, XCircleIcon, XIcon as XIcon2, icons } from "lucide-react";
@@ -869,9 +869,10 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     "min-h-[64px]": size === "large"
   }, size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
     if (props.allowIndeterminate) {
-      if (value === null || value === void 0) onValueChange?.(true);
-      else if (value) onValueChange?.(false);
-      else onValueChange?.(null);
+      const onChange = onValueChange;
+      if (value === null || value === void 0) onChange?.(true);
+      else if (value) onChange?.(false);
+      else onChange?.(null);
     } else {
       onValueChange?.(!value);
     }
@@ -985,15 +986,15 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
         "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": t25
       });
       const sizeClasses2 = 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"
       });
       const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
       if (Component) {
-        t30 = /* @__PURE__ */ jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "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]", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
+        t30 = /* @__PURE__ */ jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "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]", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
           startIcon,
           children
         ] });
@@ -1002,7 +1003,7 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
       t26 = ref;
       t27 = props.type ?? "button";
       t28 = props.onClick;
-      t29 = cls(startIcon ? "pl-3" : "", "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]", buttonClasses2, sizeClasses2, iconColorClass, className);
+      t29 = cls(startIcon ? "pl-3" : "", "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]", buttonClasses2, sizeClasses2, iconColorClass, className);
     }
     $[11] = Component;
     $[12] = children;
@@ -2147,10 +2148,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$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses$1 = {
-  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",
@@ -3178,49 +3179,80 @@ const sizeClasses = {
   small: "px-2 py-0.5 text-xs",
   medium: "px-2.5 py-1 text-xs"
 };
-function FilterChip(t0) {
-  const $ = c(11);
-  const {
-    children,
-    active: t1,
-    onClick,
-    icon,
-    size: t2,
-    className,
-    disabled: t3
-  } = t0;
+const FilterChip = React__default.forwardRef(function FilterChip2(t0, ref) {
+  const $ = c(22);
+  let children;
+  let className;
+  let icon;
+  let onClick;
+  let rest;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      children,
+      active: t1,
+      onClick,
+      icon,
+      size: t2,
+      className,
+      disabled: t3,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = icon;
+    $[4] = onClick;
+    $[5] = rest;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    children = $[1];
+    className = $[2];
+    icon = $[3];
+    onClick = $[4];
+    rest = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+  }
   const active = t1 === void 0 ? false : t1;
   const size = t2 === void 0 ? "medium" : t2;
   const disabled = t3 === void 0 ? false : t3;
   const t4 = sizeClasses[size];
   let t5;
-  if ($[0] !== active || $[1] !== className || $[2] !== disabled || $[3] !== t4) {
+  if ($[9] !== active || $[10] !== className || $[11] !== disabled || $[12] !== t4) {
     t5 = cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-all duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", t4, active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"), disabled && "opacity-50 cursor-not-allowed", className);
-    $[0] = active;
-    $[1] = className;
-    $[2] = disabled;
-    $[3] = t4;
-    $[4] = t5;
+    $[9] = active;
+    $[10] = className;
+    $[11] = disabled;
+    $[12] = t4;
+    $[13] = t5;
   } else {
-    t5 = $[4];
+    t5 = $[13];
   }
   let t6;
-  if ($[5] !== children || $[6] !== disabled || $[7] !== icon || $[8] !== onClick || $[9] !== t5) {
-    t6 = /* @__PURE__ */ jsxs("button", { type: "button", onClick, disabled, className: t5, children: [
+  if ($[14] !== children || $[15] !== disabled || $[16] !== icon || $[17] !== onClick || $[18] !== ref || $[19] !== rest || $[20] !== t5) {
+    t6 = /* @__PURE__ */ jsxs("button", { ref, type: "button", onClick, disabled, className: t5, ...rest, children: [
       icon,
       children
     ] });
-    $[5] = children;
-    $[6] = disabled;
-    $[7] = icon;
-    $[8] = onClick;
-    $[9] = t5;
-    $[10] = t6;
+    $[14] = children;
+    $[15] = disabled;
+    $[16] = icon;
+    $[17] = onClick;
+    $[18] = ref;
+    $[19] = rest;
+    $[20] = t5;
+    $[21] = t6;
   } else {
-    t6 = $[10];
+    t6 = $[21];
   }
   return t6;
-}
+});
 const colorClasses = {
   info: "bg-sky-200 dark:bg-teal-900",
   warn: "bg-orange-200 dark:bg-yellow-950"
@@ -7001,7 +7033,7 @@ function Tabs(t0) {
   } else {
     t10 = $[12];
   }
-  const t11 = 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";
+  const t11 = 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";
   const t12 = variant === "standard" && defaultBorderMixin;
   const t13 = variant === "boxy" && "flex items-center h-full";
   const t14 = variant === "pill" && "flex items-center gap-0.5";
@@ -7075,7 +7107,7 @@ function Tab(t0) {
   const {
     variant
   } = useContext(TabsContext);
-  const t1 = 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";
+  const t1 = 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";
   let t2;
   if ($[0] !== className || $[1] !== innerClassName || $[2] !== t1 || $[3] !== variant) {
     t2 = cls("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", t1, 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", "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "data-[state=active]:border-b-primary", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"), variant === "pill" && cls("px-2 py-0.5 rounded text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-blue-400", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName);
@@ -7549,73 +7581,59 @@ const Badge = React__default.forwardRef((t0, ref) => {
 });
 Badge.displayName = "Badge";
 function DebouncedTextField(props) {
-  const $ = c(13);
-  const previousEventRef = React__default.useRef(void 0);
-  const [internalValue, setInternalValue] = React__default.useState(props.value);
-  const deferredValue = useDeferredValue(internalValue);
-  let t0;
-  let t1;
-  if ($[0] !== props.value) {
-    t0 = () => {
-      setInternalValue(props.value);
+  const [internalValue, setInternalValue] = useState(props.value ?? "");
+  const lastSentValueRef = useRef(props.value ?? "");
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    const externalValue = props.value ?? "";
+    if (externalValue !== lastSentValueRef.current) {
+      setInternalValue(externalValue);
+      lastSentValueRef.current = externalValue;
+    }
+  }, [props.value]);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
     };
-    t1 = [props.value];
-    $[0] = props.value;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[3] !== deferredValue || $[4] !== props) {
-    t2 = () => {
-      const emptyInitialValue = !props.value;
-      if (emptyInitialValue && !deferredValue) {
-        return;
-      }
-      if (deferredValue !== props.value && previousEventRef.current && props.onChange) {
-        props.onChange(previousEventRef.current);
+  }, []);
+  const flushChange = useCallback((value, event) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = void 0;
+    }
+    if (value !== props.value && props.onChange) {
+      lastSentValueRef.current = value;
+      const e = {
+        ...event,
+        target: {
+          ...event?.target,
+          value,
+          name: props.name
+        }
+      };
+      props.onChange(e);
+    }
+  }, [props.value, props.onChange, props.name]);
+  const internalOnChange = useCallback((event_0) => {
+    const newValue = event_0.target.value;
+    setInternalValue(newValue);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    const eventCopy = {
+      ...event_0,
+      target: {
+        ...event_0?.target,
+        name: event_0?.target?.name
       }
     };
-    $[3] = deferredValue;
-    $[4] = props;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  let t3;
-  if ($[6] !== deferredValue || $[7] !== props.value) {
-    t3 = [deferredValue, props.value];
-    $[6] = deferredValue;
-    $[7] = props.value;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t4 = (event) => {
-      previousEventRef.current = event;
-      setInternalValue(event.target.value);
-    };
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  const internalOnChange = t4;
-  let t5;
-  if ($[10] !== internalValue || $[11] !== props) {
-    t5 = /* @__PURE__ */ jsx(TextField, { ...props, onChange: internalOnChange, value: internalValue });
-    $[10] = internalValue;
-    $[11] = props;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  return t5;
+    timerRef.current = setTimeout(() => {
+      flushChange(newValue, eventCopy);
+    }, 150);
+  }, [flushChange]);
+  const internalOnBlur = useCallback((event_1) => {
+    flushChange(internalValue, event_1);
+    props.onBlur?.(event_1);
+  }, [internalValue, flushChange, props.onBlur]);
+  return /* @__PURE__ */ jsx(TextField, { ...props, onChange: internalOnChange, onBlur: internalOnBlur, value: internalValue });
 }
 const styles = `
 @keyframes shimmer {
@@ -8335,7 +8353,8 @@ const VirtualTableHeaderRow = ({
     height: headerHeight
   }, children: [
     columns.map((column_0, columnIndex) => {
-      const filterForThisProperty = column_0 && filter && filter[column_0.key] ? filter[column_0.key] : void 0;
+      const columnFilter = column_0 && filter && filter[column_0.key] ? filter[column_0.key] : void 0;
+      const filterForThisProperty = columnFilter ? Array.isArray(columnFilter[0]) ? columnFilter[0] : columnFilter : void 0;
       const isDraggable = !column_0.frozen && !!onColumnsOrderChange;
       const isDragging = draggingColumnId === column_0.key;
       return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(SortableColumnHeader, { column: column_0, columnIndex, columnRefs, isResizing, onFilterUpdate, filter: filterForThisProperty, sortByProperty, currentSort, onColumnSort, onClickResizeColumn, createFilterField, isDragging, isDraggable }) }, "header_" + column_0.key);