@rebasepro/ui 0.3.0 → 0.4.0

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";
@@ -985,15 +985,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 +1002,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 +2147,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 +3178,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 +7032,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 +7106,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 +7580,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 +8352,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);