@vertesia/ui 0.80.0-dev-20251118 → 0.80.0

package/package.json

@@ -1,177 +1,180 @@
 {
-    "name": "@vertesia/ui",
-    "version": "0.80.0-dev-20251118",
-    "description": "Vertesia UI components and and hooks",
-    "type": "module",
-    "main": "./lib/index.js",
-    "files": [
-        "lib",
-        "src",
-        "tsconfig.dist.json"
-    ],
-    "license": "Apache-2.0",
-    "homepage": "https://docs.vertesiahq.com",
-    "keywords": [
-        "vertesia",
-        "UI",
-        "react",
-        "components",
-        "hooks"
-    ],
-    "scripts": {
-        "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
-        "lint": "eslint \"src/**/*.{ts,tsx}\"",
-        "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix"
+  "name": "@vertesia/ui",
+  "version": "0.80.0",
+  "description": "Vertesia UI components and and hooks",
+  "type": "module",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "src",
+    "tsconfig.dist.json"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://docs.vertesiahq.com",
+  "keywords": [
+    "vertesia",
+    "UI",
+    "react",
+    "components",
+    "hooks"
+  ],
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.8",
+    "@floating-ui/dom": "^1.7.1",
+    "@floating-ui/react": "^0.27.11",
+    "@headlessui/react": "^2.2.2",
+    "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-separator": "^1.1.6",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.6",
+    "ajv": "^8.16.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "codemirror": "^6.0.1",
+    "dayjs": "^1.11.13",
+    "debounce": "^2.2.0",
+    "fast-xml-parser": "^5.2.3",
+    "firebase": "^10.12.2",
+    "framer-motion": "^12.23.12",
+    "html-to-image": "^1.11.13",
+    "json-schema": "^0.4.0",
+    "jwt-decode": "^4.0.0",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.511.0",
+    "monaco-editor": "^0.52.2",
+    "motion": "^12.12.1",
+    "react": "^19.2.3",
+    "react-calendar": "^6.0.0",
+    "react-date-picker": "^11.0.0",
+    "react-dom": "^19.2.3",
+    "react-error-boundary": "^6.0.0",
+    "react-markdown": "^10.1.0",
+    "react-pdf": "^10.2.0",
+    "react-resizable-panels": "^3.0.6",
+    "recharts": "^3.5.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.3.0",
+    "ts-md5": "^1.3.1",
+    "unist-util-visit": "^5.0.0",
+    "@vertesia/client": "0.80.0",
+    "@vertesia/json": "0.80.0",
+    "@vertesia/common": "0.80.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.27.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@types/json-schema": "^7.0.15",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.15.21",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.27.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.40.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vitest": "^3.0.9"
+  },
+  "exports": {
+    "./router": {
+      "types": "./lib/types/router/index.d.ts",
+      "default": "./lib/esm/router/index.js"
     },
-    "dependencies": {
-        "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/state": "^6.5.2",
-        "@codemirror/view": "^6.36.8",
-        "@floating-ui/dom": "^1.7.1",
-        "@floating-ui/react": "^0.27.11",
-        "@headlessui/react": "^2.2.2",
-        "@monaco-editor/react": "^4.7.0",
-        "@radix-ui/react-checkbox": "^1.3.1",
-        "@radix-ui/react-dialog": "^1.1.13",
-        "@radix-ui/react-label": "^2.1.6",
-        "@radix-ui/react-popover": "^1.1.13",
-        "@radix-ui/react-separator": "^1.1.6",
-        "@radix-ui/react-slot": "^1.2.2",
-        "@radix-ui/react-tabs": "^1.1.11",
-        "@radix-ui/react-tooltip": "^1.2.6",
-        "@vertesia/client": "workspace:*",
-        "@vertesia/common": "workspace:*",
-        "@vertesia/json": "workspace:*",
-        "ajv": "^8.16.0",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
-        "cmdk": "^1.1.1",
-        "codemirror": "^6.0.1",
-        "dayjs": "^1.11.13",
-        "debounce": "^2.2.0",
-        "fast-xml-parser": "^5.2.3",
-        "firebase": "^10.12.2",
-        "framer-motion": "^12.23.12",
-        "json-schema": "^0.4.0",
-        "jwt-decode": "^4.0.0",
-        "lodash-es": "^4.17.21",
-        "lucide-react": "^0.511.0",
-        "monaco-editor": "^0.52.2",
-        "motion": "^12.12.1",
-        "react": "^19.1.0",
-        "react-calendar": "^6.0.0",
-        "react-date-picker": "^11.0.0",
-        "react-dom": "^19.1.0",
-        "react-error-boundary": "^6.0.0",
-        "react-markdown": "^10.1.0",
-        "react-resizable-panels": "^3.0.6",
-        "remark-gfm": "^4.0.1",
-        "tailwind-merge": "^3.3.0",
-        "ts-md5": "^1.3.1",
-        "unist-util-visit": "^5.0.0"
+    "./env": {
+      "types": "./lib/types/env/index.d.ts",
+      "default": "./lib/esm/env/index.js"
     },
-    "devDependencies": {
-        "@eslint/js": "^9.27.0",
-        "@rollup/plugin-commonjs": "^28.0.3",
-        "@rollup/plugin-json": "^6.1.0",
-        "@rollup/plugin-node-resolve": "^16.0.1",
-        "@types/json-schema": "^7.0.15",
-        "@types/lodash-es": "^4.17.12",
-        "@types/node": "^22.15.21",
-        "@types/react": "^19.1.0",
-        "@types/react-dom": "^19.1.1",
-        "eslint": "^9.27.0",
-        "eslint-import-resolver-typescript": "^4.4.4",
-        "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^5.2.0",
-        "rimraf": "^6.0.1",
-        "rollup": "^4.40.2",
-        "rollup-plugin-terser": "^7.0.2",
-        "typescript": "~5.8.3",
-        "typescript-eslint": "^8.38.0",
-        "vitest": "^3.0.9"
+    "./session": {
+      "types": "./lib/types/session/index.d.ts",
+      "default": "./lib/esm/session/index.js"
     },
-    "exports": {
-        "./router": {
-            "types": "./lib/types/router/index.d.ts",
-            "default": "./lib/esm/router/index.js"
-        },
-        "./env": {
-            "types": "./lib/types/env/index.d.ts",
-            "default": "./lib/esm/env/index.js"
-        },
-        "./session": {
-            "types": "./lib/types/session/index.d.ts",
-            "default": "./lib/esm/session/index.js"
-        },
-        "./core": {
-            "types": "./lib/types/core/index.d.ts",
-            "default": "./lib/esm/core/index.js"
-        },
-        "./widgets": {
-            "types": "./lib/types/widgets/index.d.ts",
-            "default": "./lib/esm/widgets/index.js"
-        },
-        "./code": {
-            "types": "./lib/types/code/index.d.ts",
-            "default": "./lib/esm/code/index.js"
-        },
-        "./form": {
-            "types": "./lib/types/form/index.d.ts",
-            "default": "./lib/esm/form/index.js"
-        },
-        "./layout": {
-            "types": "./lib/types/layout/index.d.ts",
-            "default": "./lib/esm/layout/index.js"
-        },
-        "./features": {
-            "types": "./lib/types/features/index.d.ts",
-            "default": "./lib/esm/features/index.js"
-        },
-        "./shell": {
-            "types": "./lib/types/shell/index.d.ts",
-            "default": "./lib/esm/shell/index.js"
-        }
+    "./core": {
+      "types": "./lib/types/core/index.d.ts",
+      "default": "./lib/esm/core/index.js"
     },
-    "types": "./lib/index.d.ts",
-    "typesVersions": {
-        "*": {
-            "router": [
-                "./lib/types/router/index.d.ts"
-            ],
-            "env": [
-                "./lib/types/env/index.d.ts"
-            ],
-            "session": [
-                "./lib/types/session/index.d.ts"
-            ],
-            "core": [
-                "./lib/types/core/index.d.ts"
-            ],
-            "widgets": [
-                "./lib/types/widgets/index.d.ts"
-            ],
-            "code": [
-                "./lib/types/code/index.d.ts"
-            ],
-            "features": [
-                "./lib/types/features/index.d.ts"
-            ],
-            "layout": [
-                "./lib/types/layout/index.d.ts"
-            ],
-            "form": [
-                "./lib/types/form/index.d.ts"
-            ],
-            "shell": [
-                "./lib/types/shell/index.d.ts"
-            ]
-        }
+    "./widgets": {
+      "types": "./lib/types/widgets/index.d.ts",
+      "default": "./lib/esm/widgets/index.js"
     },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/vertesia/composableai.git",
-        "directory": "packages/ui"
+    "./code": {
+      "types": "./lib/types/code/index.d.ts",
+      "default": "./lib/esm/code/index.js"
+    },
+    "./form": {
+      "types": "./lib/types/form/index.d.ts",
+      "default": "./lib/esm/form/index.js"
+    },
+    "./layout": {
+      "types": "./lib/types/layout/index.d.ts",
+      "default": "./lib/esm/layout/index.js"
+    },
+    "./features": {
+      "types": "./lib/types/features/index.d.ts",
+      "default": "./lib/esm/features/index.js"
+    },
+    "./shell": {
+      "types": "./lib/types/shell/index.d.ts",
+      "default": "./lib/esm/shell/index.js"
+    }
+  },
+  "types": "./lib/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "router": [
+        "./lib/types/router/index.d.ts"
+      ],
+      "env": [
+        "./lib/types/env/index.d.ts"
+      ],
+      "session": [
+        "./lib/types/session/index.d.ts"
+      ],
+      "core": [
+        "./lib/types/core/index.d.ts"
+      ],
+      "widgets": [
+        "./lib/types/widgets/index.d.ts"
+      ],
+      "code": [
+        "./lib/types/code/index.d.ts"
+      ],
+      "features": [
+        "./lib/types/features/index.d.ts"
+      ],
+      "layout": [
+        "./lib/types/layout/index.d.ts"
+      ],
+      "form": [
+        "./lib/types/form/index.d.ts"
+      ],
+      "shell": [
+        "./lib/types/shell/index.d.ts"
+      ]
     }
-}
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertesia/composableai.git",
+    "directory": "packages/ui"
+  },
+  "scripts": {
+    "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix"
+  }
+}

