@rebasepro/ui 0.1.2 → 0.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.2.3",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -34,7 +34,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "development": "./src/index.ts",
+      "development": "./dist/index.es.js",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },
@@ -53,10 +53,12 @@
     "@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",
@@ -64,41 +66,41 @@
     "cmdk": "^1.1.1",
     "fast-equals": "6.0.0",
     "lucide-react": "1.14.0",
-    "markdown-it": "^14.1.0",
-    "react-dropzone": "^14.3.8",
+    "markdown-it": "^14.1.1",
+    "react-compiler-runtime": "1.0.0",
+    "react-dropzone": "^14.4.1",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "tailwind-merge": "^2.6.0",
-    "@rebasepro/types": "0.1.2"
+    "tailwind-merge": "^2.6.1",
+    "@rebasepro/types": "0.2.3"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@jest/globals": "^30.2.0",
+    "@jest/globals": "^30.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.17.14",
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^20.19.41",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "beta",
     "cross-env": "^7.0.3",
-    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
-    "npm-run-all": "^4.1.5",
     "rollup-preserve-directives": "^1.1.3",
-    "tailwindcss": "^4.1.3",
-    "ts-jest": "^29.4.5",
+    "tailwindcss": "^4.3.0",
+    "ts-jest": "^29.4.10",
     "tsd": "^0.31.2",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4",
