@crestbase/web-shared-ui 1.0.1 → 1.0.2

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;

package/dist/components/core/Upload.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useState } from "react";
+import { useFileUpload } from "../../hooks/useFileUpload";
+import { isVideoFileGeneric } from "../../utils";
+import { useIsMobile } from "../../hooks/useResponsive";
+import TabNavigation from "./TabNavigation";
+import UploadArea from "./UploadArea";
+import PreviewArea from "./PreviewArea";
+const Upload = forwardRef(({ name, required = false, error, disabled = false, className = "", onFileSelect, multiple = true, accept = "image/*,video/*", tabs, existingFiles, ...props }, ref) => {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [activeTab, setActiveTab] = useState(tabs && tabs.length > 0 ? tabs[0].id : "photo1");
+    const fileInputRef = useRef(null);
+    const isMobile = useIsMobile();
+    const { selectedFiles, filePreviewUrls, existingFilesByTab, uploadedFiles, defaultTabs, validationError, addFiles, removeFile, markFilesAsUploaded, getUnuploadedFiles, getFileChanges, } = useFileUpload({
+        existingFiles,
+        uploadedFiles: props.uploadedFiles,
+        onFileSelect,
+        onUploadStatusChange: props.onUploadStatusChange,
+    });
+    const tabsToUse = tabs || defaultTabs;
+    const currentFiles = selectedFiles[activeTab] || [];
+    const currentPreviewUrls = filePreviewUrls[activeTab] || [];
+    const currentExistingFiles = existingFilesByTab[activeTab] || [];
+    const existingUrls = currentExistingFiles.map((file) => file.url);
+    const allPreviewUrls = currentFiles.length > 0 ? currentPreviewUrls : existingUrls;
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (files) {
+            const fileArray = Array.from(files);
+            addFiles(activeTab, fileArray);
+        }
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        setIsDragOver(true);
+    };
+    const handleDragLeave = (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+        const files = event.dataTransfer.files;
+        if (files && files.length > 0) {
+            const fileArray = Array.from(files);
+            addFiles(activeTab, fileArray);
+            if (fileInputRef.current) {
+                fileInputRef.current.files = files;
+            }
+        }
+    };
+    const handleClick = () => {
+        fileInputRef.current?.click();
+    };
+    const handleRemoveFile = (indexToRemove) => {
+        removeFile(activeTab, indexToRemove);
+    };
+    // Expose methods via ref
+    React.useImperativeHandle(ref, () => ({
+        ...fileInputRef.current,
+        markFilesAsUploaded,
+        getUnuploadedFiles,
+        getAllSelectedFiles: () => selectedFiles,
+        getUploadedFiles: () => uploadedFiles,
+        getFileChanges,
+    }));
+    return (_jsxs("div", { className: `w-full text-sm ${className} relative`, children: [_jsx(TabNavigation, { tabs: tabsToUse, activeTab: activeTab, onTabChange: setActiveTab, selectedFiles: selectedFiles, existingFilesByTab: existingFilesByTab }), isMobile ? (
+            // Mobile layout: Show preview full-width if media exists, otherwise show upload area
+            _jsx("div", { className: "w-full", children: allPreviewUrls.length > 0 ? (_jsx("div", { onClick: handleClick, className: "cursor-pointer", children: _jsx(PreviewArea, { allPreviewUrls: allPreviewUrls, currentFiles: currentFiles, currentExistingFiles: currentExistingFiles, currentPreviewUrls: currentPreviewUrls, uploadedFiles: uploadedFiles[activeTab] || [], onRemoveFile: handleRemoveFile, isVideoFile: isVideoFileGeneric }) })) : (_jsx(UploadArea, { isDragOver: isDragOver, error: error, disabled: disabled, currentFiles: currentFiles, activeTabLabel: tabsToUse.find((t) => t.id === activeTab)?.label || "", onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick })) })) : (
+            // Desktop layout: Show both side by side
+            _jsxs("div", { className: "flex gap-6", children: [_jsx(UploadArea, { isDragOver: isDragOver, error: error, disabled: disabled, currentFiles: currentFiles, activeTabLabel: tabsToUse.find((t) => t.id === activeTab)?.label || "", onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick }), _jsx(PreviewArea, { allPreviewUrls: allPreviewUrls, currentFiles: currentFiles, currentExistingFiles: currentExistingFiles, currentPreviewUrls: currentPreviewUrls, uploadedFiles: uploadedFiles[activeTab] || [], onRemoveFile: handleRemoveFile, isVideoFile: isVideoFileGeneric })] })), _jsx("input", { ref: fileInputRef, id: name, name: name, type: "file", required: required, disabled: disabled, multiple: multiple, accept: accept, onChange: handleFileChange, className: "sr-only", ...props }), (error || validationError) && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: error || validationError }))] }));
+});
+Upload.displayName = "Upload";
+export default Upload;

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

