@m5kdev/web-ui 0.1.2 → 0.1.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> @m5kdev/web-ui@0.1.1 build /Users/michalkow/Projects/m5kdev/packages/web-ui
+> @m5kdev/web-ui@0.1.3 build /Users/michalkow/Projects/m5kdev/packages/web-ui
 > tsc --build
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @m5kdev/web-ui
 
+## 0.1.4
+
+### Patch Changes
+
+- build added
+
+## 0.1.3
+
+### Patch Changes
+
+- build js
+
 ## 0.1.2
 
 ### Patch Changes

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

@@ -0,0 +1,3 @@
+import type { MotionNodeOptions } from "framer-motion";
+export declare const cardMotion: Partial<MotionNodeOptions>;
+//# sourceMappingURL=card.motion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.motion.d.ts","sourceRoot":"","sources":["../../../src/animations/card.motion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,iBAAiB,CAMjD,CAAC"}

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,8 @@
+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 {};
+//# sourceMappingURL=AvatarUpload.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarUpload.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarUpload.tsx"],"names":[],"mappings":"AASA,UAAU,iBAAiB;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAqHhG"}

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,6 @@
+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;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,WAAW,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAElG,MAAM,WAAW,WAAY,SAAQ,oBAAoB;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAOlE"}

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,36 @@
+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 {};
+//# sourceMappingURL=Calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,KAAK,aAAa,EAAkB,MAAM,oBAAoB,CAAC;AAEjG,OAAO,sDAAsD,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AAKxB,KAAK,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;AACnE,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,SAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;CAAE,GAC9E,OAAO,CAAC,CAAC,EAAE,SAAS,CAAC,GACrB,KAAK,CAAC;AAEV,UAAU,wBAAyB,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC;IACzE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACzE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACjG,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACjF,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAMD,eAAO,MAAM,QAAQ,GAAI,OAAO,wBAAwB,4CAEvD,CAAC"}

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,24 @@
+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 };
+//# sourceMappingURL=CardsSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardsSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CardsSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iBAAiB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,yFA2HhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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,10 @@
+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;
+//# sourceMappingURL=CollapsibleSidebarMenuItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleSidebarMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsibleSidebarMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,gBAAgB,2CA+BnB"}

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,5 @@
+import { type InputProps } from "@heroui/react";
+export declare function ColorPicker({ disableAlpha, value, onValueChange, ...props }: InputProps & {
+    disableAlpha?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAIhB,MAAM,eAAe,CAAC;AAcvB,wBAAgB,WAAW,CAAC,EAC1B,YAAmB,EACnB,KAAK,EAEL,aAAa,EACb,GAAG,KAAK,EACT,EAAE,UAAU,GAAG;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,2CA4BzC"}

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,7 @@
+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;
+//# sourceMappingURL=CopyButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/components/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAMzD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,mBAA0B,EAC1B,UAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,2CAgCnF"}

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,11 @@
+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 {};
+//# sourceMappingURL=CropDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CropDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CropDialog.tsx"],"names":[],"mappings":"AAeA,UAAU,eAAe;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA4CD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,SAAiB,GAClB,EAAE,eAAe,2CAgFjB"}

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,16 @@
+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;
+//# sourceMappingURL=DialogProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogProvider.d.ts","sourceRoot":"","sources":["../../../src/components/DialogProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,eAAe,CAAC;AAIvB,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAMF,wBAAgB,SAAS,aAJoB,WAAW,KAAK,IAAI,CAUhE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAqEzE"}

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,5 @@
+export declare function ErrorFallback({ error, componentStack, }: {
+    error: unknown;
+    componentStack: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ErrorFallback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorFallback.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;CACxB,2CAUA"}

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,7 @@
+interface FileDropzoneProps {
+    onUploadComplete?: (filePath: string) => void;
+    className?: string;
+}
+export declare function FileDropzone({ onUploadComplete, className }: FileDropzoneProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FileDropzone.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../src/components/FileDropzone.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CA2G9E"}