@m5kdev/web-ui 0.1.3 → 0.1.5

package/dist/src/animations/card.motion.d.ts

@@ -0,0 +1,2 @@
+import type { MotionNodeOptions } from "framer-motion";
+export declare const cardMotion: Partial<MotionNodeOptions>;

package/dist/src/animations/card.motion.js

@@ -0,0 +1,7 @@
+export const cardMotion = {
+    layout: true,
+    initial: { opacity: 0, scale: 0.98 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.98, transition: { duration: 0.12 } },
+    transition: { type: "spring", stiffness: 160, damping: 28 },
+};

package/dist/src/components/AvatarUpload.d.ts

@@ -0,0 +1,7 @@
+interface AvatarUploadProps {
+    currentAvatarUrl?: string | null;
+    onUploadComplete?: (avatarUrl: string) => void;
+    className?: string;
+}
+export declare function AvatarUpload({ currentAvatarUrl, onUploadComplete, className }: AvatarUploadProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/AvatarUpload.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFileUpload } from "@m5kdev/frontend/modules/file/hooks/useUpload";
+import { Edit2, User } from "lucide-react";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CropDialog } from "#components/CropDialog";
+import { Avatar, AvatarFallback, AvatarImage } from "#components/ui/avatar";
+import { Progress } from "#components/ui/progress";
+import { cn } from "#utils";
+export function AvatarUpload({ currentAvatarUrl, onUploadComplete, className }) {
+    const { t } = useTranslation();
+    const [isHovered, setIsHovered] = useState(false);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [previewUrl, setPreviewUrl] = useState(currentAvatarUrl || null);
+    const [showCropDialog, setShowCropDialog] = useState(false);
+    const fileInputRef = useRef(null);
+    const { upload, status, progress, errorMessage, reset } = useFileUpload();
+    const handleFileSelect = (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            // Validate file type
+            if (!["image/jpeg", "image/png", "image/webp", "image/jpg"].includes(file.type)) {
+                alert(t("web-ui:upload.errors.invalidType"));
+                return;
+            }
+            // Validate file size (5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                alert(t("web-ui:upload.errors.tooLarge"));
+                return;
+            }
+            setSelectedFile(file);
+            const objectUrl = URL.createObjectURL(file);
+            setPreviewUrl(objectUrl);
+            setShowCropDialog(true);
+        }
+    };
+    const handleCropComplete = async (croppedBlob) => {
+        const croppedFile = new File([croppedBlob], selectedFile?.name || "cropped-image.jpg", {
+            type: "image/jpeg",
+        });
+        setSelectedFile(croppedFile);
+        const croppedObjectUrl = URL.createObjectURL(croppedFile);
+        setPreviewUrl(croppedObjectUrl);
+        setShowCropDialog(false);
+        try {
+            const res = await upload("image", croppedFile);
+            console.log({ res });
+            onUploadComplete?.(res.url);
+        }
+        catch (error) {
+            console.error("Error uploading image:", error);
+        }
+    };
+    const removeFile = () => {
+        if (previewUrl && previewUrl !== currentAvatarUrl) {
+            URL.revokeObjectURL(previewUrl);
+        }
+        setSelectedFile(null);
+        setPreviewUrl(currentAvatarUrl || null);
+        setShowCropDialog(false);
+        reset();
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { role: "dialog", className: cn("relative inline-block", className), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs(Avatar, { className: "h-24 w-24 cursor-pointer", onClick: () => fileInputRef.current?.click(), children: [previewUrl ? (_jsx(AvatarImage, { src: previewUrl, alt: t("web-ui:avatar.preview.alt") })) : (_jsx(AvatarFallback, { children: _jsx(User, { className: "h-12 w-12" }) })), isHovered && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 rounded-full", children: _jsx(Edit2, { className: "h-6 w-6 text-white" }) }))] }), _jsx("input", { ref: fileInputRef, type: "file", className: "hidden", accept: "image/jpeg,image/png,image/webp", onChange: handleFileSelect }), status === "uploading" && (_jsx("div", { className: "mt-2 w-full", children: _jsx(Progress, { value: progress, className: "h-2" }) })), status === "error" && _jsx("p", { className: "mt-2 text-sm text-red-500", children: errorMessage })] }), previewUrl && (_jsx(CropDialog, { open: showCropDialog, onOpenChange: setShowCropDialog, imageUrl: previewUrl, onCropComplete: handleCropComplete, onCancel: removeFile, isLoading: status === "uploading" }))] }));
+}

package/dist/src/components/Button.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps as ButtonPrimitiveProps } from "./ui/button";
+export interface ButtonProps extends ButtonPrimitiveProps {
+    loading?: boolean;
+}
+export declare function Button({ loading, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Button.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "./ui/button";
+export function Button({ loading, children, ...props }) {
+    return (_jsxs(ButtonPrimitive, { ...props, disabled: loading || props.disabled, children: [loading && _jsx("i", { className: "ti ti-refresh animate-spin" }), children] }));
+}

package/dist/src/components/Calendar.d.ts

@@ -0,0 +1,35 @@
+import type React from "react";
+import { type CalendarProps } from "react-big-calendar";
+import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
+import "./Calendar.css";
+type CalendarComponents = NonNullable<CalendarProps["components"]>;
+export type CalendarEventRenderer = CalendarComponents extends {
+    event?: infer T;
+} ? Exclude<T, undefined> : never;
+interface DragAndDropCalendarProps extends Omit<CalendarProps, "localizer"> {
+    onEventDrop?: (args: {
+        event: unknown;
+        start: Date;
+        end: Date;
+    }) => void;
+    onEventResize?: (args: {
+        event: unknown;
+        start: Date;
+        end: Date;
+    }) => void;
+    onDragStart?: (args: {
+        event: unknown;
+        action: "move" | "resize";
+        direction?: unknown;
+    }) => void;
+    dragFromOutsideItem?: () => unknown;
+    onDropFromOutside?: (args: {
+        start: Date;
+        end: Date;
+        allDay?: boolean;
+    }) => void;
+    onDragOverFromOutside?: (event: React.DragEvent) => void;
+    resizable?: boolean;
+}
+export declare const Calendar: (props: DragAndDropCalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Calendar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { Calendar as BigCalendar, dayjsLocalizer } from "react-big-calendar";
+import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
+import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
+import "./Calendar.css";
+const DnDCalendar = withDragAndDrop(BigCalendar);
+const localizer = dayjsLocalizer(dayjs);
+const TypedDnDCalendar = DnDCalendar;
+export const Calendar = (props) => (_jsx(TypedDnDCalendar, { ...props, localizer: localizer }));

package/dist/src/components/CardsSelect.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface CardSelectItem {
+    id: string;
+    title: string;
+    description?: string;
+    content?: React.ReactNode;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    onEdit?: (id: string) => void;
+}
+export interface CardsSelectProps {
+    items: CardSelectItem[];
+    selectedIds: string[];
+    onSelectionChange: (selectedIds: string[]) => void;
+    maxSelections?: number;
+    className?: string;
+    cardClassName?: string;
+    showCheckbox?: boolean;
+    disabled?: boolean;
+    reversed?: boolean;
+}
+declare const CardsSelect: React.ForwardRefExoticComponent<CardsSelectProps & React.RefAttributes<HTMLDivElement>>;
+export { CardsSelect };

package/dist/src/components/CardsSelect.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Edit } from "lucide-react";
+import * as React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "#components/ui/card";
+import { cn } from "#utils";
+const CardsSelect = React.forwardRef(({ items, selectedIds, onSelectionChange, maxSelections, className, cardClassName, showCheckbox = true, disabled = false, reversed = false, ...props }, ref) => {
+    const handleCardClick = (itemId) => {
+        if (disabled)
+            return;
+        const item = items.find((item) => item.id === itemId);
+        if (item?.disabled)
+            return;
+        const isSelected = selectedIds.includes(itemId);
+        if (isSelected) {
+            // Remove from selection
+            onSelectionChange(selectedIds.filter((id) => id !== itemId));
+        }
+        else {
+            // Add to selection
+            if (maxSelections && selectedIds.length >= maxSelections) {
+                // If max selections reached, replace the first selection
+                onSelectionChange([...selectedIds.slice(1), itemId]);
+            }
+            else {
+                onSelectionChange([...selectedIds, itemId]);
+            }
+        }
+    };
+    const getGridClasses = () => {
+        return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 justify-items-center";
+    };
+    return (_jsx("div", { ref: ref, className: cn(getGridClasses(), className), ...props, children: items.map((item) => {
+            const isSelected = reversed
+                ? !selectedIds.includes(item.id)
+                : selectedIds.includes(item.id);
+            const isDisabled = disabled || item.disabled;
+            return (_jsxs(Card, { className: cn("relative cursor-pointer transition-all duration-200 hover:shadow-md w-full", isSelected && "ring-2 ring-primary bg-primary/5 border-primary", isDisabled && "opacity-50 cursor-not-allowed", !isDisabled && "hover:bg-accent/50", cardClassName), onClick: () => handleCardClick(item.id), children: [item.onEdit && (_jsx("div", { className: "absolute top-3 left-3 z-10", children: _jsx("button", { type: "button", className: cn("flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-accent", "text-muted-foreground hover:text-foreground"), onClick: (e) => {
+                                e.stopPropagation();
+                                item.onEdit?.(item.id);
+                            }, "aria-label": "Edit", children: _jsx(Edit, { className: "h-3.5 w-3.5" }) }) })), showCheckbox && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx("div", { className: cn("flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors", isSelected
+                                ? "bg-primary border-primary text-primary-foreground"
+                                : "border-muted-foreground/30 bg-background"), children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }) })), item.icon && (_jsx("div", { className: "flex items-center justify-center pt-6 pb-4", children: _jsx("div", { className: "text-5xl text-primary", children: _jsx("i", { className: `ti ${item.icon}` }) }) })), _jsxs(CardHeader, { className: cn("pb-3 text-center", item.icon && "pt-2"), children: [_jsx(CardTitle, { className: "text-lg leading-tight", children: item.title }), item.description && (_jsx(CardDescription, { className: "text-sm", children: item.description }))] }), item.content && (_jsx(CardContent, { className: "pt-0 text-center", children: item.content }))] }, item.id));
+        }) }));
+});
+CardsSelect.displayName = "CardsSelect";
+export { CardsSelect };

package/dist/src/components/CollapsibleSidebarMenuItem.d.ts

@@ -0,0 +1,9 @@
+import type { CollapsibleProps } from "@radix-ui/react-collapsible";
+import type { ReactNode } from "react";
+export declare function CollapsibleSidebarMenuItem({ children, label, icon, link, badge, ...props }: {
+    children: ReactNode;
+    label: string;
+    icon: ReactNode;
+    link: string;
+    badge?: ReactNode;
+} & CollapsibleProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CollapsibleSidebarMenuItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#components/ui/collapsible";
+import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, useSidebar, } from "#components/ui/sidebar";
+export function CollapsibleSidebarMenuItem({ children, label, icon, link, badge, ...props }) {
+    const { open } = useSidebar();
+    if (!open)
+        return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: label, children: _jsxs(Link, { to: link, children: [icon, _jsx("span", { children: label })] }) }) }));
+    return (_jsx(Collapsible, { asChild: true, className: "group/collapsible", ...props, children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { children: [icon, badge ? badge : _jsx("span", { children: label }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: children }) })] }) }));
+}

