@suryapamenang/ui 0.1.0

package/dist/hooks/use-file-upload.js

@@ -0,0 +1,228 @@
+import { useCallback, useRef, useState, } from "react";
+export const useFileUpload = (options = {}) => {
+    const { maxFiles = Infinity, accept = "*", multiple = false, initialFiles = [], onFilesChange, onFilesAdded, } = options;
+    const [state, setState] = useState({
+        files: initialFiles.map((file) => ({
+            file,
+            id: file.id,
+            preview: file.url,
+        })),
+        isDragging: false,
+        errors: [],
+    });
+    const inputRef = useRef(null);
+    const createPreview = useCallback((file) => {
+        if (file instanceof File) {
+            return URL.createObjectURL(file);
+        }
+        return file.url;
+    }, []);
+    const generateUniqueId = useCallback((file) => {
+        if (file instanceof File) {
+            return `${file.name}-${crypto.randomUUID()}`;
+        }
+        return file.id;
+    }, []);
+    const clearFiles = useCallback(() => {
+        setState((prev) => {
+            // Clean up object URLs
+            prev.files.forEach((file) => {
+                if (file.preview &&
+                    file.file instanceof File &&
+                    file.file.type.startsWith("image/")) {
+                    URL.revokeObjectURL(file.preview);
+                }
+            });
+            if (inputRef.current) {
+                inputRef.current.value = "";
+            }
+            const newState = {
+                ...prev,
+                files: [],
+                errors: [],
+            };
+            onFilesChange?.(newState.files);
+            return newState;
+        });
+    }, [onFilesChange]);
+    const addFiles = useCallback((newFiles) => {
+        if (!newFiles || newFiles.length === 0)
+            return;
+        const newFilesArray = Array.from(newFiles);
+        const errors = [];
+        // Clear existing errors when new files are uploaded
+        setState((prev) => ({ ...prev, errors: [] }));
+        // In single file mode, clear existing files first
+        if (!multiple) {
+            clearFiles();
+        }
+        // Check if adding these files would exceed maxFiles (only in multiple mode)
+        if (multiple &&
+            maxFiles !== Infinity &&
+            state.files.length + newFilesArray.length > maxFiles) {
+            errors.push(`You can only upload a maximum of ${maxFiles} files.`);
+            setState((prev) => ({ ...prev, errors }));
+            return;
+        }
+        const validFiles = [];
+        newFilesArray.forEach((file) => {
+            // Only check for duplicates if multiple files are allowed
+            if (multiple) {
+                const isDuplicate = state.files.some((existingFile) => existingFile.file.name === file.name &&
+                    existingFile.file.size === file.size);
+                // Skip duplicate files silently
+                if (isDuplicate) {
+                    return;
+                }
+            }
+            validFiles.push({
+                file,
+                id: generateUniqueId(file),
+                preview: createPreview(file),
+            });
+        });
+        // Only update state if we have valid files to add
+        if (validFiles.length > 0) {
+            // Call the onFilesAdded callback with the newly added valid files
+            onFilesAdded?.(validFiles);
+            setState((prev) => {
+                const newFiles = !multiple
+                    ? validFiles
+                    : [...prev.files, ...validFiles];
+                onFilesChange?.(newFiles);
+                return {
+                    ...prev,
+                    files: newFiles,
+                    errors,
+                };
+            });
+        }
+        else if (errors.length > 0) {
+            setState((prev) => ({
+                ...prev,
+                errors,
+            }));
+        }
+        // Reset input value after handling files
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+    }, [
+        state.files,
+        maxFiles,
+        multiple,
+        // validateFile,
+        createPreview,
+        generateUniqueId,
+        clearFiles,
+        onFilesChange,
+        onFilesAdded,
+    ]);
+    const removeFile = useCallback((id) => {
+        setState((prev) => {
+            const fileToRemove = prev.files.find((file) => file.id === id);
+            if (fileToRemove?.preview &&
+                fileToRemove.file instanceof File &&
+                fileToRemove.file.type.startsWith("image/")) {
+                URL.revokeObjectURL(fileToRemove.preview);
+            }
+            const newFiles = prev.files.filter((file) => file.id !== id);
+            onFilesChange?.(newFiles);
+            return {
+                ...prev,
+                files: newFiles,
+                errors: [],
+            };
+        });
+    }, [onFilesChange]);
+    const clearErrors = useCallback(() => {
+        setState((prev) => ({
+            ...prev,
+            errors: [],
+        }));
+    }, []);
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setState((prev) => ({ ...prev, isDragging: true }));
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setState((prev) => ({ ...prev, isDragging: false }));
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setState((prev) => ({ ...prev, isDragging: false }));
+        // Don't process files if the input is disabled
+        if (inputRef.current?.disabled) {
+            return;
+        }
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            // In single file mode, only use the first file
+            if (!multiple) {
+                const file = e.dataTransfer.files[0];
+                if (file) {
+                    addFiles([file]);
+                }
+            }
+            else {
+                addFiles(e.dataTransfer.files);
+            }
+        }
+    }, [addFiles, multiple]);
+    const handleFileChange = useCallback((e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            addFiles(e.target.files);
+        }
+    }, [addFiles]);
+    const openFileDialog = useCallback(() => {
+        if (inputRef.current) {
+            inputRef.current.click();
+        }
+    }, []);
+    const getInputProps = useCallback((props = {}) => {
+        return {
+            ...props,
+            type: "file",
+            onChange: handleFileChange,
+            accept: props.accept || accept,
+            multiple: props.multiple !== undefined ? props.multiple : multiple,
+            ref: inputRef,
+        };
+    }, [accept, multiple, handleFileChange]);
+    return [
+        state,
+        {
+            addFiles,
+            removeFile,
+            clearFiles,
+            clearErrors,
+            handleDragEnter,
+            handleDragLeave,
+            handleDragOver,
+            handleDrop,
+            handleFileChange,
+            openFileDialog,
+            getInputProps,
+        },
+    ];
+};
+export const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0)
+        return "0 Bytes";
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+    const value = Number.parseFloat((bytes / k ** i).toFixed(dm));
+    return `${value} ${sizes[i]}`;
+};

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAgB1B"}

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/hooks/use-multi-step-viewer.d.ts

