@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/src/core/components/shadcn/{dialog.tsx → modal/dialog.tsx}

@@ -1,11 +1,12 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../libs/utils";
+import { cn } from "../../libs/utils";
 
 import { X } from "lucide-react";
-import { Button } from "./button";
-import { VisuallyHidden } from "../libs/visuallyHidden";
+import { Button } from "../button";
+import { VisuallyHidden } from "../../libs/visuallyHidden";
 import { createContext, useContext } from "react";
+import { usePortalContainer } from "../../../hooks/PortalContainerProvider";
 
 interface ModalProps {
     children: React.ReactNode | React.ReactNode[];
@@ -27,7 +28,7 @@ export function ModalContextProvider({ children }: { children: React.ReactNode }
     return <ModalContext.Provider value={true}>{children}</ModalContext.Provider>
 }
 
-export function VModal({
+export function Modal({
     className,
     children,
     isOpen,
@@ -49,13 +50,13 @@ export function VModal({
             case "sm":
                 return "max-w-[20vw]";
             case "md":
-                return "max-w-[40vw]";
+                return "max-w-[60vw] lg:max-w-[40vw]";
             case "lg":
-                return "max-w-[60vw]";
+                return "max-w-[80vw] md:max-w-[60vw]";
             case "xl":
-                return "max-w-[80vw]";
+                return "max-w-[95vw] lg:max-w-[80vw]";
             default:
-                return "max-w-[40vw]";
+                return "max-w-[60vw] lg:max-w-[40vw]";
         }
     }
 
@@ -109,13 +110,14 @@ export function VModal({
     );
 }
 
-export const VModalTitle = ({
+export const ModalTitle = ({
     children,
     show = true,
     className,
     description,
+    showDivider = false,
     ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean; description?: string }) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean; description?: string, showDivider?: boolean }) => {
     if (!show) {
         return (
             <VisuallyHidden>
@@ -127,7 +129,11 @@ export const VModalTitle = ({
     return (
         <>
             <DialogTitle
-                className={cn("text-lg font-semibold leading-6 tracking-tight", { 'py-2': !description }, className)}
+                className={cn(
+                    showDivider ? "border-b-solid border-b border-b-1 pb-2 mb-4" : "",
+                    "text-lg font-semibold leading-6 tracking-tight", 
+                    { 'py-2': !description }, 
+                    className)}
                 {...props}
             >
                 {children}
@@ -141,7 +147,7 @@ export const VModalTitle = ({
     );
 };
 
-export const VModalBody = ({
+export const ModalBody = ({
     children,
     className,
     ...props
@@ -155,9 +161,11 @@ export const VModalBody = ({
 
 interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "left" | "right" | "center";
+    children: React.ReactNode | React.ReactNode[];
+    className?: string;
 }
 
-export const VModalFooter = ({
+export const ModalFooter = ({
     align = "right",
     children,
     className,
@@ -205,25 +213,28 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogPrimitive.Content
-            ref={ref}
-            autoFocus={false}
-            onOpenAutoFocus={(event) => {
-                event.preventDefault();
-            }}
-            className={cn(
-                "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 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </DialogPrimitive.Content>
-    </DialogPortal>
-));
+>(({ className, children, ...props }, ref) => {
+    const container = usePortalContainer();
+    return (
+        <DialogPortal container={container}>
+            <DialogOverlay />
+            <DialogPrimitive.Content
+                ref={ref}
+                autoFocus={false}
+                onOpenAutoFocus={(event) => {
+                    event.preventDefault();
+                }}
+                className={cn(
+                    "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 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogDescription = React.forwardRef<

package/src/core/components/shadcn/modal/index.ts

@@ -0,0 +1,3 @@
+export * from "./ConfirmModal"
+export * from "./DeleteModal"
+export * from "./dialog"

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

@@ -3,7 +3,8 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { cn } from "../libs/utils"
 import { JSX } from "react";
-import { useIsInModal } from "./dialog";
+import { useIsInModal } from "./modal/dialog";
+import { usePortalContainer } from "../../hooks/PortalContainerProvider";
 
 export interface PopoverContextValue {
   open: boolean;
@@ -87,9 +88,10 @@ const PopoverContent = React.forwardRef<
   }
 
   const { setOpen, hover } = context;
+  const container = usePortalContainer();
 
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={container}>
       <PopoverPrimitive.Content
         ref={ref}
         align={align}

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

@@ -1,15 +1,15 @@
 import clsx from 'clsx';
 import { isEqual } from 'lodash-es';
-import { AlertTriangle, Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { AlertTriangle, Check, ChevronsUpDown, LoaderCircle, SearchIcon, SquarePlus, X } from 'lucide-react';
+import { useState, useEffect, useRef, useMemo, ReactNode } 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 { Button } from './button';
 import { VTooltip } from './tooltip';
 
-export interface VSelectBoxBaseProps<T> {
+export interface SelectBoxBaseProps<T> {
     options: T[] | undefined;
     optionLabel?: (option: T) => React.ReactNode;
     onBlur?: () => void;
@@ -26,27 +26,30 @@ export interface VSelectBoxBaseProps<T> {
     isClearable?: boolean;
     border?: boolean;
     inline?: boolean;
+    clearIcon?: ReactNode;
+    clearTitle?: string;
+    isLoading?: 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> {
+interface SelectBoxSingleProps<T> extends SelectBoxBaseProps<T> {
     multiple?: false;
     value?: T;
     onChange: (option: T) => void;
 }
 
-interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
+interface SelectBoxMultipleProps<T> extends SelectBoxBaseProps<T> {
     multiple: true;
     value?: T[];
     onChange: (options: T[]) => void;
 }
 
-type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
+type SelectBoxProps<T> = SelectBoxSingleProps<T> | SelectBoxMultipleProps<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>>) {
+export function SelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, isLoading = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid", clearIcon, clearTitle }: Readonly<SelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -91,7 +94,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
     }, []);
 
     const handleTriggerClick = (e: React.MouseEvent) => {
-        if (disabled) {
+        if (disabled || isLoading) {
             e.preventDefault();
             return;
         }
@@ -203,7 +206,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                 </div>
             )}
             <Command className="overflow-hidden">
-                <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
+                <CommandList
+                    className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}
+                    onWheel={(e) => { e.currentTarget.scrollTop += e.deltaY; }}
+                >
                     <CommandEmpty>No result found.</CommandEmpty>
                     <CommandGroup>
                         {filteredOptions?.map((opt, index) => {
@@ -262,7 +268,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                 "bg-popover p-1",
                 popupClass
             )}>
-                {renderOptionsContent()}
+                {isLoading
+                    ? <div className="flex justify-center items-center p-2 text-muted text-sm"><LoaderCircle className="size-4 animate-spin" /></div>
+                    : renderOptionsContent()
+                }
             </div>
         );
     }
@@ -275,50 +284,60 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     onClick={handleTriggerClick}
                     className={clsx(
                         className,
-                        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",
+                        isLoading
+                            ? 'flex justify-center items-center gap-2 border border-border rounded-md p-2 text-muted text-sm'
+                            : clsx(
+                                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",
+                            ),
                     )}
                 >
-                    <div
-                        className={clsx(
-                            "flex flex-col w-full rounded-md text-sm items-center justify-center truncate",
-                            !disabled && "",
-                            isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
-                        )}
-                    >
-                        {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
-                        <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();
-                                    if (multiple) {
-                                        (onChange as (options: T[]) => void)([] as T[]);
-                                    } else {
-                                        (onChange as (option: T) => void)(undefined as any);
-                                    }
-                                }}
-                                className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
+                    {isLoading ? (
+                        <LoaderCircle className="size-4 animate-spin" />
+                    ) : (
+                        <>
+                            <div
+                                className={clsx(
+                                    "flex flex-col w-full rounded-md text-sm min-h-6 items-center justify-center truncate",
+                                    !disabled && "",
+                                    isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
+                                )}
                             >
-                                <X className="size-4" />
-                            </Button>
-                        )}
-                        {!disabled && (
-                            <ChevronsUpDown className="size-4 opacity-50" />
-                        )}
-                    </div>
+                                {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
+                                <div className={clsx('w-full text-left ', !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={clearTitle || "Clear selection"}
+                                        onClick={(e: { stopPropagation: () => void; }) => {
+                                            e.stopPropagation();
+                                            if (multiple) {
+                                                (onChange as (options: T[]) => void)([] as T[]);
+                                            } else {
+                                                (onChange as (option: T) => void)(undefined as any);
+                                            }
+                                        }}
+                                        className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
+                                    >
+                                        {clearIcon ? clearIcon : <X className="size-4" />}
+                                    </Button>
+                                )}
+                                {!disabled && (
+                                    <ChevronsUpDown className="size-4 opacity-50" />
+                                )}
+                            </div>
+                        </>
+                    )}
                 </div>
             </PopoverTrigger>
 

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

@@ -1,9 +1,19 @@
 import * as React from "react";
+import { ReactNode } from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 import { cn } from "../libs/utils";
-import { Tab, TabsContext as _TabContext } from '../tabs/TabsContext.js';
-import { VSelectBox } from "./selectBox";
+import { SelectBox } from "./selectBox";
+
+export interface Tab {
+    name: string;
+    current?: boolean;
+    href?: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    is_allowed?: boolean;
+}
 
 const TabsContext = React.createContext<{
   size?: number;
@@ -36,7 +46,7 @@ interface TabsProps {
   updateHash?: boolean;
 }
 
-const VTabs = ({
+const Tabs = ({
   tabs,
   defaultValue,
   current,
@@ -48,6 +58,12 @@ const VTabs = ({
   variant = "tabs",
   updateHash = true
 }: TabsProps) => {
+  // Filter tabs based on is_allowed (undefined or true means visible)
+  const visibleTabs = React.useMemo(() =>
+    tabs.filter(tab => tab.is_allowed === undefined || tab.is_allowed === true),
+    [tabs]
+  );
+
   // Initialize value
   const [value, setValue] = React.useState(() => {
     // First check if current is provided
@@ -59,14 +75,14 @@ const VTabs = ({
     // Then check hash
     const hash = window.location.hash;
     const currentTab = hash ? hash.substring(1) : undefined;
-    
-    // Check if the tab from hash exists in tabs
-    if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+
+    // Check if the tab from hash exists in visible tabs
+    if (currentTab && visibleTabs.some(tab => tab.name === currentTab)) {
       return currentTab;
     }
-    
-    // Fall back to default or first tab
-    return defaultValue || tabs[0]?.name;
+
+    // Fall back to default or first visible tab
+    return defaultValue || visibleTabs[0]?.name;
   });
 
   // Update when current prop changes (but don't create a loop)
@@ -84,9 +100,9 @@ const VTabs = ({
     const handleHashChange = () => {
       const hash = window.location.hash;
       const currentTab = hash ? hash.substring(1) : undefined;
-      
-      // Only update if the tab exists in tabs
-      if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+
+      // Only update if the tab exists in visible tabs
+      if (currentTab && visibleTabs.some(tab => tab.name === currentTab)) {
         setValue(currentTab);
       } else if (!hash && defaultValue) {
         // If no hash, fall back to default
@@ -99,7 +115,7 @@ const VTabs = ({
 
     window.addEventListener('hashchange', handleHashChange);
     return () => window.removeEventListener('hashchange', handleHashChange);
-  }, [current, tabs, defaultValue]);
+  }, [current, visibleTabs, defaultValue]);
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
@@ -122,9 +138,9 @@ const VTabs = ({
   }, [handleValueChange]);
 
   return (
-    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant, updateHash }}>
+    <TabsContext.Provider value={{ tabs: visibleTabs, size: fullWidth ? visibleTabs.length : 0, current: value, setTab, responsive: responsive, variant, updateHash }}>
       <TabsPrimitive.Root
-        defaultValue={value || tabs[0]?.name}
+        defaultValue={value || visibleTabs[0]?.name}
         value={value}
         onValueChange={handleValueChange}
         className={className}
@@ -135,7 +151,7 @@ const VTabs = ({
   );
 };
 
-const VTabsBar = ({ className }: { className?: string }) => {
+const TabsBar = ({ className }: { className?: string }) => {
   const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
@@ -164,7 +180,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
     <>
       {responsive && (
         <div className="px-2 block lg:hidden">
-          <VSelectBox
+          <SelectBox
             label="Tab"
             className={(className)}
             options={tabs}
@@ -178,6 +194,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
       )}
       <TabsList size={size} variant={variant} className={cn((fullWidth ? "w-full" : ""), className, (responsive ? "hidden lg:flex" : ""))}>
         {tabs.map((tab) => (
+          
           <TabsTrigger
             key={tab.name}
             value={tab.name}
@@ -194,7 +211,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
   );
 };
 
-const VTabsPanel = ({ className }: { className?: string }) => {
+const TabsPanel = ({ className }: { className?: string }) => {
   const { tabs } = React.useContext(TabsContext);
 
   if (!tabs) return null;
@@ -299,4 +316,4 @@ const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefA
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { VTabs, VTabsBar, VTabsPanel, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsBar, TabsPanel, TabsList, TabsTrigger, TabsContent };

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

@@ -1,16 +1,56 @@
-import * as React from "react"
+import { useLayoutEffect, useRef, useCallback } from "react"
 
 import { cn } from "../libs/utils"
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+interface TextareaProps extends React.ComponentProps<"textarea"> {
+  minLines?: number
+  maxLines?: number
+}
+
+function Textarea({ className, minLines, maxLines, value, ...props }: TextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+  const growing = minLines !== undefined || maxLines !== undefined
+
+  const resize = useCallback(() => {
+    const el = textareaRef.current
+    if (!el) return
+
+    const style = getComputedStyle(el)
+    const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5
+    const paddingTop = parseFloat(style.paddingTop) || 0
+    const paddingBottom = parseFloat(style.paddingBottom) || 0
+    const paddingY = paddingTop + paddingBottom
+    const borderTop = parseFloat(style.borderTopWidth) || 0
+    const borderBottom = parseFloat(style.borderBottomWidth) || 0
+    const borderY = borderTop + borderBottom
+
+    const effectiveMin = minLines ?? 1
+    const effectiveMax = maxLines ?? Infinity
+    const minHeight = effectiveMin * lineHeight + paddingY + borderY
+    const maxHeight = effectiveMax === Infinity ? Infinity : effectiveMax * lineHeight + paddingY + borderY
+
+    el.style.height = "auto"
+
+    const contentHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)
+    el.style.height = `${contentHeight}px`
+    el.style.overflowY = maxHeight !== Infinity && el.scrollHeight > maxHeight ? "auto" : "hidden"
+  }, [minLines, maxLines])
+
+  useLayoutEffect(() => {
+    if (growing) resize()
+  }, [value, growing, resize])
+
   return (
     <textarea
+      ref={textareaRef}
       data-slot="textarea"
+      value={value}
       className={cn(
         "py-2 text-sm",
         "flex w-full rounded-md border border-input bg-background ring-offset-background",
         "placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring",
         "disabled:cursor-not-allowed disabled:opacity-50",
+        growing && "resize-none",
         className
       )}
       {...props}
@@ -19,3 +59,4 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 }
 
 export { Textarea }
+export type { TextareaProps }

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

@@ -2,6 +2,7 @@ import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import { cn } from "../libs/utils"
 import { ReactNode } from "react"
+import { usePortalContainer } from "../../hooks/PortalContainerProvider"
 
 const TooltipProvider: typeof TooltipPrimitive.Provider = TooltipPrimitive.Provider
 
@@ -15,23 +16,28 @@ type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitiv
 
 const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<React.ElementRef<typeof TooltipPrimitive.Content>>> = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  TooltipContentProps
->(({ className, sideOffset = 4, side = "top", ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      side={side}
-      style={{ zIndex: 100 }}
-      className={cn(
-        "max-w-[90vw]",
-        "z-50 overflow-hidden rounded-md bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border border-gray-700 dark:border-gray-300 px-3 py-1.5 text-xs shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-))
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left"
+  }
+>(({ className, sideOffset = 4, side = "top", ...props }, ref) => {
+  const container = usePortalContainer();
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        side={side}
+        style={{ zIndex: 100 }}
+        className={cn(
+          "max-w-[90vw]",
+          "z-50 overflow-hidden rounded-md bg-tooltips border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  );
+})
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 interface TooltipPopoverProps {