package/dist/src/components/ColorPicker.d.ts

@@ -0,0 +1,4 @@
+import { type InputProps } from "@heroui/react";
+export declare function ColorPicker({ disableAlpha, value, onValueChange, ...props }: InputProps & {
+    disableAlpha?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ColorPicker.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from "@heroui/react";
+import { hexToHsva } from "@uiw/color-convert";
+import Colorful from "@uiw/react-color-colorful";
+import { PipetteIcon } from "lucide-react";
+import { useState } from "react";
+function safeHexToHsva(hex) {
+    try {
+        return hexToHsva(hex);
+    }
+    catch (err) {
+        return { h: 0, s: 0, v: 0, a: 1 };
+    }
+}
+export function ColorPicker({ disableAlpha = true, value, onValueChange, ...props }) {
+    const [hsva, setHsva] = useState(safeHexToHsva(value || ""));
+    return (_jsx(Input, { onValueChange: onValueChange, value: value, endContent: _jsxs(Popover, { placement: "bottom", children: [_jsx(PopoverTrigger, { children: _jsx(Button, { isIconOnly: true, "aria-label": "Pick color", size: "sm", variant: "light", children: _jsx(PipetteIcon, { className: "h-4 w-4 text-foreground" }) }) }), _jsx(PopoverContent, { "aria-label": "Color picker", children: _jsx(Colorful, { color: hsva, disableAlpha: disableAlpha, onChange: (color) => {
+                            setHsva(color.hsva);
+                            onValueChange?.(color.hex);
+                        } }) })] }), ...props }));
+}

package/dist/src/components/CopyButton.d.ts

@@ -0,0 +1,6 @@
+import { type ButtonProps } from "@heroui/react";
+export declare function CopyButton({ text, notificationTimeout, isIconOnly, onCopy, ...props }: ButtonProps & {
+    text: string;
+    notificationTimeout?: number;
+    onCopy?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CopyButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@heroui/react";
+import { CheckCircle, Copy } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+export function CopyButton({ text, notificationTimeout = 1000, isIconOnly, onCopy, ...props }) {
+    const { t } = useTranslation();
+    const [isCopied, setIsCopied] = useState(false);
+    const handleCopy = async (text) => {
+        try {
+            await window.navigator.clipboard.writeText(text);
+            setIsCopied(true);
+            onCopy?.();
+            toast.success(t("web-ui:common.copySuccess"));
+            setTimeout(() => setIsCopied(false), notificationTimeout);
+        }
+        catch (error) {
+            toast.error(t("web-ui:common.copyError"));
+            console.error(error);
+        }
+    };
+    return (_jsx(Button, { isIconOnly: isIconOnly, onPress: () => handleCopy(text), ...props, children: isCopied ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle, { className: "h-4 w-4" }), !isIconOnly && t("web-ui:common.copied")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "h-4 w-4" }), !isIconOnly && t("web-ui:common.copy")] })) }));
+}

