@uipath/apollo-wind 0.7.2-pr188.4865fad

package/dist/components/ui/editable-cell.js

@@ -0,0 +1,219 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "../../lib/index.js";
+import { Input } from "./input.js";
+import { Checkbox } from "./checkbox.js";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+function EditableCell({ cell, onUpdate }) {
+    const initialValue = cell.getValue();
+    const meta = cell.column.columnDef.meta;
+    const type = meta?.type ?? 'text';
+    const [isEditing, setIsEditing] = useState(false);
+    const [value, setValue] = useState(initialValue);
+    const inputRef = useRef(null);
+    useEffect(()=>{
+        setValue(initialValue);
+    }, [
+        initialValue
+    ]);
+    useEffect(()=>{
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [
+        isEditing
+    ]);
+    const handleSave = useCallback(()=>{
+        if (value !== initialValue) onUpdate(value);
+        setIsEditing(false);
+    }, [
+        value,
+        initialValue,
+        onUpdate
+    ]);
+    const handleCancel = useCallback(()=>{
+        setValue(initialValue);
+        setIsEditing(false);
+    }, [
+        initialValue
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if ('Enter' === e.key) {
+            e.preventDefault();
+            handleSave();
+        } else if ('Escape' === e.key) {
+            e.preventDefault();
+            handleCancel();
+        }
+    }, [
+        handleSave,
+        handleCancel
+    ]);
+    if ('checkbox' === type) return /*#__PURE__*/ jsx("div", {
+        className: "flex items-center justify-center",
+        children: /*#__PURE__*/ jsx(Checkbox, {
+            checked: Boolean(value),
+            onCheckedChange: (checked)=>{
+                setValue(checked);
+                onUpdate(checked);
+            },
+            "aria-label": "Toggle"
+        })
+    });
+    const cellContent = isEditing ? renderEditMode() : /*#__PURE__*/ jsx("div", {
+        className: cn('min-h-[32px] px-2 py-1.5 -mx-2 rounded cursor-pointer', 'hover:bg-muted/50 transition-colors', 'flex items-center w-full'),
+        onClick: ()=>setIsEditing(true),
+        onKeyDown: (e)=>{
+            if ('Enter' === e.key || ' ' === e.key) {
+                e.preventDefault();
+                setIsEditing(true);
+            }
+        },
+        tabIndex: 0,
+        role: "button",
+        "aria-label": `Edit ${cell.column.id}`,
+        children: /*#__PURE__*/ jsx("span", {
+            className: cn('truncate', !value && 'text-muted-foreground'),
+            children: formatDisplayValue(value, type, meta?.options)
+        })
+    });
+    return cellContent;
+    function renderEditMode() {
+        switch(type){
+            case 'select':
+                return /*#__PURE__*/ jsxs(Select, {
+                    value: String(value ?? ''),
+                    onValueChange: (newValue)=>{
+                        setValue(newValue);
+                        onUpdate(newValue);
+                        setIsEditing(false);
+                    },
+                    open: true,
+                    onOpenChange: (open)=>{
+                        if (!open) setIsEditing(false);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(SelectTrigger, {
+                            className: "h-8 -mx-2 w-full",
+                            children: /*#__PURE__*/ jsx(SelectValue, {
+                                placeholder: meta?.placeholder ?? 'Select...'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(SelectContent, {
+                            children: meta?.options?.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
+                                    value: option.value,
+                                    children: option.label
+                                }, option.value))
+                        })
+                    ]
+                });
+            case 'date':
+                return /*#__PURE__*/ jsx(DatePickerCell, {
+                    value: value instanceof Date ? value : value ? new Date(value) : void 0,
+                    onValueChange: (date)=>{
+                        setValue(date);
+                        onUpdate(date);
+                    },
+                    onClose: ()=>setIsEditing(false),
+                    placeholder: meta?.placeholder ?? 'Pick date'
+                });
+            case 'number':
+                return /*#__PURE__*/ jsx(Input, {
+                    ref: inputRef,
+                    type: "number",
+                    value: value,
+                    onChange: (e)=>setValue(e.target.valueAsNumber),
+                    onBlur: handleSave,
+                    onKeyDown: handleKeyDown,
+                    min: meta?.min,
+                    max: meta?.max,
+                    className: "h-8 -mx-2 w-full"
+                });
+            case 'text':
+            default:
+                return /*#__PURE__*/ jsx(Input, {
+                    ref: inputRef,
+                    type: "text",
+                    value: String(value ?? ''),
+                    onChange: (e)=>setValue(e.target.value),
+                    onBlur: handleSave,
+                    onKeyDown: handleKeyDown,
+                    placeholder: meta?.placeholder,
+                    className: "h-8 -mx-2 w-full"
+                });
+        }
+    }
+}
+function formatDisplayValue(value, type, options) {
+    if (null == value || '' === value) return '—';
+    switch(type){
+        case 'select':
+            {
+                const option = options?.find((o)=>o.value === value);
+                return option?.label ?? String(value);
+            }
+        case 'date':
+            if (value instanceof Date) return format(value, 'PP');
+            return format(new Date(value), 'PP');
+        case 'checkbox':
+            return value ? 'Yes' : 'No';
+        default:
+            return String(value);
+    }
+}
+function createEditableColumn(accessorKey, header, meta) {
+    return {
+        accessorKey,
+        header,
+        meta
+    };
+}
+function DatePickerCell({ value, onValueChange, onClose, placeholder }) {
+    const [open, setOpen] = useState(true);
+    return /*#__PURE__*/ jsxs(Popover, {
+        open: open,
+        onOpenChange: (isOpen)=>{
+            setOpen(isOpen);
+            if (!isOpen) onClose();
+        },
+        children: [
+            /*#__PURE__*/ jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "outline",
+                    className: cn('h-8 -mx-2 w-full justify-start text-left font-normal text-sm', !value && 'text-muted-foreground'),
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarIcon, {
+                            className: "mr-2 h-4 w-4 shrink-0"
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: value ? format(value, 'PP') : placeholder
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(PopoverContent, {
+                className: "w-auto p-0",
+                align: "start",
+                children: /*#__PURE__*/ jsx(Calendar, {
+                    mode: "single",
+                    selected: value,
+                    onSelect: (date)=>{
+                        onValueChange(date);
+                        setOpen(false);
+                        onClose();
+                    },
+                    initialFocus: true
+                })
+            })
+        ]
+    });
+}
+export { EditableCell, createEditableColumn };

package/dist/components/ui/empty-state.cjs

@@ -0,0 +1,73 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    EmptyState: ()=>EmptyState
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_button_cjs_namespaceObject = require("./button.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const EmptyState = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ icon, title, description, action, secondaryAction, className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: ref,
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col items-center justify-center p-8 text-center', className),
+        ...props,
+        children: [
+            icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted text-muted-foreground",
+                children: icon
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                className: "text-xl font-semibold tracking-tight",
+                children: title
+            }),
+            description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                className: "mt-3 mb-6 max-w-md text-sm text-muted-foreground leading-relaxed",
+                children: description
+            }),
+            (action || secondaryAction) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex flex-wrap items-center justify-center gap-2",
+                children: [
+                    action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                        onClick: action.onClick,
+                        children: action.label
+                    }),
+                    secondaryAction && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                        variant: "outline",
+                        onClick: secondaryAction.onClick,
+                        children: secondaryAction.label
+                    })
+                ]
+            })
+        ]
+    }));
+EmptyState.displayName = 'EmptyState';
+exports.EmptyState = __webpack_exports__.EmptyState;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EmptyState"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/empty-state.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    secondaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyState };

