@vertesia/ui 0.67.0 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -42,12 +42,14 @@
     "debounce": "^2.2.0",
     "fast-xml-parser": "^5.2.3",
     "firebase": "^10.12.2",
+    "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",
@@ -55,21 +57,20 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
-    "json-schema": "^0.4.0",
-    "@vertesia/client": "0.67.0",
-    "@vertesia/common": "0.67.0",
-    "@vertesia/json": "0.67.0"
+    "@vertesia/client": "0.68.0",
+    "@vertesia/common": "0.68.0",
+    "@vertesia/json": "0.68.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.1.0",
     "@types/react-dom": "^19.1.1",
-    "@types/json-schema": "^7.0.15",
     "eslint": "^9.27.0",
     "eslint-import-resolver-typescript": "^4.3.5",
     "eslint-plugin-import": "^2.31.0",
@@ -118,6 +119,10 @@
     "./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",
@@ -149,6 +154,9 @@
       ],
       "form": [
         "./lib/types/form/index.d.ts"
+      ],
+      "shell": [
+        "./lib/types/shell/index.d.ts"
       ]
     }
   },

package/src/core/components/Badge.tsx

@@ -101,14 +101,18 @@ export function DotBadge({
       className={cn(dotBadgeVariants({ variant }), className)}
       {...props}
     >
-      <svg
-        className={cn(dotVariants({ variant }), dotClassName)}
-        viewBox="0 0 6 6"
-        aria-hidden="true"
-      >
-        <circle cx={3} cy={3} r={3} />
-      </svg>
-      {children}
+      <div className="flex-shrink-0">
+        <svg
+          className={cn(dotVariants({ variant }), dotClassName)}
+          viewBox="0 0 6 6"
+          aria-hidden="true"
+        >
+          <circle cx={3} cy={3} r={3} />
+        </svg>
+      </div>
+      <span className="truncate">
+        {children}
+      </span>
     </span>
   );
 }

package/src/core/components/FormItem.tsx

@@ -11,12 +11,13 @@ interface FormItemProps {
     description?: ReactNode;
     required?: boolean;
     direction?: "row" | "column";
+    disabled?: boolean;
 }
-export function FormItem({ description, required, label, className, direction = "column", children }: FormItemProps) {
+export function FormItem({ description, required, label, className, direction = "column", children, disabled = false }: FormItemProps) {
     return (
-        <div className={clsx("flex w-full space-y-1", className, direction === "row" ? "flex-row justify-between" : "flex-col")}>
+        <div className={clsx("flex w-full space-y-1", className, direction === "row" ? "flex-row justify-between items-center gap-2" : "flex-col")}>
             <div className='flex items-center gap-1'>
-                <label className="text-sm font-medium mb-1">
+                <label className={`text-sm font-medium mb-1 ${disabled ? "text-muted" : ""}`}>
                     {label}{required ? <span className='text-destructive -mt-4 ml-1'>*</span> : ""}
                 </label>
                 {

package/src/core/components/InputList.tsx

@@ -50,29 +50,33 @@ export function InputList({ value = [], onChange, className, delimiters = ", ",
     };
 
     return (
-        <div className={clsx(className, 'w-full space-x-1 space-y-1 p-2', Styles.INPUT)}>
+        <div className={clsx(className, 'w-full flex flex-wrap items-center gap-1 p-2', Styles.INPUT)}>
             {
                 value && value.length > 0 &&
                 (value.map((v, index) =>
-                    <Badge variant={"secondary"} key={index} onClick={() => _onClick(index)} style={{ whiteSpace: 'nowrap' }} className='cursor-pointer'>
-                        {v}
+                    <Badge
+                        variant={"secondary"}
+                        key={index}
+                        onClick={() => _onClick(index)}
+                        className='cursor-pointer'
+                        title={v}
+                    >
+                        <span className='break-all'>{v}</span>
                     </Badge>
                 ))
             }
-            <div>
-                <Input
-                    clearable={false}
-                    className='placeholder:text-muted-foreground px-1'
-                    variant='unstyled'
-                    type='text'
-                    value={text}
-                    onBlur={onBlur}
-                    onKeyDown={onKeyDown}
-                    onChange={setText}
-                    placeholder={!value || value.length === 0 ? placeholder : ''}
-                    autoFocus={autoFocus}
-                />
-            </div>
+            <Input
+                clearable={false}
+                className='placeholder:text-muted-foreground px-1 min-w-0 flex-shrink-0 min-w-[120px]'
+                variant='unstyled'
+                type='text'
+                value={text}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                onChange={setText}
+                placeholder={!value || value.length === 0 ? placeholder : ''}
+                autoFocus={autoFocus}
+            />
         </div>
     )
 }

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

@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer size-4 shrink-0 rounded-sm border border-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-white",
       className,
     )}
     {...props}
@@ -19,7 +19,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Check className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

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

@@ -59,7 +59,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[200px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
 ))

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

@@ -84,22 +84,31 @@ export const VModalTitle = ({
     children,
     show = true,
     className,
+    description,
     ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean }) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean; description?: string }) => {
     if (!show) {
         return (
             <VisuallyHidden>
                 <DialogTitle>{children}</DialogTitle>
+                {description && <DialogDescription>{description}</DialogDescription>}
             </VisuallyHidden>
         )
     }
     return (
-        <DialogTitle
-            className={cn("text-lg font-semibold leading-6 tracking-tight py-2", className)}
-            {...props}
-        >
-            {children}
-        </DialogTitle>
+        <>
+            <DialogTitle
+                className={cn("text-lg font-semibold leading-6 tracking-tight", { 'py-2': !description }, className)}
+                {...props}
+            >
+                {children}
+                {description && (
+                    <DialogDescription className="text-sm !font-normal text-muted-foreground pb-2">
+                        {description}
+                    </DialogDescription>
+                )}
+            </DialogTitle>
+        </>
     );
 };
 