package/dist/src/components/CropDialog.d.ts

@@ -0,0 +1,10 @@
+interface CropDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    imageUrl: string;
+    onCropComplete: (croppedBlob: Blob) => void;
+    onCancel: () => void;
+    isLoading?: boolean;
+}
+export declare function CropDialog({ open, onOpenChange, imageUrl, onCropComplete, onCancel, isLoading, }: CropDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/CropDialog.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ZoomIn, ZoomOut } from "lucide-react";
+import { useState } from "react";
+import Cropper, {} from "react-easy-crop";
+import { useTranslation } from "react-i18next";
+import { Button } from "#components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "#components/ui/dialog";
+import { Slider } from "#components/ui/slider";
+async function getCroppedImg(imageSrc, pixelCrop, t) {
+    const image = new Image();
+    image.src = imageSrc;
+    // Create canvas
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        throw new Error(t("web-ui:image.crop.failedContext"));
+    }
+    // Set canvas size to the crop size
+    canvas.width = pixelCrop.width;
+    canvas.height = pixelCrop.height;
+    // Draw the cropped image
+    ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+    // Get the cropped image as blob
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (!blob)
+                reject(new Error(t("web-ui:image.crop.failedCrop")));
+            else
+                resolve(blob);
+        }, "image/jpeg");
+    });
+}
+export function CropDialog({ open, onOpenChange, imageUrl, onCropComplete, onCancel, isLoading = false, }) {
+    const { t } = useTranslation();
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+    const handleCropComplete = (_croppedArea, croppedAreaPixels) => {
+        setCroppedAreaPixels(croppedAreaPixels);
+    };
+    const handleSave = async () => {
+        if (!croppedAreaPixels)
+            return;
+        try {
+            const croppedImageBlob = await getCroppedImg(imageUrl, croppedAreaPixels, t);
+            onCropComplete(croppedImageBlob);
+        }
+        catch (error) {
+            console.error(t("web-ui:image.crop.error"), error);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[600px]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t("web-ui:image.crop.title") }) }), _jsx("div", { className: "relative h-[400px] w-full", children: _jsx(Cropper, { image: imageUrl, crop: crop, zoom: zoom, aspect: 1, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: handleCropComplete, objectFit: "contain", showGrid: true, style: {
+                            containerStyle: {
+                                position: "relative",
+                                width: "100%",
+                                height: "100%",
+                                backgroundColor: "#262626",
+                            },
+                            cropAreaStyle: {
+                                border: "2px solid #fff",
+                                color: "rgba(255, 255, 255, 0.9)",
+                            },
+                            mediaStyle: {
+                                backgroundColor: "#262626",
+                            },
+                        } }) }), _jsxs("div", { className: "flex items-center gap-4 px-1", children: [_jsx(ZoomOut, { className: "h-4 w-4" }), _jsx(Slider, { value: [zoom], onValueChange: (values) => setZoom(values[0]), min: 1, max: 3, step: 0.1, className: "flex-1" }), _jsx(ZoomIn, { className: "h-4 w-4" })] }), _jsxs("div", { className: "mt-4 flex justify-end space-x-2", children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: t("web-ui:common.cancel") }), _jsx(Button, { onClick: handleSave, disabled: isLoading, children: isLoading ? t("web-ui:common.saving") : t("web-ui:common.save") })] })] }) }));
+}