package/dist/components/ui/empty-state.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button } from "./button.js";
+import { cn } from "../../lib/index.js";
+const EmptyState = /*#__PURE__*/ forwardRef(({ icon, title, description, action, secondaryAction, className, ...props }, ref)=>/*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: cn('flex flex-col items-center justify-center p-8 text-center', className),
+        ...props,
+        children: [
+            icon && /*#__PURE__*/ jsx("div", {
+                className: "mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted text-muted-foreground",
+                children: icon
+            }),
+            /*#__PURE__*/ jsx("h3", {
+                className: "text-xl font-semibold tracking-tight",
+                children: title
+            }),
+            description && /*#__PURE__*/ jsx("p", {
+                className: "mt-3 mb-6 max-w-md text-sm text-muted-foreground leading-relaxed",
+                children: description
+            }),
+            (action || secondaryAction) && /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-wrap items-center justify-center gap-2",
+                children: [
+                    action && /*#__PURE__*/ jsx(Button, {
+                        onClick: action.onClick,
+                        children: action.label
+                    }),
+                    secondaryAction && /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        onClick: secondaryAction.onClick,
+                        children: secondaryAction.label
+                    })
+                ]
+            })
+        ]
+    }));
+EmptyState.displayName = 'EmptyState';
+export { EmptyState };

package/dist/components/ui/file-upload.cjs