package/src/core/components/MenuList.tsx

@@ -7,7 +7,7 @@ interface MenuListProps {
 }
 export function MenuList({ className, children }: MenuListProps) {
     return (
-        <ul className={`${className} space-y-1 flex flex-col items-start dark:px-2`}>
+        <ul className={`${className} space-y-1 flex flex-col items-start`}>
             {children}
         </ul>
     )
@@ -21,11 +21,8 @@ interface MenuListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 const MenuListItem = forwardRef<HTMLAnchorElement, MenuListItemProps>(function _MenuListItem(props, ref) {
     const { current, children, className, href = '#', onClick, ...others } = props;
     return (
-        <li className={clsx(className, current ?
-            'bg-gray-50 text-indigo-600'
-            :
-            'text-gray-700 dark:dark:text-slate-300  hover:text-indigo-600 hover:bg-gray-50  dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:border dark:border-transparent dark:hover:border-slate-50',
-            'w-full rounded-md p-2 pl-3 text-sm leading-6 font-semibold')}>
+        <li className={clsx(className, current ? 'bg-muted' : '',
+            'w-full p-2 pl-3 text-sm leading-6 font-semibold hover:bg-muted')}>
             <a ref={ref} href={href} onClick={(e) => {
                 if (onClick) {
                     e.preventDefault();

package/src/core/components/MessageBox.tsx

@@ -74,7 +74,13 @@ export function MessageBox({ icon, status, title, children, className }: Message
 }
 
 export function ErrorBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
-    return <MessageBox status="error" title={title} className={className}><pre>{children}</pre></MessageBox>
+    return (
+        <MessageBox status="error" title={title} className={className}>
+            <pre className="whitespace-pre-wrap break-words">
+                {children}
+            </pre>
+        </MessageBox>
+    );
 }
 
 export function InfoBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
@@ -93,4 +99,3 @@ export function DefaultBox({ title, className, children }: { title: string, clas
     return <MessageBox status="default" title={title} className={className}>{children}</MessageBox>
 }
 
-

package/src/core/components/SelectBox.tsx

@@ -185,4 +185,4 @@ export function ListOption<T>({ option, optionLabel, onClick, className }: { opt
                 </>
             )}
         </ListboxOption>)
-}
+}

package/src/core/components/shadcn/dialog.tsx

@@ -16,6 +16,7 @@ interface ModalProps {
     className?: string;
     allowOverflow?: boolean;
     disableCloseOnClickOutside?: boolean;
+    size?: "sm" | "md" | "lg" | "xl";
 }
 const ModalContext = createContext<boolean>(false)
 export function useIsInModal() {
@@ -34,12 +35,27 @@ export function VModal({
     noCloseButton = false,
     allowOverflow = false,
     disableCloseOnClickOutside = false,
+    size = "md",
 }: ModalProps) {
     const handleOpenChange = (open: boolean) => {
         if (!open) {
             onClose();
         }
     };
+    function getSizeClasses() {
+        switch (size) {
+            case "sm":
+                return "max-w-[20vw]";
+            case "md":
+                return "max-w-[40vw]";
+            case "lg":
+                return "max-w-[60vw]";
+            case "xl":
+                return "max-w-[80vw]";
+            default:
+                return "max-w-[40vw]";
+        }
+    }
 
     return (
         <Dialog
@@ -49,6 +65,7 @@ export function VModal({
                     handleOpenChange(open);
                 }
             }}
+            
         >
             {allowOverflow && <DialogOverlay className="z-50 fixed inset-0 bg-black/80" />}
             <VisuallyHidden>
@@ -57,7 +74,8 @@ export function VModal({
             <DialogContent
                 className={cn(
                     "min-h-20 p-4",
-                    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg",
+                    "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg",
+                    getSizeClasses(),
                     className
                 )}
             >

package/src/core/components/shadcn/filters/filter/SelectFilter.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { CommandItem, CommandEmpty } from "../../command";
+import { CommandItem } from "../../command";
 import { Button } from "../../button";
 import { Filter, FilterGroup, FilterGroupOption, FilterOption } from "../types";
 import { DynamicLabel } from "../DynamicLabel";
@@ -52,12 +52,8 @@ export default function SelectFilter({
   }
 
   const options = getFilteredOptions(selectedView);
-  const selectedGroup = filterGroups.find(g => g.name === selectedView);
-
-  if (options.length === 0) {
-    return <CommandEmpty>No matching options</CommandEmpty>;
-  }
 
+  const selectedGroup = filterGroups.find(g => g.name === selectedView);
   const groupTitle = selectedGroup?.placeholder || selectedGroup?.name;
 
   const handleApply = () => {
@@ -117,35 +113,39 @@ export default function SelectFilter({
   };
 
   return (
-    <>
-      <div className="flex items-center p-1.5 text-xs text-muted">
+    <div className="flex flex-col h-full">
+      <div className="flex items-center p-1.5 text-xs text-muted shrink-0">
         <span>{groupTitle}</span>
       </div>
-      <div className="max-h-50 overflow-y-auto">
-        {options.map((option: FilterGroupOption) => {
-          const isSelected = selectedOptions.some(opt => opt.value === option.value);
+      <div className="flex-1 overflow-hidden min-h-0">
+        <div className="max-h-[200px] overflow-y-auto">
+          {options.length > 0 && (
+            options.map((option: FilterGroupOption) => {
+              const isSelected = selectedOptions.some(opt => opt.value === option.value);
 
-          return (
-            <CommandItem
-              key={option.value || `option-${Math.random()}`}
-              className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
-                }`}
-              onSelect={() => handleOptionToggle(option)}
-            >
-              <DynamicLabel
-                value={option.value || ''}
-                labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
-                fallbackLabel={option.label}
-              />
-              {selectedGroup?.multiple && isSelected && (
-                <span className="ml-auto text-xs text-success">✓</span>
-              )}
-            </CommandItem>
-          );
-        })}
+              return (
+                <CommandItem
+                  key={option.value || `option-${Math.random()}`}
+                  className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
+                    }`}
+                  onSelect={() => handleOptionToggle(option)}
+                >
+                  <DynamicLabel
+                    value={option.value || ''}
+                    labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
+                    fallbackLabel={option.label}
+                  />
+                  {selectedGroup?.multiple && isSelected && (
+                    <span className="ml-auto text-xs text-success">✓</span>
+                  )}
+                </CommandItem>
+              );
+            })
+          )}
+        </div>
       </div>
       {selectedGroup?.multiple && (
-        <div className="p-2 border-t">
+        <div className="p-2 border-t shrink-0">
           <div className="flex gap-2 justify-end">
             <Button variant="ghost" size="sm" onClick={handleClose}>
               Cancel
@@ -156,6 +156,6 @@ export default function SelectFilter({
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 }

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -330,6 +330,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
             )
           }
           <CommandList>
+            <CommandEmpty>No matching filters</CommandEmpty>
             <CommandGroup>
               {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
             </CommandGroup>

package/src/core/components/shadcn/selectBox.tsx

@@ -1,12 +1,13 @@
 import clsx from 'clsx';
 import { isEqual } from 'lodash-es';
-import { Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
-import { useState, useEffect, useRef } from 'react';
+import { AlertTriangle, Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
 import { Input } from './input';
 import { Button } from '@vertesia/ui/core';
+import { VTooltip } from './tooltip';
 
 export interface VSelectBoxBaseProps<T> {
     options: T[] | undefined;
@@ -25,6 +26,10 @@ export interface VSelectBoxBaseProps<T> {
     isClearable?: boolean;
     border?: boolean;
     inline?: boolean;
+    /** Show warning when value is not in options list (default: true) */
+    warnOnMissingValue?: boolean;
+    /** Custom warning message when value is not in options */
+    missingValueWarning?: string;
 }
 
 interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
@@ -41,12 +46,27 @@ interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
 
 type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
 
-export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false }: Readonly<VSelectBoxProps<T>>) {
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid" }: Readonly<VSelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
     const [filterValue, setFilterValue] = useState('');
 
+    // Check if value is in options list (for single select only)
+    const isMissingValue = useMemo(() => {
+        if (!warnOnMissingValue || multiple || value == null || !options) return false;
+        // Use the isOptionsEqual helper which respects the 'by' comparator
+        return !options.some(opt => {
+            if (typeof by === 'string') {
+                return (opt as any)[by] === (value as any)[by];
+            } else if (typeof by === 'function') {
+                return by(opt, value as T);
+            } else {
+                return isEqual(opt, value);
+            }
+        });
+    }, [warnOnMissingValue, multiple, value, options, by]);
+
     useEffect(() => {
         const element = triggerRef.current;
         if (!element) {
@@ -185,7 +205,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
             <Command className="overflow-hidden">
                 <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
                     <CommandEmpty>No result found.</CommandEmpty>
-                    <CommandGroup className="overflow-visible">
+                    <CommandGroup>
                         {filteredOptions?.map((opt, index) => {
                             const isSelected = multiple
                                 ? isOptionSelected(opt, Array.isArray(value) ? value : [])
@@ -255,7 +275,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     onClick={handleTriggerClick}
                     className={clsx(
                         className,
-                        border && 'border border-border',
+                        border && (isMissingValue ? 'border border-destructive' : 'border border-border'),
                         'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
                         !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
                     )}
@@ -268,13 +288,19 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                         )}
                     >
                         {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
-                        <div className={clsx('w-full text-left', !disabled && '')}>
+                        <div className={clsx('w-full text-left min-h-6', !disabled && '', isMissingValue && 'text-destructive')}>
+                            {isMissingValue && (
+                                <VTooltip description={missingValueWarning} placement="top" asChild>
+                                    <AlertTriangle className="inline-block size-4 mr-1 -mt-0.5 cursor-help" />
+                                </VTooltip>
+                            )}
                             {multiple ? renderMultipleValue() : renderSingleValue()}
                         </div>
                     </div>
                     <div className="flex items-center gap-1 group">
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
                             <Button variant={"link"} size={"icon"}
+                                disabled={disabled}
                                 alt="Clear selection"
                                 onClick={(e) => {
                                     e.stopPropagation();