@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/core/components/NumberInput.tsx

@@ -1,9 +1,9 @@
-import clsx from "clsx";
-import React, { ChangeEvent, useEffect } from "react";
-import { Styles } from "./styles.js";
+import clsx from 'clsx';
+import React, { type ChangeEvent, useEffect } from 'react';
+import { Styles } from './styles.js';
 
 function numberToString(value: number | undefined) {
-    if (value == null || isNaN(value)) {
+    if (value == null || Number.isNaN(value)) {
         return '';
     } else {
         return value.toString();
@@ -12,9 +12,9 @@ function numberToString(value: number | undefined) {
 
 interface NumberInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'value'> {
     value?: number;
-    onChange?: (value: undefined | number, text: string) => void
+    onChange?: (value: undefined | number, text: string) => void;
     noScroll?: boolean;
-    noSpinners?: boolean
+    noSpinners?: boolean;
 }
 
 /**
@@ -23,42 +23,53 @@ interface NumberInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ref'
  * The onChange callback is called whenever the value changes. If the input cannot be parsed as a number
  * it will be returned as NaN.
  */
-const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(({ value, onChange, className, noScroll = false, noSpinners = false, ...others }: NumberInputProps, ref) => {
-    // we need to store the state here in string
-    const [textValue, setTextValue] = React.useState<string>(numberToString(value))
-    const _onChange = (ev: ChangeEvent<HTMLInputElement>) => {
-        const value = ev.target.value;
-        setTextValue(value)
-        if (value === '') {
-            onChange && onChange(undefined, value)
-        } else {
-            const num = parseFloat(value);
-            onChange && onChange(num, value)
-        }
-    }
-
-    useEffect(() => {
-        // we do not update if not empty and NaN
-        if (value == null || !isNaN(value)) {
-            const text = numberToString(value);
-            setTextValue(text);
-        }
-    }, [value])
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+    ({ value, onChange, className, noScroll = false, noSpinners = false, ...others }: NumberInputProps, ref) => {
+        // we need to store the state here in string
+        const [textValue, setTextValue] = React.useState<string>(numberToString(value));
+        const _onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+            const value = ev.target.value;
+            setTextValue(value);
+            if (value === '') {
+                onChange?.(undefined, value);
+            } else {
+                const num = parseFloat(value);
+                onChange?.(num, value);
+            }
+        };
 
-    return (
-        <input
-            onWheel={noScroll ? event => { (event.target as any).blur(); } : others.onWheel} /* avoid input change on wheel scroll */
-            type='number'
-            value={textValue}
-            onChange={_onChange}
-            className={clsx(className, Styles.INPUT, { "no-spinners": noSpinners },
-                noSpinners && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-            )}
-            ref={ref}
-            {...others}
-        />
+        useEffect(() => {
+            // we do not update if not empty and NaN
+            if (value == null || !Number.isNaN(value)) {
+                const text = numberToString(value);
+                setTextValue(text);
+            }
+        }, [value]);
 
-    )
-})
+        return (
+            <input
+                onWheel={
+                    noScroll
+                        ? (event) => {
+                              event.currentTarget.blur();
+                          }
+                        : others.onWheel
+                } /* avoid input change on wheel scroll */
+                type="number"
+                value={textValue}
+                onChange={_onChange}
+                className={clsx(
+                    className,
+                    Styles.INPUT,
+                    { 'no-spinners': noSpinners },
+                    noSpinners &&
+                        '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                )}
+                ref={ref}
+                {...others}
+            />
+        );
+    },
+);
 
 export { NumberInput };

package/src/core/components/Overlay.tsx

@@ -1,129 +1,138 @@
-import { motion } from "framer-motion"
-import { X } from "lucide-react"
-import { useState, ReactNode } from "react"
+import { motion } from 'framer-motion';
+import { X } from 'lucide-react';
+import { type ReactNode, useState } from 'react';
 
-import { Button } from "./shadcn/button"
+import { Button } from './shadcn/button';
 
 interface OverlayProps {
-    children: ReactNode
-    overlayContent: ReactNode
-    className?: string
-    overlayClassName?: string
-    position?: 'left' | 'right' | 'top' | 'bottom' | 'center'
-    width?: string
-    height?: string
-    showCloseButton?: boolean
-    closeButtonTooltip?: string
-    onOpen?: () => void
-    onClose?: () => void
-    triggerClassName?: string
-    backdropClassName?: string
+    children: ReactNode;
+    overlayContent: ReactNode;
+    className?: string;
+    overlayClassName?: string;
+    position?: 'left' | 'right' | 'top' | 'bottom' | 'center';
+    width?: string;
+    height?: string;
+    showCloseButton?: boolean;
+    closeButtonTooltip?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    triggerClassName?: string;
+    backdropClassName?: string;
     animationConfig?: {
-        type?: "spring" | "tween"
-        stiffness?: number
-        damping?: number
-        duration?: number
-    }
+        type?: 'spring' | 'tween';
+        stiffness?: number;
+        damping?: number;
+        duration?: number;
+    };
 }
 export function Overlay({
     children,
     overlayContent,
-    className = "",
-    overlayClassName = "",
+    className = '',
+    overlayClassName = '',
     position = 'right',
     width,
     height,
     showCloseButton = true,
     onOpen,
     onClose,
-    triggerClassName = "",
-    backdropClassName = "",
-    animationConfig = { type: "spring", stiffness: 300, damping: 30 }
+    triggerClassName = '',
+    backdropClassName = '',
+    animationConfig = { type: 'spring', stiffness: 300, damping: 30 },
 }: Readonly<OverlayProps>) {
-    const [isOpen, setIsOpen] = useState(false)
+    const [isOpen, setIsOpen] = useState(false);
 
     const handleOpen = () => {
-        setIsOpen(true)
-        onOpen?.()
-    }
+        setIsOpen(true);
+        onOpen?.();
+    };
 
     const handleClose = () => {
-        setIsOpen(false)
-        onClose?.()
-    }
+        setIsOpen(false);
+        onClose?.();
+    };
 
-    const animationProps = getAnimationProps(position)
-    const positionClasses = getPositionClasses(position, width, height)
+    const animationProps = getAnimationProps(position);
+    const positionClasses = getPositionClasses(position, width, height);
 
     return (
         <div className={`flex items-center justify-center w-full ${className}`}>
-            <div onClick={handleOpen} className={`w-full align-left cursor-pointer ${triggerClassName}`}>
+            <Button
+                variant="unstyled"
+                size="none"
+                onClick={handleOpen}
+                className={`w-full align-left cursor-pointer ${triggerClassName}`}
+            >
                 {children}
-            </div>
-            {
-                isOpen && (
-                    <div className={`z-45 fixed inset-0 bg-black bg-opacity-50 ${backdropClassName}`}>
-                        <motion.div
-                            {...animationProps}
-                            transition={animationConfig}
-                            className={`${positionClasses} ${overlayClassName}`}
-                        >
-                            {
-                                showCloseButton && (
-                                    <div className="absolute top-2 right-2 z-10">
-                                        <Button onClick={handleClose} variant="primary">
-                                            <X />
-                                        </Button>
-                                    </div>
-                                )
-                            }
-                            <div className={showCloseButton ? "mt-8" : ""}>
-                                {overlayContent}
+            </Button>
+            {isOpen && (
+                <div className={`z-45 fixed inset-0 bg-black bg-opacity-50 ${backdropClassName}`}>
+                    <motion.div
+                        {...animationProps}
+                        transition={animationConfig}
+                        className={`${positionClasses} ${overlayClassName}`}
+                    >
+                        {showCloseButton && (
+                            <div className="absolute top-2 end-2 z-10">
+                                <Button onClick={handleClose} variant="primary">
+                                    <X />
+                                </Button>
                             </div>
-                        </motion.div>
-                    </div>
-                )
-            }
+                        )}
+                        <div className={showCloseButton ? 'mt-8' : ''}>{overlayContent}</div>
+                    </motion.div>
+                </div>
+            )}
         </div>
-    )
+    );
 }
 
 function getAnimationProps(position: string) {
     switch (position) {
         case 'left':
-            return { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" } }
+            return { initial: { x: '-100%' }, animate: { x: 0 }, exit: { x: '-100%' } };
         case 'right':
-            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+            return { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' } };
         case 'top':
-            return { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } }
+            return { initial: { y: '-100%' }, animate: { y: 0 }, exit: { y: '-100%' } };
         case 'bottom':
-            return { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" } }
+            return { initial: { y: '100%' }, animate: { y: 0 }, exit: { y: '100%' } };
         case 'center':
             return {
                 initial: { opacity: 0, scale: 0.8 },
                 animate: { opacity: 1, scale: 1 },
-                exit: { opacity: 0, scale: 0.8 }
-            }
+                exit: { opacity: 0, scale: 0.8 },
+            };
         default:
-            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+            return { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' } };
     }
 }
 
 function getPositionClasses(position: string, width?: string, height?: string) {
-    const baseClasses = "fixed bg-white shadow-lg p-4 relative"
+    const baseClasses = 'fixed bg-white shadow-lg p-4 relative';
 
+    // `position` is a PHYSICAL prop ('left' | 'right' | 'top' | 'bottom' |
+    // 'center'), and the framer-motion animation x/y values above use physical
+    // axes, so the matching CSS positioning is intentionally physical too.
+    // Callers that want logical (start/end) behavior should choose 'left' or
+    // 'right' based on the active direction (see AppLayout.tsx for the
+    // pattern).
     switch (position) {
         case 'left':
-            return `${baseClasses} left-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+            // rtl-ok: physical position prop -> physical CSS
+            return `${baseClasses} left-0 top-[var(--header-height)] h-full ${width || 'w-80'}`;
         case 'right':
-            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+            // rtl-ok: physical position prop -> physical CSS
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`;
         case 'top':
-            return `${baseClasses} top-[var(--header-height)] left-0 right-0 ${height || 'h-80'}`
+            return `${baseClasses} top-[var(--header-height)] start-0 end-0 ${height || 'h-80'}`;
         case 'bottom':
-            return `${baseClasses} bottom-0 left-0 right-0 ${height || 'h-80'}`
+            return `${baseClasses} bottom-0 start-0 end-0 ${height || 'h-80'}`;
         case 'center':
-            return `${baseClasses} top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${width || 'w-96'} ${height || 'max-h-96'}`
+            // rtl-ok: symmetric centering — paired with -translate-x-1/2 which works the same way in both directions
+            return `${baseClasses} top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${width || 'w-96'} ${height || 'max-h-96'}`;
         default:
-            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+            // rtl-ok: physical default
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`;
     }
-}
+}

package/src/core/components/Portal.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 const PORTAL_ID = '--tailwind-portal';
 
@@ -12,7 +12,8 @@ export function Portal({ children }: PortalProps) {
 
     // hack to have the Portal not generating hydration errors (content mismatch) on SSR / CSR
     useEffect(() => {
-        if (tempNode.current) { // we are on the browser -> we an use the portal
+        if (tempNode.current) {
+            // we are on the browser -> we an use the portal
             const doc = tempNode.current.ownerDocument;
             let portalEl = doc.getElementById(PORTAL_ID) as HTMLDivElement;
             if (!portalEl) {
@@ -22,12 +23,11 @@ export function Portal({ children }: PortalProps) {
             }
             setPortalEl(portalEl);
         }
-    }, [tempNode.current]);
+    }, []);
 
     if (portalEl) {
         return createPortal(children, portalEl);
     } else {
-        return <span ref={tempNode} />
+        return <span ref={tempNode} />;
     }
-
-}
+}

package/src/core/components/SelectList.tsx

@@ -1,10 +1,10 @@
-import { Check } from "lucide-react";
-import clsx from "clsx";
-import { ReactNode, useMemo, useState } from "react";
-import { useUITranslation } from "@vertesia/ui/i18n";
-import { Input } from "./shadcn";
+import { useUITranslation } from '@vertesia/ui/i18n';
+import clsx from 'clsx';
+import { Check } from 'lucide-react';
+import { type ReactNode, useMemo, useState } from 'react';
+import { Button, Input } from './shadcn';
 
-const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
+const Default_Option_Style = 'flex-1 px-2 py-2 hover:bg-accent nowrap';
 
 export interface OptionLayout {
     label?: ReactNode;
@@ -16,10 +16,10 @@ export interface OptionLayout {
 function defaultOptionLayout<T>(option: T, isSelected: boolean): OptionLayout {
     return {
         label: String(option),
-        check: isSelected ? <Check className='size-4' /> : <div className="size-4" />,
+        check: isSelected ? <Check className="size-4" /> : <div className="size-4" />,
         reverse: false,
         className: Default_Option_Style,
-    }
+    };
 }
 
 export interface SelectListProps<T> {
@@ -32,15 +32,24 @@ export interface SelectListProps<T> {
     noCheck?: boolean;
     filterBy?: (filterValue: string) => (opt: T) => boolean;
 }
-export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }: SelectListProps<T>) {
+export function SelectList<T>({
+    value,
+    options,
+    onChange,
+    className,
+    optionLayout,
+    by,
+    noCheck,
+    filterBy,
+}: SelectListProps<T>) {
     const { t } = useUITranslation();
     const [selected, setSelected] = useState(value);
-    const [filterValue, setFilterValue] = useState("");
+    const [filterValue, setFilterValue] = useState('');
 
     const onSelect = (option: T) => {
         setSelected(option);
         onChange(option);
-    }
+    };
     const optionEquals = useMemo(() => {
         if (typeof by === 'string') {
             return (o1: T, o2: T) => o1[by] === o2[by];
@@ -51,9 +60,14 @@ export function SelectList<T>({ value, options, onChange, className, optionLayou
         }
     }, [by]);
     return (
-        <div className={clsx("", className)}>
+        <div className={clsx('', className)}>
             {filterBy && (
-                <Input type="text" placeholder={t('form.filter')} value={filterValue} onChange={(value) => setFilterValue(value)} />
+                <Input
+                    type="text"
+                    placeholder={t('form.filter')}
+                    value={filterValue}
+                    onChange={(value) => setFilterValue(value)}
+                />
             )}
             {options.map((option, i) => {
                 if (filterBy && !filterBy(filterValue)(option)) {
@@ -68,16 +82,12 @@ export function SelectList<T>({ value, options, onChange, className, optionLayou
                     layout = defaultOptionLayout(option, isSelected);
                 }
                 return (
-                    <SelectListOption key={i}
-                        option={option}
-                        onSelect={onSelect}
-                        layout={layout}
-                        noCheck={noCheck}
-                    />
-                )
+                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
+                    <SelectListOption key={i} option={option} onSelect={onSelect} layout={layout} noCheck={noCheck} />
+                );
             })}
         </div>
-    )
+    );
 }
 interface SelectListOptionProps<T> {
     option: T;
@@ -88,10 +98,18 @@ interface SelectListOptionProps<T> {
 
 function SelectListOption<T>({ option, onSelect, layout, noCheck }: SelectListOptionProps<T>) {
     return (
-        <div className={clsx('group flex items-center cursor-pointer gap-x-2 hover:bg-muted',
-            layout.reverse && 'flex-row-reverse', layout.className)} onClick={() => onSelect(option)}>
+        <Button
+            variant="unstyled"
+            size="none"
+            className={clsx(
+                'group !flex w-full items-center cursor-pointer gap-x-2 hover:bg-muted',
+                layout.reverse && 'flex-row-reverse',
+                layout.className,
+            )}
+            onClick={() => onSelect(option)}
+        >
             {noCheck ? null : <div className="">{layout.check}</div>}
-            <div className='flex-1'>{layout.label}</div>
-        </div>
-    )
+            <div className="flex-1">{layout.label}</div>
+        </Button>
+    );
 }

package/src/core/components/SidePanel.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Minus, X } from 'lucide-react';
+import type React from 'react';
+import { useState } from 'react';
 import { Button } from './shadcn/button';
 
 interface SidePanelProps {
@@ -15,7 +16,18 @@ interface SidePanelProps {
     className?: string;
     contentClassName?: string;
 }
-export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className, contentClassName }: SidePanelProps) {
+export function SidePanel({
+    isOpen,
+    title,
+    onClose,
+    children,
+    panelWidth = 768,
+    backdrop = false,
+    side = 'right',
+    resizable = true,
+    className,
+    contentClassName,
+}: SidePanelProps) {
     const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
@@ -43,12 +55,21 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
         document.addEventListener('mouseup', handleMouseUp);
     };
 
+    // The `side` prop is PHYSICAL ('left' | 'right') — the panel anchors to
+    // that physical edge regardless of dir. Callers that want a logical
+    // start-anchored panel in RTL should pass `side='right'` explicitly (see
+    // AppLayout.tsx). Using physical classes here keeps the contract honest;
+    // the codemod (and inventory in strict mode) is exempted via rtl-ok.
     const isLeft = side === 'left';
+    // rtl-ok: physical-side prop maps 1:1 to physical CSS
     const positionClass = isLeft ? 'left-0' : 'right-0';
+    // rtl-ok: padding/border/drag-handle mirror the physical side of the panel
     const paddingClass = isLeft ? 'pr-10 sm:pr-16' : 'pl-10 sm:pl-16';
+    // rtl-ok: see above
     const borderClass = isLeft ? 'border-r' : 'border-l';
+    // rtl-ok: see above
     const dragHandleClass = isLeft ? '-right-1' : '-left-1';
-    const initialX = isLeft ? "-100%" : "100%";
+    const initialX = isLeft ? '-100%' : '100%';
 
     return (
         <AnimatePresence>
@@ -67,34 +88,41 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
 
                     <div className={`fixed inset-y-0 ${positionClass} overflow-hidden`}>
                         <div className="absolute inset-0 overflow-hidden">
-                            <div className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}>
+                            <div
+                                className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}
+                            >
                                 <motion.div
                                     className={`pointer-events-auto ${borderClass}`}
                                     style={{ width: `${_panelWidth}px` }}
                                     initial={{ x: initialX }}
                                     animate={{ x: 0 }}
                                     exit={{ x: initialX }}
-                                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                                 >
                                     <div className="relative flex h-full">
                                         {/* Drag Handle */}
                                         {resizable && (
+                                            // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only (no keyboard equivalent for continuous resize); ARIA role omitted to avoid useAriaPropsForRole false positive.
+                                            // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label kept for AT users; div has no semantic role because separator/slider would require valuenow/min/max
                                             <div
-                                                className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center`}
+                                                aria-label="Resize panel"
+                                                className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 z-25 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center`}
                                                 onMouseDown={handleDragStart}
                                             >
                                                 <Minus className="rotate-90 font-semibold" strokeWidth={4} />
                                             </div>
                                         )}
-                                        <div className={`flex-1 min-w-0 flex flex-col bg-background shadow-xl ${className}`}>
+                                        <div
+                                            className={`flex-1 min-w-0 flex flex-col bg-background shadow-xl ${className}`}
+                                        >
                                             {/* Sticky header */}
                                             {title && (
                                                 <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
                                                     <div className="flex items-start justify-between">
                                                         <h2 className="w-full text-base font-semibold leading-6">
-                                                            <div className="text-2xl">{title ?? ""}</div>
+                                                            <div className="text-2xl">{title ?? ''}</div>
                                                         </h2>
-                                                        <div className="ml-3 flex h-7 items-center">
+                                                        <div className="ms-3 flex h-7 items-center">
                                                             <CloseButton onClose={onClose} />
                                                         </div>
                                                     </div>
@@ -102,10 +130,10 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                             )}
 
                                             {/* Scrollable content */}
-                                            <div className={contentClassName ?? "flex-1 overflow-auto px-2 sm:px-4 py-4"}>
-                                                <div className='w-full h-full flex-1 flex flex-col'>
-                                                    {children}
-                                                </div>
+                                            <div
+                                                className={contentClassName ?? 'flex-1 overflow-auto px-2 sm:px-4 py-4'}
+                                            >
+                                                <div className="w-full h-full flex-1 flex flex-col">{children}</div>
                                             </div>
                                         </div>
                                     </div>
@@ -121,11 +149,8 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
 
 function CloseButton({ onClose }: { onClose: () => void }) {
     return (
-        <Button alt="Close panel"
-            variant="ghost"
-            onClick={onClose}
-        >
+        <Button alt="Close panel" variant="ghost" onClick={onClose}>
             <X className="size-6" aria-hidden="true" />
         </Button>
-    )
-}
+    );
+}