@@ -0,0 +1,30 @@
+import type { LucideIcon } from "lucide-react";
+import type { JSX, ReactNode } from "react";
+export interface Stepfields {
+    fields: string[];
+    component: JSX.Element;
+    title?: string;
+    icon?: LucideIcon;
+}
+export interface UseMultiFormStepsReturn {
+    steps: Stepfields[];
+    currentStepIndex: number;
+    currentStepData: Stepfields;
+    progress: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    goToNext: () => Promise<boolean>;
+    goToPrevious: () => void;
+    goToFirstStep: () => void;
+    goToStep: (stepNumber: number) => void;
+    setSteps: (newSteps: Stepfields[]) => void;
+}
+interface MultiStepFormProviderProps {
+    children: ReactNode;
+    stepsFields: Stepfields[];
+    onStepValidation?: (step: Stepfields) => Promise<boolean> | boolean;
+}
+export declare function MultiStepFormProvider({ children, stepsFields, onStepValidation, }: MultiStepFormProviderProps): JSX.Element;
+export declare function useMultiStepForm(): UseMultiFormStepsReturn;
+export {};
+//# sourceMappingURL=use-multi-step-viewer.d.ts.map

package/dist/hooks/use-multi-step-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-step-viewer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-multi-step-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,UAAU,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IACjC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CAC5C;AAWD,UAAU,0BAA0B;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;CACrE;AAGD,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,WAAW,EACX,gBAAgB,GACjB,EAAE,0BAA0B,eAsE5B;AAGD,wBAAgB,gBAAgB,IAAI,uBAAuB,CAU1D"}

package/dist/hooks/use-multi-step-viewer.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+// Create context
+const MultiStepFormContext = createContext(null);
+// Provider component
+export function MultiStepFormProvider({ children, stepsFields, onStepValidation, }) {
+    const [steps, setStepsState] = useState(stepsFields);
+    const [currentStepIndex, setCurrentStepIndex] = useState(1);
+    const goToNext = async () => {
+        const currentStepData = steps[currentStepIndex - 1];
+        if (onStepValidation) {
+            const isValid = await onStepValidation(currentStepData);
+            if (!isValid)
+                return false;
+        }
+        if (currentStepIndex < steps.length) {
+            setCurrentStepIndex((prev) => prev + 1);
+            return true;
+        }
+        return false;
+    };
+    const goToPrevious = () => {
+        if (currentStepIndex > 1) {
+            setCurrentStepIndex((prev) => prev - 1);
+        }
+    };
+    const goToFirstStep = () => {
+        setCurrentStepIndex(1);
+    };
+    const goToStep = async (stepNumber) => {
+        if (stepNumber < 1 || stepNumber > steps.length)
+            return;
+        if (stepNumber > currentStepIndex && onStepValidation) {
+            for (let i = currentStepIndex; i < stepNumber; i++) {
+                const stepData = steps[i - 1];
+                const isValid = await onStepValidation(stepData);
+                if (!isValid)
+                    return;
+            }
+        }
+        setCurrentStepIndex(stepNumber);
+    };
+    const setSteps = (newSteps) => {
+        setStepsState(newSteps);
+        // Reset to first step if current step is out of bounds
+        if (currentStepIndex > newSteps.length) {
+            setCurrentStepIndex(1);
+        }
+    };
+    const value = {
+        steps,
+        currentStepIndex: currentStepIndex,
+        currentStepData: steps[currentStepIndex - 1],
+        progress: (currentStepIndex / steps.length) * 100,
+        isFirstStep: currentStepIndex === 1,
+        isLastStep: currentStepIndex === steps.length,
+        goToNext,
+        goToPrevious,
+        goToFirstStep,
+        goToStep,
+        setSteps,
+    };
+    return (_jsx(MultiStepFormContext.Provider, { value: value, children: children }));
+}
+// Hook to consume context
+export function useMultiStepForm() {
+    const context = useContext(MultiStepFormContext);
+    if (!context) {
+        throw new Error("useMultiStepForm must be used within a MultiStepFormProvider");
+    }
+    return context;
+}