package/dist/src/components/DialogProvider.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonProps } from "@heroui/react";
+export type DialogProps = {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    color?: ButtonProps["color"];
+    cancelable?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    cancelLabel?: string;
+    confirmLabel?: string;
+};
+export declare function useDialog(): (dialog: DialogProps) => void;
+export declare function DialogProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DialogProvider.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, } from "@heroui/react";
+import { semanticColors } from "@heroui/theme";
+import { createContext, useContext, useRef, useState } from "react";
+const DialogContext = createContext(() => {
+    console.warn("DialogProvider is not initialized");
+});
+export function useDialog() {
+    const context = useContext(DialogContext);
+    if (!context) {
+        throw new Error("useDialog must be used within a DialogProvider");
+    }
+    return context;
+}
+export function DialogProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [dialog, setDialog] = useState(null);
+    const timeoutRef = useRef(null);
+    const handleSetDialog = (dialog) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setDialog(dialog);
+        setIsOpen(true);
+    };
+    const handleUnsetDialog = () => {
+        setIsOpen(false);
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        timeoutRef.current = setTimeout(() => {
+            setDialog(null);
+        }, 500);
+    };
+    const handleCancel = () => {
+        dialog?.onCancel?.();
+        handleUnsetDialog();
+    };
+    const handleConfirm = () => {
+        dialog?.onConfirm?.();
+        handleUnsetDialog();
+    };
+    return (_jsx(DialogContext.Provider, { value: handleSetDialog, children: _jsxs(_Fragment, { children: [children, dialog && (_jsx(Modal, { isOpen: isOpen, onOpenChange: handleUnsetDialog, style: {
+                        borderColor: semanticColors.light[dialog.color || "danger"][600],
+                    }, classNames: {
+                        base: "border-1",
+                    }, children: _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: dialog.title }), _jsx(ModalBody, { children: dialog.description }), _jsx(ModalFooter, { children: _jsxs("div", { className: "flex flex-row gap-2", children: [(dialog.cancelable || dialog.onCancel) && (_jsx(Button, { onPress: handleCancel, children: dialog.cancelLabel ?? "Cancel" })), _jsx(Button, { color: dialog.color, onPress: handleConfirm, children: dialog.confirmLabel ?? "Confirm" })] }) })] }) }))] }) }));
+}