@@ -177,7 +186,7 @@ const DialogContent = React.forwardRef<
                 event.preventDefault();
             }}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-2 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",
+                "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}
@@ -194,7 +203,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Description
         ref={ref}
-        className={cn("text-sm text-muted-foreground", className)}
+        className={cn("text-sm text-muted", className)}
         {...props}
     />
 ))

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

@@ -5,8 +5,7 @@ interface DynamicLabelProps {
   labelRenderer?: (value: string) => React.ReactNode | Promise<React.ReactNode>;
   fallbackLabel?: React.ReactNode;
 }
-
-export function DynamicLabel({ value, labelRenderer, fallbackLabel }: DynamicLabelProps) {
+export function DynamicLabel({ value, labelRenderer, fallbackLabel }: Readonly<DynamicLabelProps>) {
   const [label, setLabel] = useState<React.ReactNode>(fallbackLabel || value);
   const [isLoading, setIsLoading] = useState(false);
 

package/src/core/components/shadcn/filters/comboBox/DateCombobox.tsx

@@ -0,0 +1,211 @@
+import { useState, useEffect } from "react";
+import dayjs from "dayjs";
+import ReactCalendar from "react-calendar";
+import { Button } from "../../button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+import { calendarStyles } from "../filter-styles";
+
+export const DateCombobox = ({
+    filterValues,
+    setFilterValues,
+    isRange = false,
+}: {
+    filterValues: string[];
+    setFilterValues: (values: string[]) => void;
+    isRange?: boolean;
+}) => {
+    const [open, setOpen] = useState(false);
+    const [localDateRange, setLocalDateRange] = useState<[Date | null, Date | null]>([null, null]);
+
+    // For single date
+    const selectedDate = filterValues[0] ? new Date(filterValues[0]) : undefined;
+
+    // For date range - use local state for immediate feedback, fall back to filter values
+    const dateRange: [Date | null, Date | null] = isRange ? [
+        localDateRange[0] || (filterValues[0] ? new Date(filterValues[0]) : null),
+        localDateRange[1] || (filterValues[1] ? new Date(filterValues[1]) : null)
+    ] : [null, null];
+
+    // Update local state when filter values change
+    useEffect(() => {
+        if (isRange) {
+            setLocalDateRange([
+                filterValues[0] ? new Date(filterValues[0]) : null,
+                filterValues[1] ? new Date(filterValues[1]) : null
+            ]);
+        }
+    }, [filterValues, isRange]);
+
+    const getDisplayText = () => {
+        if (isRange) {
+            if (dateRange[0] && dateRange[1]) {
+                return (
+                    <span className="flex items-center gap-1.5">
+                        <span className="font-medium">{dayjs(dateRange[0]).format("MMMM DD, YYYY")}</span>
+                        <span className="text-xs text-muted-foreground">-</span>
+                        <span className="font-medium">{dayjs(dateRange[1]).format("MMMM DD, YYYY")}</span>
+                    </span>
+                );
+            } else if (dateRange[0]) {
+                return (
+                    <span className="flex items-center gap-1.5">
+                        <span className="font-medium">{dayjs(dateRange[0]).format("MMMM DD, YYYY")}</span>
+                        <span className="text-xs text-muted-foreground">- Select end</span>
+                    </span>
+                );
+            } else {
+                return <span className="text-muted-foreground">Select range</span>;
+            }
+        } else {
+            return selectedDate ? dayjs(selectedDate).format("MMMM DD, YYYY") : "Pick a date";
+        }
+    };
+
+    const handleDateChange = (date: any) => {
+        if (isRange) {
+            // Update local state immediately for visual feedback
+            if (Array.isArray(date)) {
+                setLocalDateRange([date[0], date[1]]);
+
+                // Update filter values
+                if (date[0] && date[1]) {
+                    setFilterValues([
+                        dayjs(date[0]).format("YYYY-MM-DD"),
+                        dayjs(date[1]).format("YYYY-MM-DD")
+                    ]);
+                } else if (date[0]) {
+                    setFilterValues([dayjs(date[0]).format("YYYY-MM-DD")]);
+                }
+            }
+        } else {
+            if (date) {
+                const actualDate = Array.isArray(date) ? date[0] : date;
+                if (actualDate) {
+                    setFilterValues([dayjs(actualDate).format("YYYY-MM-DD")]);
+                    setOpen(false);
+                }
+            }
+        }
+    };
+
+    return (
+        <Popover _open={open} onOpenChange={setOpen}>
+            <PopoverTrigger
+                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
+            >
+                <div className="flex gap-1.5 items-center min-h-[20px]">
+                    {getDisplayText()}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start" side="bottom" alignOffset={-4} sideOffset={6}>
+                <div className="p-2">
+                    {isRange ? (
+                        <>
+                            <div className="calendar-wrapper">
+                                <style>{calendarStyles}</style>
+                                <ReactCalendar
+                                    value={dateRange}
+                                    onChange={handleDateChange}
+                                    selectRange={true}
+                                    returnValue="range"
+                                    maxDate={(() => {
+                                        const maxDate = new Date();
+                                        maxDate.setHours(23, 59, 59, 999);
+                                        return maxDate;
+                                    })()}
+                                    className="mb-2 border-0"
+                                    tileClassName={({ date, view }) => {
+                                        if (view === 'month') {
+                                            const currentDate = date.getTime();
+                                            const today = new Date();
+                                            today.setHours(23, 59, 59, 999);
+
+                                            // Check if date is disabled (future date)
+                                            if (currentDate > today.getTime()) {
+                                                return 'text-muted/20 cursor-not-allowed';
+                                            }
+
+                                            // Handle selected date styling
+                                            if (dateRange[0]) {
+                                                const startDate = dateRange[0].getTime();
+
+                                                if (dateRange[1]) {
+                                                    // Both dates selected
+                                                    const endDate = dateRange[1].getTime();
+
+                                                    if (currentDate === startDate) {
+                                                        return 'bg-primary text-primary-foreground rounded-l-md font-semibold';
+                                                    }
+                                                    if (currentDate === endDate) {
+                                                        return 'bg-primary text-primary-foreground rounded-r-md font-semibold';
+                                                    }
+                                                    if (currentDate > startDate && currentDate < endDate) {
+                                                        return 'bg-primary/20 text-primary font-medium';
+                                                    }
+                                                } else {
+                                                    // Only start date selected
+                                                    if (currentDate === startDate) {
+                                                        return 'bg-primary text-primary-foreground rounded-md font-semibold';
+                                                    }
+                                                }
+                                            }
+                                        }
+                                        return '';
+                                    }}
+                                />
+                            </div>
+                            {dateRange[0] && dateRange[1] && (
+                                <div className="border-t pt-2">
+                                    <div className="flex gap-2 justify-end">
+                                        <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>
+                                            Cancel
+                                        </Button>
+                                        <Button 
+                                            size="sm" 
+                                            onClick={() => setOpen(false)}
+                                        >
+                                            Apply
+                                        </Button>
+                                    </div>
+                                </div>
+                            )}
+                        </>
+                    ) : (
+                        <div className="calendar-wrapper">
+                            <style>{calendarStyles}</style>
+                            <ReactCalendar
+                                value={selectedDate}
+                                onChange={handleDateChange}
+                                selectRange={false}
+                                maxDate={(() => {
+                                    const maxDate = new Date();
+                                    maxDate.setHours(23, 59, 59, 999);
+                                    return maxDate;
+                                })()}
+                                className="mb-2 border-0"
+                                tileClassName={({ date, view }) => {
+                                    if (view === 'month') {
+                                        const currentDate = date.getTime();
+                                        const today = new Date();
+                                        today.setHours(23, 59, 59, 999);
+
+                                        // Check if date is disabled (future date)
+                                        if (currentDate > today.getTime()) {
+                                            return 'text-muted/20 cursor-not-allowed';
+                                        }
+
+                                        // Handle selected date styling
+                                        if (selectedDate && currentDate === selectedDate.getTime()) {
+                                            return 'bg-primary text-primary-foreground rounded-md font-semibold';
+                                        }
+                                    }
+                                    return '';
+                                }}
+                            />
+                        </div>
+                    )}
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+};