-    "vite-plugin-static-copy": "^3.1.4"
+    "vite": "^7.3.3",
+    "vite-plugin-static-copy": "^3.4.0"
   },
   "files": [
     "dist",

package/src/components/BooleanSwitch.tsx

@@ -29,7 +29,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
             role="switch"
             aria-checked={allowIndeterminate && (value === null || value === undefined) ? "mixed" : !!value}
             aria-disabled={disabled || undefined}
-            ref={ref}
+            ref={ref as any}
             tabIndex={disabled ? -1 : undefined}
             onClick={disabled
                 ? (e) => e.preventDefault()

package/src/components/BooleanSwitchWithLabel.tsx

@@ -88,7 +88,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 if (props.allowIndeterminate) {
                     if (value === null || value === undefined) onValueChange?.(true)
                     else if (value) onValueChange?.(false)
-                    else onValueChange?.(null as unknown as boolean);
+                    else onValueChange?.(null as unknown as boolean); // SAFETY: null represents indeterminate state when allowIndeterminate is true
                 } else {
                     onValueChange?.(!value);
                 }

package/src/components/Button.tsx

@@ -83,7 +83,7 @@ const ButtonInner = React.memo(React.forwardRef<
     if (Component) {
         return (
             <Component
-                ref={ref}
+                ref={ref as any}
                 onClick={props.onClick}
                 className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}
                 {...props}>
@@ -94,7 +94,7 @@ const ButtonInner = React.memo(React.forwardRef<
     }
 
     return (
-        <button ref={ref as React.Ref<HTMLButtonElement>}
+        <button ref={ref as any}
                 type={props.type ?? "button"}
                 onClick={props.onClick}
                 className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}

package/src/components/Chip.tsx

@@ -59,12 +59,46 @@ export function Chip({
 
     // Resolve theme-aware colors
     const dark = isDarkMode();
-    const bgColor = usedColorScheme
-        ? (dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color)
-        : undefined;
-    const textColor = usedColorScheme
-        ? (dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text)
-        : undefined;
+
+    // Helper to generate rgba from hex or standard colors
+    const getRgba = (hex: string, alpha: number): string => {
+        if (!hex || !hex.startsWith("#")) return hex;
+        let color = hex.slice(1);
+        if (color.length === 3) {
+            color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+        }
+        const r = parseInt(color.slice(0, 2), 16);
+        const g = parseInt(color.slice(2, 4), 16);
+        const b = parseInt(color.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
+
+    let textColor = "";
+    let bgColor = "";
+    let border = "";
+
+    if (error) {
+        textColor = dark ? "#f87171" : "#dc2626";
+    } else if (usedColorScheme) {
+        textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
+    } else {
+        textColor = dark ? "#d4d4d4" : "#404040";
+    }
+
+    if (outlined) {
+        bgColor = getRgba(textColor, dark ? 0.12 : 0.06);
+        border = `1px solid ${getRgba(textColor, dark ? 0.25 : 0.18)}`;
+    } else {
+        if (error) {
+            bgColor = dark ? "rgba(220, 38, 38, 0.2)" : "rgba(239, 68, 68, 0.15)";
+            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.4)" : "rgba(239, 68, 68, 0.3)"}`;
+        } else if (usedColorScheme) {
+            bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
+        } else {
+            bgColor = dark ? "#1f1f1f" : "#f4f4f5";
+            border = `1px solid ${dark ? "#2e2e30" : "#e4e4e7"}`;
+        }
+    }
 
     return (
         <div
@@ -73,13 +107,12 @@ export function Chip({
                 "items-center",
                 onClick ? "cursor-pointer hover:bg-surface-accent-300 dark:hover:bg-surface-accent-700" : "",
                 sizeClassNames[size],
-                error || !usedColorScheme ? "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white" : "",
-                error ? "text-red-500 dark:text-red-400" : "",
                 className)}
             onClick={onClick}
             style={{
-                backgroundColor: error ? undefined : bgColor,
-                color: error ? undefined : textColor,
+                backgroundColor: bgColor,
+                color: textColor,
+                border: border || undefined,
                 overflow: "hidden",
                 ...style
             }}

package/src/components/FilterChip.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { cls } from "../util";
+
+export interface FilterChipProps {
+    /**
+     * The text label displayed on the chip.
+     */
+    children: React.ReactNode;
+    /**
+     * 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.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Size variant.
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Whether the chip is disabled.
+     */
+    disabled?: boolean;
+}
+
+const sizeClasses = {
+    small: "px-2 py-0.5 text-xs",
+    medium: "px-2.5 py-1 text-xs"
+};
+
+/**
+ * A toggle chip used for filter presets and similar multi-select controls.
+ *
+ * Uses an inset box-shadow for the active ring instead of `border` so the
+ * chip size stays stable across states and the ring cannot be clipped by
+ * parent `overflow-hidden` containers.
+ *
+ * @group Interactive components
+ */
+export function FilterChip({
+    children,
+    active = false,
+    onClick,
+    icon,
+    size = "medium",
+    className,
+    disabled = false
+}: FilterChipProps) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            className={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",
+                sizeClasses[size],
+                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
+            )}
+        >
+            {icon}
+            {children}
+        </button>
+    );
+}

package/src/components/Markdown.tsx

@@ -2,7 +2,6 @@
 import React, { useMemo } from "react";
 import { deepEqual as equal } from "fast-equals"
 
-// @ts-ignore
 import MarkdownIt from "markdown-it";
 import { cls } from "../util";
 
@@ -35,7 +34,7 @@ const proseWeightOverrides = [
     "prose-a:font-normal"
 ].join(" ");
 
-const md = new MarkdownIt({ html: true });
+const md = new MarkdownIt({ html: false });
 /**
  * @group Preview components
  */

package/src/components/SearchBar.tsx

@@ -95,7 +95,7 @@ export function SearchBar({
             </div>
             <input
                 value={searchText ?? ""}
-                ref={inputRef}
+                ref={inputRef as any}
                 onClick={onClick}
                 placeholder={placeholder}
                 aria-label={placeholder}

package/src/components/Select.tsx

@@ -104,7 +104,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                     name,
                     value: typedValue
                 }
-            } as unknown as ChangeEvent<HTMLSelectElement>;
+            } as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
     }, [onChange, onValueChange, name, dataType]);

package/src/components/TextField.tsx

@@ -82,7 +82,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
         ref: ForwardedRef<HTMLDivElement>
     ) => {
 
-        const inputRef = inputRefProp ?? useRef(null);
+        const fallbackRef = useRef(null);
+        const inputRef = inputRefProp ?? fallbackRef;
         const autoId = useId();
         const inputId = inputProps.id ?? autoId;
         const labelId = `${inputId}-label`;

package/src/components/TextareaAutosize.tsx

@@ -260,7 +260,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
                 value={value}
                 onChange={handleChange}
                 className={props.className}
-                ref={handleRef}
+                ref={handleRef as any}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 // Apply the rows prop to get a "correct" first SSR paint
@@ -279,7 +279,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
                 aria-hidden
                 className={cls(props.className, props.shadowClassName)}
                 readOnly
-                ref={shadowRef}
+                ref={shadowRef as any}
                 tabIndex={-1}
                 style={{
                     padding: 0,

package/src/components/VirtualTable/VirtualTable.tsx

@@ -384,8 +384,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                     className,
                     draggingColumnId && "overflow-hidden"
                 )}>
+                {/* SAFETY: T extends Record<string, any> is structurally assignable to Record<string, unknown> */}
                 <VirtualListContext.Provider
-                    value={virtualListController as unknown as VirtualTableContextProps<Record<string, unknown>>}>
+                    value={virtualListController as VirtualTableContextProps<Record<string, unknown>>}>
 
                     <MemoizedList
                         outerRef={tableRef}

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -182,7 +182,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     </div>}
 
                     {column.resizable && <div
-                        ref={resizeHandleRef}
+                        ref={resizeHandleRef as any}
                         data-no-dnd="true"
                         className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",

package/src/components/index.tsx

@@ -22,6 +22,7 @@ export * from "./DialogContent";
 export * from "./DialogTitle";
 export * from "./ExpandablePanel";
 export * from "./FileUpload";
+export * from "./FilterChip";
 export * from "./IconButton";
 export * from "./InputLabel";
 export * from "./InfoLabel";
@@ -51,3 +52,10 @@ export * from "./DebouncedTextField";
 export * from "./Skeleton";
 export * from "./ToggleButtonGroup";
 export * from "./VirtualTable";
+
+// Re-exported Radix primitives — consume these from @rebasepro/ui instead of
+// adding direct @radix-ui/* deps to every sub-package.
+import * as Portal from "@radix-ui/react-portal";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+export { Portal, PopoverPrimitive };
+export { Slot } from "@radix-ui/react-slot";

package/src/icons/index.ts

@@ -3,4 +3,127 @@ export * from "./cool_icon_keys";
 export * from "./Icon";
 export * from "./GitHubIcon";
 export * from "./HandleIcon";
+
+// Re-export types and the full icons map from lucide-react.
 export type { LucideProps, LucideIcon } from "lucide-react";
+export { icons as lucideIcons } from "lucide-react";
+
+// Re-export individual icon components used across the monorepo.
+// Sub-packages import these from @rebasepro/ui instead of declaring a direct
+// lucide-react dependency.  When a new icon is needed, add it here.
+export {
+    AlertCircleIcon,
+    AlertTriangleIcon,
+    AlignLeftIcon,
+    AppWindow,
+    ArrowDownToLineIcon,
+    ArrowLeftIcon,
+    ArrowRightFromLineIcon,
+    ArrowRightIcon,
+    ArrowRightToLineIcon,
+    ArrowUpToLineIcon,
+    BoldIcon,
+    BookOpenIcon,
+    CalendarIcon,
+    CheckCircleIcon,
+    CheckIcon,
+    CheckSquareIcon,
+    ChevronDownIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ChevronUpIcon,
+    ChevronsLeftIcon,
+    ChevronsRightIcon,
+    ChevronsUpDownIcon,
+    CircleIcon,
+    CircleUserIcon,
+    CodeIcon,
+    ColumnsIcon,
+    CopyIcon,
+    DatabaseIcon,
+    DownloadIcon,
+    ExternalLinkIcon,
+    EyeIcon,
+    EyeOffIcon,
+    FileIcon,
+    FileSearchIcon,
+    FileTextIcon,
+    FilterIcon,
+    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,
+    MoonIcon,
+    MoreVerticalIcon,
+    Music2Icon,
+    PanelLeftIcon,
+    PauseIcon,
+    PencilIcon,
+    PhoneIcon,
+    PlayIcon,
+    PlusIcon,
+    QuoteIcon,
+    RefreshCcwIcon,
+    RefreshCwIcon,
+    RepeatIcon,
+    Rows3Icon,
+    SaveIcon,
+    SearchIcon,
+    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,
+} from "lucide-react";