package/dist/src/components/ErrorFallback.d.ts

@@ -0,0 +1,4 @@
+export declare function ErrorFallback({ error, componentStack, }: {
+    error: unknown;
+    componentStack: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ErrorFallback.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ErrorFallback({ error, componentStack, }) {
+    const errorMessage = error instanceof Error ? error.message : "Unknown error";
+    return (_jsxs("div", { className: "flex flex-grow-1 flex-col items-center justify-center h-[100vh]", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Something went wrong." }), _jsx("h1", { className: "text-2xl text-gray-700 font-bold mb-5", children: "Please try again later." }), _jsx("div", { className: "text-lg text-gray-700 mb-5", children: errorMessage }), _jsx("div", { className: "text-sm text-gray-500 px-10", children: componentStack })] }));
+}

package/dist/src/components/FileDropzone.d.ts

@@ -0,0 +1,6 @@
+interface FileDropzoneProps {
+    onUploadComplete?: (filePath: string) => void;
+    className?: string;
+}
+export declare function FileDropzone({ onUploadComplete, className }: FileDropzoneProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/FileDropzone.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { File, Upload, X } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Button } from "#components/ui/button";
+import { Progress } from "#components/ui/progress";
+import { cn } from "#utils";
+export function FileDropzone({ onUploadComplete, className }) {
+    const [uploadProgress, setUploadProgress] = useState(0);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const onDrop = useCallback((acceptedFiles) => {
+        if (acceptedFiles.length > 0) {
+            setSelectedFile(acceptedFiles[0]);
+        }
+    }, []);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: {
+            "image/jpeg": [],
+            "image/png": [],
+            "image/webp": [],
+            "image/jpg": [],
+        },
+        maxFiles: 1,
+    });
+    const uploadFile = async () => {
+        if (!selectedFile)
+            return;
+        setIsUploading(true);
+        setUploadProgress(0);
+        const formData = new FormData();
+        formData.append("file", selectedFile);
+        try {
+            const response = await fetch("/api/upload/image", {
+                method: "POST",
+                body: formData,
+                // Note: Content-Type is automatically set for FormData
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            onUploadComplete?.(data.filePath);
+            setSelectedFile(null);
+            setUploadProgress(0);
+        }
+        catch (error) {
+            console.error("Upload error:", error);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    const removeFile = () => {
+        setSelectedFile(null);
+        setUploadProgress(0);
+    };
+    return (_jsxs("div", { className: cn("w-full max-w-xl", className), children: [_jsxs("div", { ...getRootProps(), className: cn("border-2 border-dashed rounded-lg p-6 cursor-pointer transition-colors", isDragActive ? "border-primary bg-primary/5" : "border-gray-300 hover:border-primary", selectedFile && "border-primary"), children: [_jsx("input", { ...getInputProps() }), _jsx("div", { className: "flex flex-col items-center justify-center space-y-2 text-center", children: selectedFile ? (_jsxs(_Fragment, { children: [_jsx(File, { className: "h-8 w-8 text-primary" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600", children: selectedFile.name }), _jsx("button", { type: "button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                removeFile();
+                                            }, className: "p-1 hover:bg-gray-100 rounded-full", children: _jsx(X, { className: "h-4 w-4 text-gray-500" }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Upload, { className: "h-8 w-8 text-gray-400" }), _jsx("p", { className: "text-sm text-gray-600", children: "Drag & drop an image here, or click to select" }), _jsx("p", { className: "text-xs text-gray-500", children: "Supports JPG, PNG, and WebP" })] })) })] }), selectedFile && (_jsxs("div", { className: "mt-4 space-y-4", children: [isUploading && _jsx(Progress, { value: uploadProgress, className: "h-2 w-full" }), _jsx(Button, { onClick: uploadFile, disabled: isUploading, className: "w-full", children: isUploading ? "Uploading..." : "Upload File" })] }))] }));
+}

package/dist/src/components/MultiSelectDropdown.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+interface MultiSelectOption {
+    label: string;
+    icon?: React.ReactNode;
+    value: string;
+    group?: string;
+}
+interface MultiSelectDropdownProps {
+    options: MultiSelectOption[];
+    selectedValues: string[];
+    onValueChange: (selectedValues: string[]) => void;
+    placeholder?: React.ReactNode;
+    label?: string;
+    className?: string;
+    triggerClassName?: string;
+    disabled?: boolean;
+    maxDisplayCount?: number;
+    multiSelectLabel?: string;
+    trigger?: React.ReactNode;
+    resetButton?: "bottom" | "top";
+    resetLabel?: React.ReactNode;
+    separateGroups?: boolean;
+}
+declare const MultiSelectDropdown: React.ForwardRefExoticComponent<MultiSelectDropdownProps & React.RefAttributes<HTMLButtonElement>>;
+export { MultiSelectDropdown };
+export type { MultiSelectOption, MultiSelectDropdownProps };

package/dist/src/components/MultiSelectDropdown.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, RotateCcw } from "lucide-react";
+import * as React from "react";
+import { Button } from "#components/ui/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "#components/ui/dropdown-menu";
+import { cn } from "#utils";
+const MultiSelectDropdown = React.forwardRef(({ options, selectedValues, onValueChange, placeholder = "Select items...", label, className, triggerClassName, trigger, multiSelectLabel, disabled = false, maxDisplayCount = 3, resetButton = "bottom", resetLabel = "Reset", separateGroups = false, ...props }, ref) => {
+    const handleValueChange = (value, checked) => {
+        if (checked) {
+            onValueChange([...selectedValues, value]);
+        }
+        else {
+            onValueChange(selectedValues.filter((v) => v !== value));
+        }
+    };
+    const handleReset = () => {
+        onValueChange([]);
+    };
+    const getDisplayText = () => {
+        if (selectedValues.length === 0) {
+            return placeholder;
+        }
+        const selectedLabels = options
+            .filter((option) => selectedValues.includes(option.value))
+            .map((option) => option.label);
+        if (multiSelectLabel && selectedLabels.length > 1) {
+            return multiSelectLabel;
+        }
+        if (selectedLabels.length <= maxDisplayCount) {
+            return selectedLabels.join(", ");
+        }
+        return `${selectedLabels.slice(0, maxDisplayCount).join(", ")} (+${selectedLabels.length - maxDisplayCount} more)`;
+    };
+    const groupedOptions = React.useMemo(() => {
+        const groups = {};
+        const ungrouped = [];
+        options.forEach((option) => {
+            if (option.group) {
+                if (!groups[option.group]) {
+                    groups[option.group] = [];
+                }
+                groups[option.group].push(option);
+            }
+            else {
+                ungrouped.push(option);
+            }
+        });
+        return { groups, ungrouped };
+    }, [options]);
+    return (_jsx("div", { className: cn("w-full", className), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { ref: ref, variant: "outline", className: cn("w-full justify-between text-left font-normal", selectedValues.length === 0 && "text-muted-foreground", triggerClassName), disabled: disabled, ...props, children: trigger || (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate", children: getDisplayText() }), _jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] })) }) }), _jsxs(DropdownMenuContent, { className: "w-full min-w-[var(--radix-dropdown-menu-trigger-width)]", align: "start", children: [resetButton && resetButton === "top" && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItem, { onClick: handleReset, disabled: selectedValues.length === 0, onSelect: (event) => event.preventDefault(), className: "cursor-pointer text-muted-foreground hover:text-foreground", children: resetLabel || (_jsxs(_Fragment, { children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Reset"] })) }), _jsx(DropdownMenuSeparator, {})] })), label && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { children: label }), _jsx(DropdownMenuSeparator, {})] })), Object.entries(groupedOptions.groups).map(([groupName, groupOptions], groupIndex) => (_jsxs(DropdownMenuGroup, { children: [groupIndex > 0 && separateGroups && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-xs font-semibold text-muted-foreground px-2 py-1.5", children: groupName }), groupOptions.map((option) => (_jsxs(DropdownMenuCheckboxItem, { checked: selectedValues.includes(option.value), onCheckedChange: (checked) => handleValueChange(option.value, checked), onSelect: (event) => event.preventDefault(), className: "cursor-pointer", children: [option.icon && _jsx("span", { className: "mr-2", children: option.icon }), option.label] }, option.value)))] }, groupName))), groupedOptions.ungrouped.length > 0 && (_jsxs(DropdownMenuGroup, { children: [Object.keys(groupedOptions.groups).length > 0 && _jsx(DropdownMenuSeparator, {}), groupedOptions.ungrouped.map((option) => (_jsx(DropdownMenuCheckboxItem, { checked: selectedValues.includes(option.value), onCheckedChange: (checked) => handleValueChange(option.value, checked), onSelect: (event) => event.preventDefault(), className: "cursor-pointer", children: option.label }, option.value)))] })), resetButton && resetButton === "bottom" && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onClick: handleReset, disabled: selectedValues.length === 0, onSelect: (event) => event.preventDefault(), className: "cursor-pointer text-muted-foreground hover:text-foreground", children: resetLabel || (_jsxs(_Fragment, { children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Reset"] })) })] }))] })] }) }));
+});
+MultiSelectDropdown.displayName = "MultiSelectDropdown";
+export { MultiSelectDropdown };

package/dist/src/components/Orb.d.ts

@@ -0,0 +1,6 @@
+export default function Orb({ hue, hoverIntensity, rotateOnHover, forceHoverState, }: {
+    hue?: number | undefined;
+    hoverIntensity?: number | undefined;
+    rotateOnHover?: boolean | undefined;
+    forceHoverState?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;