uiplex 1.4.0 → 1.5.0

package/dist/index.cjs

@@ -1364,6 +1364,266 @@ const Breadcrumb = ({ items, separator = "/", className = "", style, ...props })
                         }, className: `ui-breadcrumb__link ${isLastItem(index) ? "ui-breadcrumb__link--current" : ""}`.trim(), "aria-current": isLastItem(index) ? "page" : undefined, children: item.label })) : (jsxRuntime.jsx("span", { className: `ui-breadcrumb__text ${isLastItem(index) ? "ui-breadcrumb__text--current" : ""}`.trim(), "aria-current": isLastItem(index) ? "page" : undefined, children: item.label })), !isLastItem(index) && (jsxRuntime.jsx("span", { className: "ui-breadcrumb__separator", "aria-hidden": "true", children: separator }))] }, index))) }) }));
 };
 
+const Table = ({ children, variant = "default", size = "md", className = "", style, ...props }) => {
+    const classes = [
+        "ui-table",
+        `ui-table--${variant}`,
+        `ui-table--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("div", { className: "ui-table__wrapper", children: jsxRuntime.jsx("table", { className: classes, style: style, ...props, children: children }) }));
+};
+const TableHead = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("thead", { className: `ui-table__head ${className}`.trim(), style: style, ...props, children: children }));
+const TableBody = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("tbody", { className: `ui-table__body ${className}`.trim(), style: style, ...props, children: children }));
+const TableFooter = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("tfoot", { className: `ui-table__foot ${className}`.trim(), style: style, ...props, children: children }));
+const TableRow = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("tr", { className: `ui-table__row ${className}`.trim(), style: style, ...props, children: children }));
+const TableHeader = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("th", { className: `ui-table__header ${className}`.trim(), style: style, ...props, children: children }));
+const TableCell = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("td", { className: `ui-table__cell ${className}`.trim(), style: style, ...props, children: children }));
+
+const Alert = ({ children, variant = "info", title, onClose, className = "", style, ...props }) => {
+    const classes = [
+        "ui-alert",
+        `ui-alert--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsxs("div", { className: classes, style: style, role: "alert", ...props, children: [jsxRuntime.jsxs("div", { className: "ui-alert__content", children: [title && jsxRuntime.jsx("div", { className: "ui-alert__title", children: title }), jsxRuntime.jsx("div", { className: "ui-alert__message", children: children })] }), onClose && (jsxRuntime.jsx("button", { type: "button", className: "ui-alert__close", onClick: onClose, "aria-label": "Close alert", children: "\u00D7" }))] }));
+};
+
+const Badge = ({ children, variant = "default", size = "md", className = "", style, ...props }) => {
+    const classes = [
+        "ui-badge",
+        `ui-badge--${variant}`,
+        `ui-badge--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("span", { className: classes, style: style, ...props, children: children }));
+};
+
+const getInitials = (name) => {
+    return name
+        .trim()
+        .split(/\s+/)
+        .map((part) => part[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+};
+const Avatar = ({ src, alt = "", name, size = "md", backgroundColor, color, className = "", style, ...props }) => {
+    const [imgError, setImgError] = React.useState(false);
+    const showImage = src && !imgError;
+    const initials = name ? getInitials(name) : null;
+    const classes = [
+        "ui-avatar",
+        `ui-avatar--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const mergedStyle = {
+        ...(backgroundColor && { backgroundColor }),
+        ...(color && { color }),
+        ...style,
+    };
+    return (jsxRuntime.jsx("div", { className: classes, style: mergedStyle, ...props, children: showImage ? (jsxRuntime.jsx("img", { src: src, alt: alt, className: "ui-avatar__img", onError: () => setImgError(true) })) : (jsxRuntime.jsx("span", { className: "ui-avatar__fallback", "aria-hidden": !!alt, children: initials || (alt ? alt[0].toUpperCase() : "?") })) }));
+};
+
+const Card = ({ children, variant = "default", className = "", style, ...props }) => {
+    const classes = [
+        "ui-card",
+        variant === "dark" && "ui-card--dark",
+        variant === "light" && "ui-card--light",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("div", { className: classes, style: style, ...props, children: children }));
+};
+const CardImage = ({ src, alt, className = "", style, ...props }) => {
+    return (jsxRuntime.jsx("div", { className: "ui-card__image-wrapper", children: jsxRuntime.jsx("img", { src: src, alt: alt, className: `ui-card__image ${className}`.trim(), style: style, ...props }) }));
+};
+const CardHeader = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("div", { className: `ui-card__header ${className}`.trim(), style: style, ...props, children: children }));
+const CardBody = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("div", { className: `ui-card__body ${className}`.trim(), style: style, ...props, children: children }));
+const CardFooter = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("div", { className: `ui-card__footer ${className}`.trim(), style: style, ...props, children: children }));
+const CardTitle = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("div", { className: `ui-card__title ${className}`.trim(), style: style, ...props, children: children }));
+const CardSubtitle = ({ children, className = "", style, ...props }) => (jsxRuntime.jsx("div", { className: `ui-card__subtitle ${className}`.trim(), style: style, ...props, children: children }));
+
+const Switch = ({ checked, defaultChecked = false, onChange, disabled = false, size = "md", leftLabel, rightLabel, label, labelPosition = "right", className = "", id, ...props }) => {
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : uncontrolledChecked;
+    const handleChange = (e) => {
+        if (!isControlled)
+            setUncontrolledChecked(e.target.checked);
+        onChange?.(e.target.checked);
+    };
+    const switchId = id || `ui-switch-${React.useId()}`;
+    const classes = [
+        "ui-switch",
+        `ui-switch--${size}`,
+        disabled && "ui-switch--disabled",
+        isChecked && "ui-switch--checked",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const resolvedLeft = leftLabel ?? (label && labelPosition === "left" ? label : undefined);
+    const resolvedRight = rightLabel ?? (label && labelPosition === "right" ? label : undefined);
+    const ariaLabel = [resolvedLeft, resolvedRight].filter(Boolean).join(" ") || undefined;
+    const trackAndThumb = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { type: "checkbox", id: switchId, role: "switch", checked: isChecked, disabled: disabled, onChange: handleChange, className: "ui-switch__input", "aria-checked": isChecked, "aria-label": ariaLabel, ...props }), jsxRuntime.jsx("span", { className: "ui-switch__track", children: jsxRuntime.jsx("span", { className: "ui-switch__thumb" }) })] }));
+    return (jsxRuntime.jsxs("label", { className: classes, htmlFor: switchId, children: [resolvedLeft != null && jsxRuntime.jsx("span", { className: "ui-switch__label", children: resolvedLeft }), trackAndThumb, resolvedRight != null && jsxRuntime.jsx("span", { className: "ui-switch__label", children: resolvedRight })] }));
+};
+
+const getInputType = (mode) => {
+    switch (mode) {
+        case "date":
+            return "date";
+        case "time":
+            return "time";
+        case "datetime":
+            return "datetime-local";
+        default:
+            return "date";
+    }
+};
+const DateTimePicker = ({ mode = "date", size = "md", value, defaultValue, onChange, min, max, disabled = false, className = "", id, ...props }) => {
+    const inputType = getInputType(mode);
+    const inputId = id || `ui-datetime-${React.useId()}`;
+    const classes = [
+        "ui-datetime-picker",
+        `ui-datetime-picker--${mode}`,
+        `ui-datetime-picker--${size}`,
+        disabled && "ui-datetime-picker--disabled",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const handleChange = (e) => {
+        onChange?.(e.target.value);
+    };
+    return (jsxRuntime.jsx("div", { className: classes, children: jsxRuntime.jsx("input", { id: inputId, type: inputType, value: value, defaultValue: defaultValue, onChange: handleChange, min: min, max: max, disabled: disabled, className: "ui-datetime-picker__input", ...props }) }));
+};
+
+const defaultPlaceholder = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "ui-upload__icon", children: "\u2191" }), jsxRuntime.jsx("span", { className: "ui-upload__text", children: "Drag and drop or click to upload" })] }));
+const Upload = ({ onFileSelect, onFilesChange, accept, multiple = false, disabled = false, maxSize, children = defaultPlaceholder, className = "", }) => {
+    const inputRef = React.useRef(null);
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const handleFiles = (files) => {
+        setError(null);
+        if (!files || files.length === 0) {
+            onFilesChange?.(null);
+            return;
+        }
+        const fileArray = Array.from(files);
+        if (maxSize) {
+            const oversized = fileArray.filter((f) => f.size > maxSize);
+            if (oversized.length > 0) {
+                setError(`Some files exceed ${Math.round(maxSize / 1024)}KB`);
+                return;
+            }
+        }
+        onFileSelect?.(fileArray);
+        onFilesChange?.(files);
+    };
+    const handleChange = (e) => {
+        handleFiles(e.target.files);
+        e.target.value = "";
+    };
+    const handleClick = () => {
+        if (!disabled)
+            inputRef.current?.click();
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled)
+            setIsDragOver(true);
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        if (disabled)
+            return;
+        handleFiles(e.dataTransfer.files);
+    };
+    const classes = [
+        "ui-upload",
+        disabled && "ui-upload--disabled",
+        isDragOver && "ui-upload--dragover",
+        error && "ui-upload--error",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsxs("div", { className: classes, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "file", className: "ui-upload__input", accept: accept, multiple: multiple, disabled: disabled, onChange: handleChange, tabIndex: -1, "aria-label": "Upload files" }), jsxRuntime.jsx("div", { className: "ui-upload__content", children: children }), error && jsxRuntime.jsx("div", { className: "ui-upload__error", children: error })] }));
+};
+
+const Skeleton = ({ variant = "text", width, height, className = "", style, ...props }) => {
+    const classes = [
+        "ui-skeleton",
+        `ui-skeleton--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const mergedStyle = {
+        ...(width !== undefined && { width: typeof width === "number" ? `${width}px` : width }),
+        ...(height !== undefined && { height: typeof height === "number" ? `${height}px` : height }),
+        ...style,
+    };
+    return jsxRuntime.jsx("div", { className: classes, style: mergedStyle, "aria-busy": "true", "aria-live": "polite", ...props });
+};
+
+const DrawerCloseButton = ({ onClose, className = "", }) => (jsxRuntime.jsx("button", { type: "button", className: `ui-drawer__close ${className}`, onClick: onClose, "aria-label": "Close drawer", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+const DrawerHeader = ({ children, className = "", }) => jsxRuntime.jsx("div", { className: `ui-drawer__header ${className}`, children: children });
+const DrawerBody = ({ children, className = "", }) => jsxRuntime.jsx("div", { className: `ui-drawer__body ${className}`, children: children });
+const DrawerFooter = ({ children, className = "", }) => jsxRuntime.jsx("div", { className: `ui-drawer__footer ${className}`, children: children });
+const Drawer = ({ isOpen, onClose, children, placement = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, level = 0, className = "", }) => {
+    const drawerRef = React.useRef(null);
+    const zIndex = 1000 + level * 10;
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEsc = (e) => {
+            if (closeOnEsc && e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", handleEsc);
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.removeEventListener("keydown", handleEsc);
+            document.body.style.overflow = "";
+        };
+    }, [isOpen, closeOnEsc, onClose]);
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget)
+            onClose();
+    };
+    const contentClasses = [
+        "ui-drawer__content",
+        `ui-drawer__content--${placement}`,
+        `ui-drawer__content--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsxs("div", { className: "ui-drawer", ref: drawerRef, style: { zIndex }, role: "dialog", "aria-modal": "true", children: [jsxRuntime.jsx("div", { className: "ui-drawer__overlay", onClick: handleOverlayClick, "aria-hidden": "true" }), jsxRuntime.jsx("div", { className: contentClasses, children: children })] }));
+};
+
 const useDisclosure = (defaultIsOpen = false) => {
     const [isOpen, setIsOpen] = React.useState(defaultIsOpen);
     const onOpen = React.useCallback(() => {
@@ -1579,13 +1839,29 @@ exports.Accordion = Accordion;
 exports.AccordionButton = AccordionButton;
 exports.AccordionItem = AccordionItem;
 exports.AccordionPanel = AccordionPanel;
+exports.Alert = Alert;
+exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.Card = Card;
+exports.CardBody = CardBody;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardImage = CardImage;
+exports.CardSubtitle = CardSubtitle;
+exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.CircularProgress = CircularProgress;
 exports.CircularProgressLabel = CircularProgressLabel;
+exports.DateTimePicker = DateTimePicker;
+exports.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerCloseButton = DrawerCloseButton;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
 exports.Flex = Flex;
 exports.FormControl = FormControl;
 exports.FormErrorMessage = FormErrorMessage;
@@ -1611,10 +1887,19 @@ exports.PopoverHeader = PopoverHeader;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;
+exports.Skeleton = Skeleton;
+exports.Switch = Switch;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
 exports.TabPanels = TabPanels;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.Textarea = Textarea;
@@ -1626,6 +1911,7 @@ exports.ToastComponent = Toast;
 exports.ToastContainer = ToastContainer;
 exports.ToastContainerGlobal = ToastContainerGlobal;
 exports.Tooltip = Tooltip;
+exports.Upload = Upload;
 exports.useDisclosure = useDisclosure;
 exports.useOutsideClick = useOutsideClick;
 exports.useTheme = useTheme;