@crestbase/web-shared-ui 1.0.1 → 1.0.3

package/dist/components/core/Checkbox.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Checkbox = ({ checked, onChange, label, name, required = false, disabled = false, error, className = "", }) => {
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsx("div", { className: "relative", children: _jsxs("div", { className: "w-full p-0 px-3 h-13.5 sm:h-auto sm:p-3 border border-gray-200 rounded-xl bg-gray-50 focus-within:border-gray-300 focus-within:bg-white flex items-center justify-between", children: [_jsx("span", { className: "text-base sm:text-xs text-gray-400", children: checked ? "Yes" : "No" }), _jsxs("label", { className: "relative cursor-pointer", children: [_jsx("input", { id: name, name: name, type: "checkbox", required: required, disabled: disabled, checked: checked, onChange: onChange, className: "sr-only", autoComplete: "off" }), _jsx("div", { className: [
+                                        "w-6 h-6 rounded-lg border flex items-center justify-center transition-colors",
+                                        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+                                        checked ? "bg-black border-black" : "bg-white border-gray-300",
+                                    ].join(" "), children: checked && (_jsx("svg", { className: "w-3.5 h-3.5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 6L9 17l-5-5" }) })) })] })] }) }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error })] }));
+};
+export default Checkbox;

package/dist/components/core/CustomDropdown.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface DropdownOption {
+    value: string;
+    label?: string;
+}
+export interface CustomDropdownProps {
+    label?: string;
+    placeholder?: string;
+    options: DropdownOption[];
+    value?: string;
+    onChange: (value: string) => void;
+    error?: string;
+    className?: string;
+    labelClass?: string;
+    minimal?: boolean;
+    disabled?: boolean;
+}
+declare const _default: (props: CustomDropdownProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/CustomDropdown.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDownIcon, X } from "lucide-react";
+const CustomDropdown = ({ label, placeholder = "Select an option", options, value, onChange, error, className = "", labelClass = "", minimal, disabled = false, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const selectedOption = options.find((option) => option.value === value);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    const handleOptionClick = (optionValue) => {
+        if (disabled)
+            return;
+        onChange(optionValue);
+        setIsOpen(false);
+    };
+    const handleClear = (e) => {
+        if (disabled)
+            return;
+        e.stopPropagation();
+        onChange("");
+        setIsOpen(false);
+    };
+    return (_jsxs("div", { className: `w-full ${minimal ? "text-[11px]" : "text-base sm:text-xs"}`, ref: dropdownRef, children: [label && (_jsx("label", { className: `${labelClass} block mb-2 text-[10px] text-gray-500`, children: label })), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `${minimal
+                            ? "flex gap-1 items-center"
+                            : "w-full p-0 px-4 sm:p-4 rounded-xl bg-gray-50 border outline-none text-left flex items-center justify-between h-13.5 sm:h-auto"} ${error ? "border-red-500" : "border-gray-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`, children: [_jsx("span", { className: `${selectedOption ? "text-gray-900" : "text-gray-400"}`, children: selectedOption ? selectedOption.label : placeholder }), !disabled && (_jsx(ChevronDownIcon, { className: `w-4 h-4 text-gray-800 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }))] }), isOpen && !disabled && (_jsx("div", { className: "absolute z-50 min-w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-y-auto", children: options.map((option) => (_jsxs("div", { className: `flex items-center justify-between hover:bg-gray-50 transition-colors ${value === option.value
+                                ? "bg-blue-50 text-blue-600"
+                                : "text-gray-900"} first:rounded-t-xl last:rounded-b-xl`, children: [_jsx("button", { type: "button", onClick: () => handleOptionClick(option.value), className: "flex-1 text-left text-nowrap px-4 py-3", children: option.label }), value === option.value && (_jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 hover:bg-gray-100 rounded-full transition-colors ml-2", children: _jsx(X, { className: "w-3 h-3 text-gray-400 hover:text-gray-600" }) }))] }, option.value))) }))] }), error && _jsx("p", { className: "mt-1 text-red-500", children: error })] }));
+};
+CustomDropdown.displayName = "CustomDropdown";
+export default CustomDropdown;

package/dist/components/core/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    allowBackdropClose?: boolean;
+    blurClass?: string;
+    containerClassName?: string;
+    className?: string;
+}
+declare const _default: (props: ModalProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/Modal.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Modal = ({ isOpen, onClose, children, allowBackdropClose = true, blurClass = "backdrop-blur-xs", containerClassName = "z-50 mx-auto w-full flex justify-center items-start text-black", className = "py-12", }) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: `fixed inset-0 z-[80] flex items-start justify-center ${className}`, children: [_jsx("button", { className: `absolute inset-0 bg-black/70 ${blurClass}`, onClick: allowBackdropClose ? onClose : undefined }), _jsx("div", { role: "dialog", className: containerClassName, onClick: (e) => {
+                    if (e.target === e.currentTarget && allowBackdropClose) {
+                        onClose();
+                    }
+                }, children: children })] }));
+};
+export default Modal;

package/dist/components/core/NumberInput.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "type"> {
+    label?: string;
+    error?: string;
+    className?: string;
+    onIncrement?: () => void;
+    onDecrement?: () => void;
+}
+declare const _default: (props: NumberInputProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/core/NumberInput.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+const NumberInput = forwardRef(({ label, name, placeholder, required = false, error, disabled = false, autoFocus = false, className = "", value, onChange, onIncrement, onDecrement, ...props }, ref) => {
+    const handleIncrement = () => {
+        if (onIncrement) {
+            onIncrement();
+        }
+        else if (onChange) {
+            const currentValue = Number(value) || 0;
+            const event = {
+                target: { value: String(currentValue + 1) },
+            };
+            onChange(event);
+        }
+    };
+    const handleDecrement = () => {
+        if (onDecrement) {
+            onDecrement();
+        }
+        else if (onChange) {
+            const currentValue = Number(value) || 0;
+            const newValue = Math.max(0, currentValue - 1);
+            const event = {
+                target: { value: String(newValue) },
+            };
+            onChange(event);
+        }
+    };
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", { ref: ref, id: name, name: name, type: "number", placeholder: placeholder, required: required, disabled: disabled, autoFocus: autoFocus, value: value, onChange: onChange, autoComplete: "off", className: `w-full text-base sm:text-xs h-13.5 sm:h-auto p-0 px-4 sm:p-4 border border-gray-200 rounded-xl bg-gray-50 focus:border-gray-300 focus:bg-white outline-none pr-12 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${error ? "border-red-500" : "border-gray-200"} text-black`, ...props }), _jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex flex-col", children: [_jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled, className: "text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed p-0.5", children: _jsx(ChevronUpIcon, { className: "w-3 h-3" }) }), _jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled, className: "text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed p-0.5", children: _jsx(ChevronDownIcon, { className: "w-3 h-3" }) })] })] }), error && _jsx("p", { className: "mt-1 text-xs text-red-500", children: error })] }));
+});
+NumberInput.displayName = "NumberInput";
+export default NumberInput;

package/dist/components/core/NumberInputWithCommas.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { InputProps } from "./input";
+export interface NumberInputWithCommasProps extends Omit<InputProps, "type" | "onChange"> {
+    onChange: (value: string) => void;
+    value?: string;
+}
+declare const _default: (props: NumberInputWithCommasProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/core/NumberInputWithCommas.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { formatNumberWithCommas, getCleanNumber } from "../../utils";
+const NumberInputWithCommas = forwardRef(({ label, name, placeholder, required = false, error, disabled = false, autoFocus = false, className = "", hideLabel = false, value = "", onChange, ...props }, ref) => {
+    const [displayValue, setDisplayValue] = useState(formatNumberWithCommas(value));
+    const handleInputChange = (e) => {
+        const inputValue = e.target.value;
+        const formatted = formatNumberWithCommas(inputValue);
+        setDisplayValue(formatted);
+        onChange(getCleanNumber(formatted));
+    };
+    useEffect(() => {
+        setDisplayValue(formatNumberWithCommas(value));
+    }, [value]);
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && !hideLabel && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsx("div", { className: "relative", children: _jsxs("div", { className: "relative flex items-center", children: [_jsx("span", { className: "absolute left-5 mt-0.5/2 sm:left-4 top-1/2 transform -translate-y-1/2 text-xs text-gray-600 pointer-events-none", children: "\u20A6" }), _jsx("input", { ref: ref, id: name, name: name, type: "text", inputMode: "numeric", placeholder: placeholder, required: required, disabled: disabled, autoFocus: autoFocus, value: displayValue, onChange: handleInputChange, autoComplete: "off", className: `w-full text-base sm:text-xs h-13.5 sm:-h-auto p-0 px-4 sm:p-4 pl-8 sm:pl-7 border border-gray-200 rounded-xl bg-gray-50 focus:border-gray-300 focus:bg-white outline-none placeholder-gray-400 ${error ? "border-red-500" : "border-gray-200"} text-black`, ...props })] }) }), error && _jsx("p", { className: "mt-1 text-xs text-red-500", children: error })] }));
+});
+NumberInputWithCommas.displayName = "NumberInputWithCommas";
+export default NumberInputWithCommas;

package/dist/components/core/OptionsDropdown.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactNode } from "react";
+export type DropdownRenderHelpers = {
+    /** Close the dropdown programmatically */
+    close: () => void;
+};
+export interface OptionItem {
+    id: string;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    /** Optional icon node shown before the label */
+    icon?: ReactNode;
+}
+export interface OptionsDropdownProps {
+    /**
+     * Array of options to render as the dropdown menu. When `dropdownContent` is provided,
+     * this array is optional and ignored. Kept for backward compatibility.
+     */
+    options?: OptionItem[];
+    trigger?: ReactNode;
+    listClassName?: string;
+    optionClassName?: string;
+    containerClassName?: string;
+    disabled?: boolean;
+    /**
+     * Custom content to render inside the dropdown. Accepts either a React node
+     * or a render function. When a function is provided, it will receive a
+     * helpers object with a `close()` method that can be used to close the
+     * dropdown programmatically (e.g., from an internal button).
+     * Backward compatible with previous ReactNode usage.
+     */
+    dropdownContent?: ReactNode | ((helpers: DropdownRenderHelpers) => ReactNode);
+}
+declare const _default: (props: OptionsDropdownProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/OptionsDropdown.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreVertical } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+const OptionsDropdown = ({ options = [], trigger, listClassName = "", optionClassName = "", containerClassName = "", disabled = false, dropdownContent, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleOptionClick = (option) => {
+        if (!option.disabled) {
+            option.onClick();
+            setIsOpen(false);
+        }
+    };
+    const defaultTrigger = (_jsx("button", { className: "p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer", onClick: handleToggle, disabled: disabled, type: "button", children: _jsx(MoreVertical, { className: "size-5" }) }));
+    return (_jsxs("div", { className: `relative inline-flex items-center ${containerClassName}`, ref: dropdownRef, children: [_jsx("div", { onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleToggle();
+                }, className: "cursor-pointer", children: trigger || defaultTrigger }), isOpen && (_jsx("div", { className: `${listClassName} absolute right-0 top-full mt-2 bg-white border border-gray-100 rounded-xl divide-y divide-gray-100 shadow-lg z-50 min-w-48 overflow-hidden flex flex-col`, children: dropdownContent ? (_jsx("div", { onClick: (e) => {
+                        // allow interactive content without closing automatically
+                        e.stopPropagation();
+                    }, children: typeof dropdownContent === "function"
+                        ? dropdownContent({ close: () => setIsOpen(false) })
+                        : dropdownContent })) : (options.map((option) => (_jsxs("button", { onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleOptionClick(option);
+                    }, disabled: option.disabled, className: `w-full text-left px-3 py-2.5 cursor-pointer text-xs text-gray-500 hover:text-black hover:bg-gray-100 transition-colors duration-200 flex items-center gap-3 ${optionClassName}`, children: [option.icon ? (_jsx("span", { className: "inline-flex items-center", children: option.icon })) : null, _jsx("span", { children: option.label })] }, option.id)))) }))] }));
+};
+export default OptionsDropdown;

package/dist/components/core/OtpInput.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface OtpInputProps {
+    length?: number;
+    onOtpChange: (otp: string) => void;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare const _default: (props: OtpInputProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/OtpInput.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+const OtpInput = ({ length = 6, onOtpChange, label = "Enter OTP", size = "md" }) => {
+    const [otp, setOtp] = useState(new Array(length).fill(""));
+    const inputRefs = useRef(new Array(length).fill(null));
+    const getSizeClasses = (s) => {
+        switch (s) {
+            case "sm":
+                return "size-10 md:size-12 sm:text-lg";
+            case "md":
+                return "size-14 md:size-16 sm:text-xl";
+            case "lg":
+                return "size-16 md:size-20 sm:text-2xl";
+            default:
+                return "size-14 md:size-16 sm:text-xl";
+        }
+    };
+    const handleOtpChange = (index, value) => {
+        if (value.length <= 1 && /^\d*$/.test(value)) {
+            const newOtp = [...otp];
+            newOtp[index] = value;
+            setOtp(newOtp);
+            onOtpChange(newOtp.join(""));
+            if (value && index < length - 1) {
+                inputRefs.current[index + 1]?.focus();
+            }
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        if (e.key === "Backspace" && !otp[index] && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData("text");
+        const pastedOtp = pastedData.replace(/\D/g, "").slice(0, length);
+        if (pastedOtp.length > 0) {
+            const newOtp = new Array(length).fill("");
+            for (let i = 0; i < pastedOtp.length && i < length; i++) {
+                newOtp[i] = pastedOtp[i];
+            }
+            setOtp(newOtp);
+            onOtpChange(newOtp.join(""));
+            const nextEmptyIndex = Math.min(pastedOtp.length, length - 1);
+            inputRefs.current[nextEmptyIndex]?.focus();
+        }
+    };
+    return (_jsxs("div", { children: [_jsx("label", { className: "block mb-1 font-medium text-xs text-gray-500", children: label }), _jsx("div", { className: "flex gap-2 md:gap-4 mb-4", children: otp.map((digit, index) => (_jsx("input", { ref: (el) => {
+                        inputRefs.current[index] = el;
+                    }, id: `otp-${index}`, type: "text", inputMode: "numeric", pattern: "[0-9]*", value: digit, onChange: (e) => handleOtpChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, className: `${getSizeClasses(size)} text-center font-semibold border border-gray-300 rounded-xl focus:border-primaryblue focus:outline-none bg-gray-50 text-base text-black`, maxLength: 1, autoComplete: "off" }, index))) })] }));
+};
+export default OtpInput;

package/dist/components/core/PreviewArea.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface ExistingFile {
+    name: string;
+    url: string;
+    _id: string;
+    id: string;
+}
+interface PreviewAreaProps {
+    allPreviewUrls: string[];
+    currentFiles: File[];
+    currentExistingFiles: ExistingFile[];
+    currentPreviewUrls: string[];
+    uploadedFiles: string[];
+    onRemoveFile: (index: number) => void;
+    isVideoFile: (file: ExistingFile | File) => boolean;
+}
+declare const PreviewArea: React.FC<PreviewAreaProps>;
+export default PreviewArea;

package/dist/components/core/PreviewArea.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PreviewArea = ({ allPreviewUrls, currentFiles, currentExistingFiles, currentPreviewUrls, uploadedFiles, onRemoveFile, isVideoFile, }) => {
+    if (allPreviewUrls.length === 0)
+        return null;
+    const renderSinglePreview = () => {
+        const isNewFile = currentFiles.length > 0;
+        const file = isNewFile ? currentFiles[0] : currentExistingFiles[0];
+        const isVideo = isVideoFile(file);
+        const url = isNewFile ? currentPreviewUrls[0] : allPreviewUrls[0];
+        return (_jsxs("div", { className: "w-full h-full relative group", children: [isVideo ? (_jsx("video", { src: url, className: "w-full h-full object-cover", controls: true, muted: true })) : (_jsx("img", { src: url, alt: isNewFile ? "Preview" : "File preview", className: "w-full h-full object-cover" })), _jsx("button", { type: "button", onClick: (e) => {
+                        e.stopPropagation();
+                        onRemoveFile(0);
+                    }, className: "absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold transition-colors opacity-0 hover:opacity-100 group-hover:opacity-100", children: "\u00D7" }), isVideo && (_jsx("div", { className: "absolute top-2 left-2 text-white text-xs bg-black bg-opacity-50 px-2 py-1 rounded", children: "Video" }))] }));
+    };
+    const renderGridPreview = () => {
+        return (_jsx("div", { className: "p-4 h-full", children: _jsx("div", { className: "grid grid-cols-2 gap-3 h-full overflow-y-auto", children: allPreviewUrls.map((url, index) => {
+                    const isNewFile = currentFiles.length > 0;
+                    const file = isNewFile ? currentFiles[index] : currentExistingFiles[index];
+                    const isVideo = isVideoFile(file);
+                    const fileName = isNewFile ? file?.name || "" : file.name;
+                    const isUploaded = isNewFile && uploadedFiles?.includes(fileName);
+                    return (_jsxs("div", { className: "relative group", children: [isVideo ? (_jsx("video", { src: url, className: "w-full h-20 object-cover rounded-lg border border-gray-200", controls: true, muted: true })) : (_jsx("img", { src: url, alt: `Preview ${index + 1}`, className: "w-full h-20 object-cover rounded-lg border border-gray-200" })), isUploaded && (_jsx("div", { className: "absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded", children: "Uploaded" })), _jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onRemoveFile(index);
+                                }, className: "absolute top-1 right-1 bg-red-500 hover:bg-red-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold transition-colors opacity-0 group-hover:opacity-100", children: "\u00D7" }), _jsx("div", { className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all rounded-lg flex items-center justify-center", children: isVideo && (_jsx("div", { className: "text-white text-xs bg-black bg-opacity-50 px-2 py-1 rounded", children: "Video" })) })] }, index));
+                }) }) }));
+    };
+    return (_jsx("div", { className: "flex-1", children: _jsx("div", { className: "h-25  sm:h-[220px] min-h-[160px] border border-gray-200 rounded-xl bg-white overflow-hidden", children: allPreviewUrls.length === 1 ? renderSinglePreview() : renderGridPreview() }) }));
+};
+export default PreviewArea;

package/dist/components/core/SelectionList.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface SelectionOption {
+    id: string;
+    title: string;
+    subtitle?: string;
+    icon?: React.ReactNode;
+}
+export interface SelectionListProps {
+    label?: string;
+    options: SelectionOption[];
+    selectedValue: string;
+    onSelectionChange: (value: string) => void;
+    className?: string;
+}
+declare const _default: (props: SelectionListProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/SelectionList.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RadioIcon = ({ selected }) => (_jsx("span", { className: `ml-4 size-4 flex rounded-full border-1 p-[2.5px] ${selected ? "border-blue-500" : "border-gray-300 bg-gray-50"}`, children: selected ? (_jsx("span", { className: "block size-full rounded-full bg-blue-500" })) : null }));
+const SelectionList = ({ label, options, selectedValue, onSelectionChange, className = "", }) => {
+    return (_jsx("div", { className: `space-y-6 ${className}`, children: _jsxs("div", { className: "", children: [label && (_jsx("div", { className: "p-2 pt-0 rounded-full text-xs text-gray-500", children: _jsx("div", { children: label }) })), _jsx("div", { className: "space-y-3", children: options.map((option) => (_jsxs("label", { className: `relative flex items-center p-4 border rounded-xl cursor-pointer transition-colors ${selectedValue === option.id
+                            ? "border-blue-500 bg-blue-50"
+                            : "border-gray-200 bg-gray-50 hover:bg-gray-100"}`, onClick: () => onSelectionChange(option.id), children: [_jsx("input", { type: "radio", value: option.id, checked: selectedValue === option.id, onChange: () => onSelectionChange(option.id), className: "absolute opacity-0 w-full h-full cursor-pointer" }), _jsxs("div", { className: "flex items-center gap-3 flex-1", children: [option.icon && (_jsx("span", { className: "inline-block p-2 bg-blue-100 rounded-full", children: option.icon })), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "font-semibold text-sm text-gray-900", children: option.title }), option.subtitle && (_jsx("p", { className: "text-[11px] text-gray-500", children: option.subtitle }))] }), _jsx(RadioIcon, { selected: selectedValue === option.id })] })] }, option.id))) })] }) }));
+};
+export default SelectionList;

package/dist/components/core/SquareCheckbox.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface SquareCheckboxProps {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const _default: (props: SquareCheckboxProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/SquareCheckbox.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SquareCheckbox = ({ label, checked, onChange, disabled = false, className, }) => {
+    return (_jsx("div", { className: `inline-flex items-center gap-2 select-none ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className ?? ""}`, children: _jsxs("label", { className: "relative inline-flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), className: "sr-only", autoComplete: "off" }), _jsx("div", { className: `w-10 h-10 rounded-lg border flex items-center justify-center transition-colors ${checked ? "bg-black border-black" : "bg-gray-50 border-gray-300"}`, children: checked && (_jsx("svg", { className: "w-4.5 h-4.5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 6L9 17l-5-5" }) })) }), _jsx("span", { className: "text-xs text-gray-700", children: label })] }) }));
+};
+export default SquareCheckbox;

package/dist/components/core/TabNavigation.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+interface Tab {
+    id: string;
+    label: string;
+}
+interface TabNavigationProps {
+    tabs: Tab[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+    selectedFiles: Record<string, File[]>;
+    existingFilesByTab: Record<string, {
+        name: string;
+        url: string;
+        _id: string;
+        id: string;
+    }[]>;
+}
+declare const TabNavigation: React.FC<TabNavigationProps>;
+export default TabNavigation;

package/dist/components/core/TabNavigation.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabNavigation = ({ tabs, activeTab, onTabChange, selectedFiles, existingFilesByTab, }) => {
+    return (_jsx("div", { className: "flex gap-4 mb-4 overflow-x-auto scrollbar-hide pb-2", children: tabs.map((tab) => (_jsxs("button", { type: "button", onClick: () => onTabChange(tab.id), className: `px-3 py-1 text-[11px] rounded-lg transition-colors cursor-pointer flex items-center flex-shrink-0 whitespace-nowrap ${activeTab === tab.id
+                ? "bg-blue-600 text-white"
+                : "bg-blue-50 text-blue-600 hover:bg-blue-200"} ${(selectedFiles[tab.id]?.length > 0 || existingFilesByTab[tab.id]?.length > 0) &&
+                activeTab === tab.id
+                ? "ring-2 ring-blue-300"
+                : ""}`, children: [tab.label, (selectedFiles[tab.id]?.length > 0 || existingFilesByTab[tab.id]?.length > 0) && (_jsx("span", { className: `ml-2 text-xs ${activeTab === tab.id ? "bg-white" : "bg-primaryblue"} size-1.5 rounded-full inline-block` }))] }, tab.id))) }));
+};
+export default TabNavigation;

package/dist/components/core/Textarea.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className"> {
+    label?: string;
+    error?: string;
+    className?: string;
+}
+declare const _default: (props: TextareaProps & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/core/Textarea.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Textarea = forwardRef(({ label, name, placeholder, required = false, error, disabled = false, className = "", rows = 4, ...props }, ref) => {
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsx("div", { className: "relative", children: _jsx("textarea", { ref: ref, id: name, name: name, placeholder: placeholder, required: required, disabled: disabled, rows: rows, autoComplete: "off", className: `w-full h-25 sm:h-auto text-base sm:text-xs p-3 sm:p-4 border border-gray-200 rounded-xl bg-gray-50 focus:border-gray-300 focus:bg-white outline-none placeholder-gray-400 resize-vertical min-h-[160px] ${error ? "border-red-500" : "border-gray-200"} text-black`, ...props }) }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error })] }));
+});
+Textarea.displayName = "Textarea";
+export default Textarea;

package/dist/components/core/Toggle.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const _default: (props: ToggleProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/Toggle.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Toggle = ({ checked, onChange, label, disabled = false, className = "", }) => {
+    const handleClick = () => {
+        if (disabled)
+            return;
+        onChange(!checked);
+    };
+    return (_jsxs("div", { className: `flex items-center gap-3 ${className}`, children: [_jsx("button", { type: "button", role: "switch", "aria-checked": checked, onClick: handleClick, disabled: disabled, className: `relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none border border-gray-200 ${checked ? "bg-primaryblue" : "bg-gray-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${checked ? "translate-x-4" : "translate-x-1"}` }) }), label && _jsx("span", { className: "text-xs text-black", children: label })] }));
+};
+export default Toggle;

package/dist/components/core/Upload.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { type ExistingFile } from "../../hooks/useFileUpload";
+export interface UploadRef extends HTMLInputElement {
+    markFilesAsUploaded: (tabId: string, fileNames: string[]) => void;
+    getUnuploadedFiles: (tabId: string) => File[];
+    getAllSelectedFiles: () => Record<string, File[]>;
+    getUploadedFiles: () => Record<string, string[]>;
+    getFileChanges: () => {
+        newFiles: Record<string, File[]>;
+        existingFiles: Record<string, ExistingFile[]>;
+        removedFiles: Record<string, ExistingFile[]>;
+    };
+}
+export interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "type"> {
+    label?: string;
+    error?: string;
+    className?: string;
+    onFileSelect?: (files: FileList | null, tabId?: string) => void;
+    tabs?: {
+        id: string;
+        label: string;
+    }[];
+    uploadedFiles?: Record<string, string[]>;
+    onUploadStatusChange?: (tabId: string, uploadedFileNames: string[]) => void;
+    existingFiles?: ExistingFile[];
+}
+declare const _default: (props: UploadProps) => React.JSX.Element;
+export default _default;