@@ -0,0 +1,236 @@
+'use client';
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    FileUpload: ()=>FileUpload
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_button_cjs_namespaceObject = require("./button.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function FileUpload({ onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false }) {
+    const [files, setFiles] = external_react_namespaceObject.useState([]);
+    const [isDragging, setIsDragging] = external_react_namespaceObject.useState(false);
+    const [error, setError] = external_react_namespaceObject.useState('');
+    const [previews, setPreviews] = external_react_namespaceObject.useState([]);
+    const inputRef = external_react_namespaceObject.useRef(null);
+    const validateFiles = (fileList)=>{
+        setError('');
+        const validFiles = [];
+        for (const file of fileList){
+            if (maxSize && file.size > maxSize) {
+                setError(`File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`);
+                continue;
+            }
+            const isDuplicate = files.some((existingFile)=>existingFile.name === file.name && existingFile.size === file.size);
+            if (!isDuplicate) validFiles.push(file);
+        }
+        return validFiles;
+    };
+    const handleFiles = (fileList)=>{
+        if (!fileList || 0 === fileList.length) return;
+        const filesArray = Array.from(fileList);
+        const validFiles = validateFiles(filesArray);
+        if (0 === validFiles.length) return;
+        const newFiles = multiple ? [
+            ...files,
+            ...validFiles
+        ] : validFiles;
+        setFiles(newFiles);
+        onFilesChange?.(newFiles);
+        if (showPreview) {
+            const newPreviews = [];
+            validFiles.forEach((file)=>{
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onloadend = ()=>{
+                        newPreviews.push(reader.result);
+                        if (newPreviews.length === validFiles.filter((f)=>f.type.startsWith('image/')).length) setPreviews(multiple ? [
+                            ...previews,
+                            ...newPreviews
+                        ] : newPreviews);
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+    };
+    const removeFile = (index)=>{
+        const newFiles = files.filter((_, i)=>i !== index);
+        setFiles(newFiles);
+        onFilesChange?.(newFiles);
+        if (showPreview) {
+            const newPreviews = previews.filter((_, i)=>i !== index);
+            setPreviews(newPreviews);
+        }
+        setError('');
+    };
+    const handleDragEnter = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled) setIsDragging(true);
+    };
+    const handleDragLeave = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleDragOver = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDrop = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (!disabled) handleFiles(e.dataTransfer.files);
+    };
+    const handleInputChange = (e)=>{
+        handleFiles(e.target.files);
+        if (inputRef.current) inputRef.current.value = '';
+    };
+    const handleClick = ()=>{
+        if (!disabled) inputRef.current?.click();
+    };
+    const formatFileSize = (bytes)=>{
+        if (0 === bytes) return '0 Bytes';
+        const k = 1024;
+        const sizes = [
+            'Bytes',
+            'KB',
+            'MB',
+            'GB'
+        ];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / k ** i * 100) / 100 + ' ' + sizes[i];
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('w-full', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background', error && 'border-destructive'),
+                onDragEnter: handleDragEnter,
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave,
+                onDrop: handleDrop,
+                onClick: handleClick,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                        ref: inputRef,
+                        type: "file",
+                        className: "hidden",
+                        accept: accept,
+                        multiple: multiple,
+                        disabled: disabled,
+                        onChange: handleInputChange,
+                        "aria-label": "File upload"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Upload, {
+                        className: "w-8 h-8 mb-2 text-muted-foreground"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("p", {
+                        className: "text-sm text-muted-foreground text-center",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "font-semibold",
+                                children: "Click to upload"
+                            }),
+                            " or drag and drop"
+                        ]
+                    }),
+                    accept && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                        className: "text-xs text-muted-foreground mt-1",
+                        children: accept.split(',').join(', ')
+                    }),
+                    maxSize && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("p", {
+                        className: "text-xs text-muted-foreground",
+                        children: [
+                            "Max size: ",
+                            formatFileSize(maxSize)
+                        ]
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                className: "text-sm text-destructive mt-2",
+                children: error
+            }),
+            files.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "mt-4 space-y-2",
+                children: files.map((file, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center justify-between p-3 bg-accent/50 rounded-md",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-center gap-3 flex-1 min-w-0",
+                                children: [
+                                    showPreview && previews[index] && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                        src: previews[index],
+                                        alt: file.name,
+                                        className: "w-10 h-10 object-cover rounded"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                        className: "flex-1 min-w-0",
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                className: "text-sm font-medium truncate",
+                                                children: file.name
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                className: "text-xs text-muted-foreground",
+                                                children: formatFileSize(file.size)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                variant: "ghost",
+                                size: "icon",
+                                className: "h-8 w-8",
+                                "aria-label": `Remove ${file.name}`,
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    removeFile(index);
+                                },
+                                disabled: disabled,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                    className: "h-4 w-4"
+                                })
+                            })
+                        ]
+                    }, index))
+            })
+        ]
+    });
+}
+exports.FileUpload = __webpack_exports__.FileUpload;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FileUpload"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/file-upload.d.ts

@@ -0,0 +1,10 @@
+export interface FileUploadProps {
+    onFilesChange?: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    maxSize?: number;
+    className?: string;
+    showPreview?: boolean;
+}
+export declare function FileUpload({ onFilesChange, accept, multiple, disabled, maxSize, className, showPreview, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;