@@ -0,0 +1,14 @@
+import React from "react";
+interface UploadAreaProps {
+    isDragOver: boolean;
+    error?: string;
+    disabled?: boolean;
+    currentFiles: File[];
+    activeTabLabel: string;
+    onDragOver: (event: React.DragEvent) => void;
+    onDragLeave: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
+    onClick: () => void;
+}
+declare const UploadArea: React.FC<UploadAreaProps>;
+export default UploadArea;

package/dist/components/core/UploadArea.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import UploadIcon from "../svg/UploadIcon";
+const UploadArea = ({ isDragOver, error, disabled = false, currentFiles, activeTabLabel, onDragOver, onDragLeave, onDrop, onClick, }) => {
+    return (_jsx("div", { className: "flex-1", children: _jsxs("div", { className: `w-full h-25 sm:h-[220px] min-h-[160px] border border-dashed rounded-xl bg-gray-50 flex flex-col items-center justify-center cursor-pointer transition-colors ${isDragOver
+                ? "border-blue-400 bg-blue-50"
+                : error
+                    ? "border-red-500"
+                    : "border-gray-300 hover:border-gray-400 hover:bg-gray-100"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, onClick: onClick, children: [_jsx(UploadIcon, { className: "w-12 h-12 text-gray-400 mb-4" }), _jsx("p", { className: "text-gray-500 text-center mb-2", children: currentFiles.length > 0
+                        ? `${currentFiles.length} file(s) selected for ${activeTabLabel}`
+                        : `Drag and drop files here for ${activeTabLabel}, or click to select` }), _jsx("p", { className: "text-xs text-gray-400 text-center", children: "Supports images and videos" }), currentFiles.length > 0 && (_jsx("div", { className: "mt-4 w-full px-4", children: _jsxs("div", { className: "flex flex-wrap gap-2", children: [currentFiles.slice(0, 3).map((file, index) => (_jsx("span", { className: "px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-md truncate max-w-[120px]", children: file.name }, index))), currentFiles.length > 3 && (_jsxs("span", { className: "px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-md", children: ["+", currentFiles.length - 3, " more"] }))] }) }))] }) }));
+};
+export default UploadArea;

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

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

package/dist/components/core/input.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+const Input = forwardRef(({ label, name, type = "text", placeholder, required = false, error, disabled = false, autoFocus = false, className = "", hideLabel = false, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const isPasswordType = type === "password";
+    const inputType = isPasswordType && showPassword ? "text" : type;
+    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 })), _jsxs("div", { className: "relative", children: [_jsx("input", { ref: ref, id: name, name: name, type: inputType, placeholder: placeholder, required: required, disabled: disabled, autoFocus: autoFocus, autoComplete: "off", className: [
+                            // Base styles (from former cb-input)
+                            "w-full text-base h-13.5 sm:h-auto sm:text-xs p-0 px-3 sm:px-4 sm:p-4",
+                            "border border-gray-200 rounded-xl bg-gray-50",
+                            "focus:border-gray-300 focus:bg-white outline-none",
+                            "placeholder-gray-300 text-black",
+                            // Conditional states
+                            error ? "border-red-500" : "",
+                            isPasswordType ? "pr-12" : "",
+                        ]
+                            .filter(Boolean)
+                            .join(" "), ...props }), isPasswordType && (_jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-black hover:text-black", children: _jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [showPassword ? (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" })) : (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })), !showPassword && (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" }))] }) }))] }), error && _jsx("p", { className: "mt-1 text-xs text-red-500", children: error })] }));
+});
+Input.displayName = "Input";
+// Cast to a function component type to satisfy Next 15 + React 19 JSX typing
+// while preserving the underlying forwardRef behavior at runtime.
+export default Input;

package/dist/components/index.d.ts

@@ -1,2 +1,42 @@
 export { default as Button } from "./button";
-//# sourceMappingURL=index.d.ts.map
+export { default as CircleBtn } from "./button/CircleBtn";
+export { default as ShadowButton } from "./button/ShadowButton";
+export { default as Modal } from "./core/Modal";
+export { default as BottomSheet } from "./core/BottomSheet";
+export { default as Input } from "./core/input";
+export { default as Textarea } from "./core/Textarea";
+export { default as OtpInput } from "./core/OtpInput";
+export { default as NumberInput } from "./core/NumberInput";
+export { default as NumberInputWithCommas } from "./core/NumberInputWithCommas";
+export { default as SelectionList } from "./core/SelectionList";
+export { default as Checkbox } from "./core/Checkbox";
+export { default as SquareCheckbox } from "./core/SquareCheckbox";
+export { default as AddressInput } from "./core/AddressInput";
+export { default as Toggle } from "./core/Toggle";
+export { default as Accordion } from "./core/Accordion";
+export { default as Calendar } from "./core/Calendar";
+export { default as CalendarExtended } from "./core/CalendarExtended";
+export { default as OptionsDropdown } from "./core/OptionsDropdown";
+export { default as CustomDropdown } from "./core/CustomDropdown";
+export { default as Logo } from "./navigation/Logo";
+export { default as Crestbase } from "./svg/Crestbase";
+export { default as CrestbaseColored } from "./svg/CrestbaseColored";
+export { default as GlobalNotificationProvider } from "./notification/GlobalNotificationProvider";
+export { useNotificationStore } from "./notification/notificationStore";
+export { default as Upload } from "./core/Upload";
+export type { UploadProps, UploadRef } from "./core/Upload";
+export type { AccordionProps } from "./core/Accordion";
+export type { ToggleProps } from "./core/Toggle";
+export type { CheckboxProps } from "./core/Checkbox";
+export type { AddressInputProps } from "./core/AddressInput";
+export type { InputProps } from "./core/input";
+export type { TextareaProps } from "./core/Textarea";
+export type { OtpInputProps } from "./core/OtpInput";
+export type { NumberInputProps } from "./core/NumberInput";
+export type { NumberInputWithCommasProps } from "./core/NumberInputWithCommas";
+export type { SelectionOption, SelectionListProps } from "./core/SelectionList";
+export type { OptionsDropdownProps, OptionItem } from "./core/OptionsDropdown";
+export type { CustomDropdownProps, DropdownOption, } from "./core/CustomDropdown";
+export type { LogoProps } from "./navigation/Logo";
+export type { CrestbaseProps } from "./svg/Crestbase";
+export type { CrestbaseColoredProps } from "./svg/CrestbaseColored";

package/dist/components/index.js

@@ -1,3 +1,27 @@
 // Component index file | Barrel file
 export { default as Button } from "./button";
-//# sourceMappingURL=index.js.map
+export { default as CircleBtn } from "./button/CircleBtn";
+export { default as ShadowButton } from "./button/ShadowButton";
+export { default as Modal } from "./core/Modal";
+export { default as BottomSheet } from "./core/BottomSheet";
+export { default as Input } from "./core/input";
+export { default as Textarea } from "./core/Textarea";
+export { default as OtpInput } from "./core/OtpInput";
+export { default as NumberInput } from "./core/NumberInput";
+export { default as NumberInputWithCommas } from "./core/NumberInputWithCommas";
+export { default as SelectionList } from "./core/SelectionList";
+export { default as Checkbox } from "./core/Checkbox";
+export { default as SquareCheckbox } from "./core/SquareCheckbox";
+export { default as AddressInput } from "./core/AddressInput";
+export { default as Toggle } from "./core/Toggle";
+export { default as Accordion } from "./core/Accordion";
+export { default as Calendar } from "./core/Calendar";
+export { default as CalendarExtended } from "./core/CalendarExtended";
+export { default as OptionsDropdown } from "./core/OptionsDropdown";
+export { default as CustomDropdown } from "./core/CustomDropdown";
+export { default as Logo } from "./navigation/Logo";
+export { default as Crestbase } from "./svg/Crestbase";
+export { default as CrestbaseColored } from "./svg/CrestbaseColored";
+export { default as GlobalNotificationProvider } from "./notification/GlobalNotificationProvider";
+export { useNotificationStore } from "./notification/notificationStore";
+export { default as Upload } from "./core/Upload";

package/dist/components/navigation/Logo.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface LogoProps {
+    isCollapsed?: boolean;
+    useWhiteVariant?: boolean;
+}
+declare const _default: (props: LogoProps) => React.JSX.Element;
+export default _default;

package/dist/components/navigation/Logo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CrestbaseColored from "../svg/CrestbaseColored";
+import Crestbase from "../svg/Crestbase";
+const Logo = ({ isCollapsed = false, useWhiteVariant = false, }) => {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [useWhiteVariant ? (_jsx(Crestbase, { className: "w-8 h-8" })) : (_jsx(CrestbaseColored, { className: "w-8 h-8" })), _jsx("span", { className: `text-lg font-bold ${useWhiteVariant ? "text-white" : "text-secondaryblue"} transition-opacity duration-300 ${isCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"}`, children: "crestbase" })] }));
+};
+export default Logo;

package/dist/components/notification/GlobalNotificationProvider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export default function GlobalNotificationProvider({ children, }: Readonly<{
+    children: React.ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/components/notification/GlobalNotificationProvider.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import NotificationPopup from "./NotificationPopup";
+export default function GlobalNotificationProvider({ children, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationPopup, {}), children] }));
+}

package/dist/components/notification/NotificationPopup.d.ts

@@ -0,0 +1 @@
+export default function NotificationPopup(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/notification/NotificationPopup.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AlertCircle, CheckCircle, Info, X } from "lucide-react";
+import { useNotificationStore } from "./notificationStore";
+const getIcon = (type) => {
+    switch (type) {
+        case "success":
+            return _jsx(CheckCircle, { className: "w-5 h-5 text-green-500" });
+        case "error":
+            return _jsx(AlertCircle, { className: "w-5 h-5 text-red-500" });
+        case "info":
+            return _jsx(Info, { className: "w-5 h-5 text-blue-500" });
+        default:
+            return null;
+    }
+};
+const getBackgroundColor = (type) => {
+    switch (type) {
+        case "success":
+            return "bg-green-50 border-green-200";
+        case "error":
+            return "bg-red-50 border-red-200";
+        case "info":
+            return "bg-blue-50 border-blue-200";
+        default:
+            return "bg-gray-50 border-gray-200";
+    }
+};
+export default function NotificationPopup() {
+    const { notifications, removeNotification } = useNotificationStore();
+    useEffect(() => {
+        // Auto-remove after duration (default 5000ms)
+        const timers = notifications.map((n) => setTimeout(() => removeNotification(n.id), n.duration ?? 5000));
+        return () => {
+            for (const t of timers)
+                clearTimeout(t);
+        };
+    }, [notifications, removeNotification]);
+    if (!notifications.length)
+        return null;
+    return (_jsx("div", { className: "fixed top-4 right-4 space-y-2", style: { zIndex: 2147483647 }, children: notifications.map((notification) => (_jsx(NotificationItemView, { notification: notification, onRemove: removeNotification }, notification.id))) }));
+}
+function NotificationItemView({ notification, onRemove, }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isLeaving, setIsLeaving] = useState(false);
+    useEffect(() => {
+        // Trigger entrance animation
+        const enterTimer = setTimeout(() => setIsVisible(true), 10);
+        // Auto-remove after duration
+        const duration = notification.duration ?? 5000;
+        const exitTimer = setTimeout(() => {
+            setIsLeaving(true);
+            setTimeout(() => onRemove(notification.id), 300);
+        }, duration);
+        return () => {
+            clearTimeout(enterTimer);
+            clearTimeout(exitTimer);
+        };
+    }, [notification.id, notification.duration, onRemove]);
+    const handleClose = () => {
+        setIsLeaving(true);
+        setTimeout(() => onRemove(notification.id), 300);
+    };
+    return (_jsx("div", { className: `
+        transform transition-all duration-300 ease-in-out
+        ${isVisible && !isLeaving
+            ? "translate-x-0 opacity-100"
+            : "translate-x-full opacity-0"}
+        ${getBackgroundColor(notification.type)}
+        border rounded-xl shadow-lg p-4 min-w-80 max-w-96
+      `, children: _jsxs("div", { className: "flex items-start space-x-3", children: [getIcon(notification.type), _jsx("div", { className: "flex-1", children: _jsx("p", { className: "text-xs font-medium text-gray-900", children: notification.message }) }), _jsx("button", { onClick: handleClose, className: "flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors", "aria-label": "Close notification", children: _jsx(X, { className: "w-4 h-4" }) })] }) }));
+}

package/dist/components/notification/notificationStore.d.ts

@@ -0,0 +1,15 @@
+export type NotificationType = "success" | "error" | "info";
+export interface NotificationItem {
+    id: string;
+    type: NotificationType;
+    message: string;
+    duration?: number;
+}
+interface NotificationStoreState {
+    notifications: NotificationItem[];
+    addNotification: (item: Omit<NotificationItem, "id">) => string;
+    removeNotification: (id: string) => void;
+    clearAllNotifications: () => void;
+}
+export declare const useNotificationStore: import("zustand").UseBoundStore<import("zustand").StoreApi<NotificationStoreState>>;
+export {};

package/dist/components/notification/notificationStore.js

@@ -0,0 +1,12 @@
+import { create } from "zustand";
+export const useNotificationStore = create((set, get) => ({
+    notifications: [],
+    addNotification: (item) => {
+        const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+        const notif = { id, duration: 3500, ...item };
+        set((state) => ({ notifications: [notif, ...state.notifications] }));
+        return id;
+    },
+    removeNotification: (id) => set((state) => ({ notifications: state.notifications.filter((n) => n.id !== id) })),
+    clearAllNotifications: () => set({ notifications: [] }),
+}));

package/dist/components/svg/Crestbase.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface CrestbaseProps {
+    className?: string;
+}
+declare const _default: (props: CrestbaseProps) => React.JSX.Element;
+export default _default;

package/dist/components/svg/Crestbase.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Crestbase = ({ className }) => {
+    return (_jsxs("svg", { className: className, viewBox: "0 0 30 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M17.8375 8.27314L11.2717 2.24259C10.5066 1.5399 9.33094 1.5399 8.56588 2.24259L2.64711 7.67879C2.23472 8.05756 2 8.59185 2 9.15178V24.2979C2 25.4025 2.89543 26.2979 4 26.2979H16.1161V26.2979C17.0668 26.2979 17.8375 25.5272 17.8375 24.5764V20.9221", stroke: "white", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("path", { d: "M16.5156 1.31641L22.0658 6.41408C22.4782 6.79285 22.7129 7.32714 22.7129 7.88707V26.2981", stroke: "white", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("path", { d: "M22.7109 1.31641L28.2611 6.41408C28.6735 6.79285 28.9082 7.32714 28.9082 7.88707V26.2981", stroke: "white", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("circle", { cx: "17.6004", cy: "14.9148", r: "2.10817", fill: "white" })] }));
+};
+export default Crestbase;

package/dist/components/svg/CrestbaseColored.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface CrestbaseColoredProps {
+    className?: string;
+}
+declare const _default: (props: CrestbaseColoredProps) => React.JSX.Element;
+export default _default;

package/dist/components/svg/CrestbaseColored.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CrestbaseColored = ({ className }) => {
+    return (_jsxs("svg", { className: className, viewBox: "0 0 30 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M17.8375 8.27314L11.2717 2.24259C10.5066 1.5399 9.33094 1.5399 8.56588 2.24259L2.64711 7.67879C2.23472 8.05756 2 8.59185 2 9.15178V24.2979C2 25.4025 2.89543 26.2979 4 26.2979H16.1161V26.2979C17.0668 26.2979 17.8375 25.5272 17.8375 24.5764V20.9221", stroke: "#3D79EF", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("path", { d: "M16.5156 1.31641L22.0658 6.41408C22.4782 6.79285 22.7129 7.32714 22.7129 7.88707V26.2981", stroke: "url(#paint0_linear_4690_24705)", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("path", { d: "M22.7109 1.31641L28.2611 6.41408C28.6735 6.79285 28.9082 7.32714 28.9082 7.88707V26.2981", stroke: "url(#paint1_linear_4690_24705)", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("circle", { cx: "17.6004", cy: "14.9148", r: "2.10817", fill: "#3D79EF" }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_4690_24705", x1: "19.6143", y1: "1.31641", x2: "19.6143", y2: "26.2981", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3D79EF" }), _jsx("stop", { offset: "1", stopColor: "#F1A5C2" })] }), _jsxs("linearGradient", { id: "paint1_linear_4690_24705", x1: "25.8096", y1: "1.31641", x2: "25.8096", y2: "26.2981", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3D79EF" }), _jsx("stop", { offset: "1", stopColor: "#F1A5C2" })] })] })] }));
+};
+export default CrestbaseColored;

package/dist/components/svg/UploadIcon.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface UploadIconProps extends React.SVGProps<SVGSVGElement> {
+}
+declare const UploadIcon: React.FC<UploadIconProps>;
+export default UploadIcon;

package/dist/components/svg/UploadIcon.js

@@ -0,0 +1,4 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const UploadIcon = (props) => (_jsxs("svg", { viewBox: "0 0 51 46", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M44.4387 15.7166V15.2293C44.3336 11.1044 42.5803 7.18813 39.5615 4.33536C36.5428 1.48259 32.5038 -0.0749428 28.3263 0.00277481C25.2151 -0.0222956 22.1628 0.841027 19.5368 2.48886C16.9108 4.13668 14.8229 6.4988 13.5244 9.29097C9.86834 9.69373 6.48915 11.4077 4.02789 14.1078C1.56663 16.8078 0.194521 20.3061 0.171875 23.9389C0.175918 25.8638 0.564094 27.769 1.31421 29.5456C2.06433 31.3223 3.16168 32.9355 4.54352 34.2931C5.92537 35.6506 7.56461 36.7259 9.36753 37.4574C11.1704 38.189 13.1017 38.5624 15.0508 38.5564H20.8328V35.5111H15.0508C12.0706 35.3518 9.26238 34.0828 7.19211 31.9597C5.12184 29.8367 3.94351 27.0176 3.89462 24.0706C3.84573 21.1236 4.92992 18.2679 6.92866 16.079C8.9274 13.8902 11.6921 12.531 14.6654 12.2754H15.6984L16.0531 11.3161C17.0093 8.86331 18.705 6.75953 20.911 5.28906C23.1169 3.81859 25.7268 3.05231 28.388 3.09376C31.7477 3.01581 35.0026 4.25245 37.443 6.53418C39.8835 8.81592 41.3118 11.9578 41.4167 15.275C41.4379 15.6808 41.4379 16.0874 41.4167 16.4931L41.2933 17.5894L42.2956 18.0462C44.2339 18.9086 45.8124 20.404 46.7653 22.2808C47.7183 24.1576 47.9876 26.3013 47.5279 28.3512C47.0683 30.401 45.9077 32.232 44.2415 33.536C42.5753 34.84 40.5051 35.5375 38.3792 35.5111H30.084V38.5564H38.3792C41.1214 38.5758 43.7919 37.6923 45.9688 36.0455C48.1457 34.3987 49.7049 32.0824 50.3999 29.4628C51.0949 26.8431 50.8861 24.0694 49.8066 21.58C48.727 19.0906 46.8383 17.0275 44.4387 15.7166Z", fill: "currentColor", fillOpacity: "0.3" }), _jsx("path", { d: "M28.3359 0.50293C32.3833 0.427725 36.2949 1.93706 39.2178 4.69922C42.0491 7.37485 43.73 11.0151 43.9248 14.8682L43.9385 15.2422V16.0127L44.1992 16.1553C46.5018 17.4133 48.3128 19.3929 49.3477 21.7793C50.3824 24.1656 50.5831 26.8242 49.917 29.335C49.2508 31.8457 47.7554 34.0666 45.667 35.6465C43.5783 37.2265 41.0154 38.0753 38.3828 38.0566H30.584V36.0107H38.3789V36.0098C40.6159 36.0362 42.795 35.303 44.5498 33.9297C46.3061 32.5551 47.5304 30.6242 48.0156 28.4609C48.5008 26.2974 48.2164 24.0349 47.2109 22.0547C46.2061 20.0756 44.5429 18.4997 42.502 17.5908H42.5029L41.8301 17.2842L41.9131 16.5488L41.915 16.5342L41.916 16.5195C41.9326 16.2022 41.937 15.884 41.9287 15.5664L41.916 15.249C41.8043 11.8017 40.3186 8.53847 37.7842 6.16895C35.2475 3.7974 31.8656 2.51278 28.376 2.59375C25.6208 2.55482 22.919 3.3498 20.6338 4.87305C18.3431 6.40002 16.5808 8.58561 15.5869 11.1348L15.584 11.1426L15.3496 11.7754H14.6436L14.6221 11.7773C11.5247 12.0437 8.64355 13.46 6.55957 15.7422C4.47538 18.0247 3.34351 21.0037 3.39453 24.0791C3.4456 27.1543 4.67543 30.0949 6.83398 32.3086C8.99253 34.5221 11.9197 35.8448 15.0244 36.0107H20.333V38.0566H15.0488C13.1647 38.0624 11.2981 37.7011 9.55566 36.9941C7.81306 36.2871 6.22854 35.2481 4.89355 33.9365C3.55868 32.6251 2.49872 31.067 1.77441 29.3516C1.05068 27.6374 0.676376 25.7991 0.671875 23.9424C0.693746 20.4339 2.0189 17.0537 4.39746 14.4443C6.77614 11.835 10.0431 10.1776 13.5791 9.78809L13.8594 9.75684L13.9775 9.50195C15.2351 6.79793 17.2579 4.50901 19.8027 2.91211C22.1886 1.41502 24.9382 0.585527 27.7578 0.507812L28.3223 0.50293H28.3359Z", stroke: "currentColor", strokeOpacity: "0.3" }), _jsx("path", { d: "M32.0542 29.1936C32.3618 29.1984 32.6638 29.1123 32.9214 28.9463C33.179 28.7803 33.3805 28.542 33.4998 28.262C33.6192 27.982 33.651 27.6732 33.5913 27.3752C33.5315 27.0772 33.3828 26.8037 33.1644 26.5898L25.4551 18.9766L17.7458 26.5898C17.4932 26.8811 17.3612 27.2558 17.3761 27.639C17.3911 28.0222 17.552 28.3858 17.8266 28.6569C18.1012 28.9281 18.4693 29.087 18.8574 29.1018C19.2454 29.1166 19.6248 28.9862 19.9198 28.7368L23.9132 24.854V43.5065C23.9132 43.9104 24.0756 44.2977 24.3648 44.5832C24.654 44.8688 25.0461 45.0292 25.4551 45.0292C25.864 45.0292 26.2562 44.8688 26.5453 44.5832C26.8345 44.2977 26.9969 43.9104 26.9969 43.5065V24.854L30.9595 28.7672C31.253 29.0467 31.6466 29.2 32.0542 29.1936Z", fill: "currentColor", fillOpacity: "0.3" }), _jsx("path", { d: "M32.8135 26.9453L32.8145 26.9473C32.9616 27.0913 33.0607 27.2747 33.1006 27.4736C33.1405 27.6724 33.1197 27.8783 33.04 28.0654C32.9602 28.2528 32.8246 28.4141 32.6504 28.5264C32.4763 28.6385 32.2715 28.6966 32.0625 28.6934H32.0459C31.8033 28.6971 31.5691 28.6177 31.3818 28.4717L31.3047 28.4053L27.3486 24.498L26.4971 23.6572V43.5068C26.497 43.7759 26.3889 44.0353 26.1943 44.2275C25.9994 44.42 25.7334 44.5293 25.4551 44.5293C25.1767 44.5293 24.9107 44.42 24.7158 44.2275C24.5213 44.0353 24.4132 43.7759 24.4131 43.5068V23.6709L23.5645 24.4951L19.5859 28.3633C19.3883 28.526 19.1354 28.6124 18.876 28.6025C18.6121 28.5924 18.3627 28.4835 18.1777 28.3008C17.993 28.1182 17.886 27.8745 17.876 27.6191C17.8662 27.3681 17.9501 27.121 18.1143 26.9268L25.4551 19.6787L32.8135 26.9453Z", stroke: "currentColor", strokeOpacity: "0.3" })] }));
+export default UploadIcon;

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./useResponsive";
+export { default as useResponsive } from "./useResponsive";
+export * from "./useFileUpload";
+export * from "./useFileUploadWithNotifications";

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+export * from "./useResponsive";
+export { default as useResponsive } from "./useResponsive";
+export * from "./useFileUpload";
+export * from "./useFileUploadWithNotifications";

package/dist/hooks/useFileUpload.d.ts

@@ -0,0 +1,35 @@
+export interface ExistingFile {
+    name: string;
+    url: string;
+    _id: string;
+    id: string;
+}
+export interface UseFileUploadProps {
+    existingFiles?: ExistingFile[];
+    uploadedFiles?: Record<string, string[]>;
+    onFileSelect?: (files: FileList | null, tabId?: string) => void;
+    onUploadStatusChange?: (tabId: string, uploadedFileNames: string[]) => void;
+    onError?: (message: string) => void;
+}
+export declare const useFileUpload: ({ existingFiles, uploadedFiles: initialUploadedFiles, onFileSelect, onUploadStatusChange, onError, }: UseFileUploadProps) => {
+    selectedFiles: Record<string, File[]>;
+    filePreviewUrls: Record<string, string[]>;
+    existingFilesByTab: Record<string, ExistingFile[]>;
+    uploadedFiles: Record<string, string[]>;
+    defaultTabs: {
+        id: string;
+        label: string;
+    }[];
+    validationError: string | undefined;
+    addFiles: (tabId: string, files: File[]) => void;
+    removeFile: (tabId: string, index: number) => void;
+    markFilesAsUploaded: (tabId: string, fileNames: string[]) => void;
+    getUnuploadedFiles: (tabId: string) => File[];
+    getFileChanges: () => {
+        newFiles: Record<string, File[]>;
+        existingFiles: Record<string, ExistingFile[]>;
+        removedFiles: Record<string, ExistingFile[]>;
+    };
+    clearAllFiles: () => void;
+    updateExistingFiles: (files: ExistingFile[]) => void;
+};