@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/components/ui/FilterSection.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * Props for FilterSection component
+ */
+interface FilterSectionProps {
+    /** Title of the filter section */
+    title: string;
+    /** Whether the section is expanded or collapsed */
+    expanded: boolean;
+    /** Function to toggle expand/collapse state */
+    toggleExpand: () => void;
+    /** Child elements to render inside the section when expanded */
+    children: React.ReactNode;
+}
+/**
+ * FilterSection component for creating expandable/collapsible sections in a filter sidebar
+ *
+ * @example
+ * ```tsx
+ * <FilterSection
+ *   title="Category"
+ *   expanded={expandedSections.categories}
+ *   toggleExpand={() => toggleSection("categories")}
+ * >
+ *   <FilterList ... />
+ * </FilterSection>
+ * ```
+ */
+declare const FilterSection: React.FC<FilterSectionProps>;
+export default FilterSection;
+export type { FilterSectionProps };

package/lib/components/ui/FilterSection.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
+/**
+ * FilterSection component for creating expandable/collapsible sections in a filter sidebar
+ *
+ * @example
+ * ```tsx
+ * <FilterSection
+ *   title="Category"
+ *   expanded={expandedSections.categories}
+ *   toggleExpand={() => toggleSection("categories")}
+ * >
+ *   <FilterList ... />
+ * </FilterSection>
+ * ```
+ */
+const FilterSection = ({ title, expanded, toggleExpand, children }) => {
+    return (_jsxs("div", { className: "border-b border-gray-200 py-4", children: [_jsxs("button", { className: "flex w-full items-center justify-between text-lg font-medium hover:text-primary-700", onClick: toggleExpand, "aria-expanded": expanded, "aria-controls": `filter-section-${title.toLowerCase().replace(/\s+/g, '-')}`, children: [title, expanded ? _jsx(RiArrowUpSLine, { size: 20, "aria-hidden": "true" }) : _jsx(RiArrowDownSLine, { size: 20, "aria-hidden": "true" })] }), expanded && (_jsx("div", { className: "mt-3", id: `filter-section-${title.toLowerCase().replace(/\s+/g, '-')}`, children: children }))] }));
+};
+export default FilterSection;

package/lib/components/ui/FilterWrapper.d.ts

@@ -0,0 +1,6 @@
+interface FilterWrapperProps {
+    isNarrow: boolean;
+    children: React.ReactNode;
+}
+declare const FilterWrapper: ({ isNarrow, children }: FilterWrapperProps) => JSX.Element;
+export default FilterWrapper;

package/lib/components/ui/FilterWrapper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const FilterWrapper = ({ isNarrow, children }) => {
+    return (_jsx("div", { className: "bg-gray-50 shadow-xl rounded-lg p-4 mb-2", children: _jsx("div", { className: isNarrow
+                ? 'flex flex-col w-full space-y-4'
+                : 'flex flex-row justify-between items-start w-full space-y-0 space-x-0 sm:space-x-4', children: children }) }));
+};
+export default FilterWrapper;

package/lib/components/ui/Form.d.ts

@@ -0,0 +1,23 @@
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+import * as React from 'react';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/lib/components/ui/Form.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { Controller, FormProvider, useFormContext, } from 'react-hook-form';
+import * as React from 'react';
+import { cn } from '../../helpers';
+import { Label } from '../ui';
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+    const value = React.useMemo(() => ({ name: props.name }), [props.name]);
+    return (_jsx(FormFieldContext.Provider, { value: value, children: _jsx(Controller, { ...props }) }));
+};
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState, formState } = useFormContext();
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>');
+    }
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+const FormItemContext = React.createContext({});
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+    const id = React.useId();
+    const value = React.useMemo(() => ({ id }), [id]);
+    return (_jsx(FormItemContext.Provider, { value: value, children: _jsx("div", { ref: ref, className: cn('space-y-2', className), ...props }) }));
+});
+FormItem.displayName = 'FormItem';
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    return _jsx(Label, { ref: ref, className: cn(error && 'text-destructive', className), htmlFor: formItemId, ...props });
+});
+FormLabel.displayName = 'FormLabel';
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot, { ref: ref, id: formItemId, "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+});
+FormControl.displayName = 'FormControl';
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { ref: ref, id: formDescriptionId, className: cn('text-[0.8rem] text-muted-foreground', className), ...props }));
+});
+FormDescription.displayName = 'FormDescription';
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", { ref: ref, id: formMessageId, className: cn('text-[0.8rem] font-medium text-destructive', className), ...props, children: body }));
+});
+FormMessage.displayName = 'FormMessage';
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/lib/components/ui/HoverableValue.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface HoverableValueProps {
+    value: string;
+    truncatedValue: string;
+}
+declare const HoverableValue: React.FC<HoverableValueProps>;
+export default HoverableValue;

package/lib/components/ui/HoverableValue.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiClipboardCopy } from 'react-icons/hi';
+import { useState } from 'react';
+const HoverableValue = ({ value, truncatedValue }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    return (_jsxs("button", { "aria-label": "Copy to clipboard", className: "relative flex cursor-pointer items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => navigator.clipboard.writeText(value), children: [_jsx("span", { title: value, children: truncatedValue }), isHovered && _jsx(HiClipboardCopy, { className: "ml-2 text-gray-500 hover:text-gray-800", title: "Copy to clipboard" })] }));
+};
+export default HoverableValue;

package/lib/components/ui/IconButton.d.ts

@@ -0,0 +1,10 @@
+import type { IconType } from 'react-icons';
+import * as React from 'react';
+import { type ButtonProps } from './Button';
+interface IconButtonProps extends ButtonProps {
+    icon: IconType;
+    label: string;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;
+export type { IconButtonProps };

package/lib/components/ui/IconButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../helpers';
+import Button from './Button';
+/* eslint-disable @typescript-eslint/naming-convention */
+const IconButton = React.forwardRef(({ icon: Icon, label, size = 'default', variant = 'primary', className, children, ...props }, ref) => {
+    return (_jsxs(Button, { variant: variant, ref: ref, "aria-label": label, size: size, className: cn('flex flex-row flex-nowrap text-nowrap items-center', className), ...props, children: [_jsx(Icon, { size: 20, "aria-hidden": "true", className: children ? 'mr-2' : '' }), children] }));
+});
+IconButton.displayName = 'IconButton';
+export default IconButton;

package/lib/components/ui/ImageComponent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type ImageComponentProps = {
+    src: string;
+    alt: string;
+    className?: string;
+};
+declare const ImageComponent: React.FC<ImageComponentProps>;
+export default ImageComponent;

package/lib/components/ui/ImageComponent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageComponent = ({ src, alt, className }) => {
+    return _jsx("img", { src: src, alt: alt, className: className });
+};
+export default ImageComponent;

package/lib/components/ui/ImageUploader.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ImageUploaderProps {
+    project: 'vas' | 'stocklink' | 'events';
+    env: 'dev' | 'uat' | 'prod';
+    onUploadSuccess?: (url: string) => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    disabled?: boolean;
+    maxFileSize?: number;
+    acceptedFileTypes?: string[];
+    placeholder?: string;
+    showPreview?: boolean;
+    value?: string;
+    onChange?: (url: string | null) => void;
+}
+declare const ImageUploader: React.FC<ImageUploaderProps>;
+export default ImageUploader;

package/lib/components/ui/ImageUploader.js

@@ -0,0 +1,144 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image as ImageIcon, Loader2, Upload, X } from 'lucide-react';
+import { useDropzone } from 'react-dropzone';
+import { useCallback, useState } from 'react';
+import { Button, cn, useToast } from '../..';
+import { generateSecureRandomString } from '../../shared';
+import { uploadFileWithXHR } from '../../shared/utils/functionHelper';
+import { Progress } from './Progress';
+const ImageUploader = ({ project, env, onUploadSuccess, onError, className, disabled = false, maxFileSize = 5 * 1024 * 1024, // 5MB default
+acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], placeholder = 'Click to upload or drag and drop an image', showPreview = true, value, onChange, }) => {
+    const [previewUrl, setPreviewUrl] = useState(value || null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState(0);
+    const [error, setError] = useState(null);
+    const { addToast } = useToast();
+    const generateFileName = (originalName) => {
+        const timestamp = Date.now();
+        const randomString = generateSecureRandomString();
+        const extension = originalName.split('.').pop() || 'jpg';
+        return `${timestamp}_${randomString}.${extension}`;
+    };
+    const getPresignedUrl = async (fileName, contentType) => {
+        // This should be configurable or injected, but for now using a default endpoint
+        const endpoint = process.env.NEXT_PUBLIC_UPLOAD_URL_ENDPOINT ||
+            'https://faas-ams3-2a2df116.doserverless.co/api/v1/web/fn-2c9f1cfc-1296-4367-89d8-12409763dae6/default/upload-url';
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                project,
+                env,
+                fileName,
+                contentType,
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to get upload URL: ${response.statusText}`);
+        }
+        // --- FIX: unwrap .data if present ---
+        const json = await response.json();
+        const data = json.data || json;
+        return {
+            uploadURL: data.uploadURL,
+            publicURL: data.publicURL,
+        };
+    };
+    const uploadFile = async (file) => {
+        const fileName = generateFileName(file.name);
+        try {
+            // Get pre-signed URL
+            const { uploadURL, publicURL } = await getPresignedUrl(fileName, file.type);
+            // Upload file using XMLHttpRequest
+            await uploadFileWithXHR(uploadURL, file);
+            return publicURL;
+        }
+        catch (error) {
+            console.error('Upload error:', error);
+            throw error;
+        }
+    };
+    const handleFileUpload = async (file) => {
+        if (disabled)
+            return;
+        setError(null);
+        setIsUploading(true);
+        setUploadProgress(0);
+        try {
+            // Validate file type
+            if (!acceptedFileTypes.includes(file.type)) {
+                throw new Error(`File type not supported. Accepted types: ${acceptedFileTypes.join(', ')}`);
+            }
+            // Validate file size
+            if (file.size > maxFileSize) {
+                throw new Error(`File size exceeds ${Math.round(maxFileSize / 1024 / 1024)}MB limit`);
+            }
+            // Show preview immediately
+            if (showPreview) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    setPreviewUrl(e.target?.result);
+                };
+                reader.readAsDataURL(file);
+            }
+            // Simulate progress (since we can't track actual upload progress with fetch)
+            const progressInterval = setInterval(() => {
+                setUploadProgress((prev) => {
+                    if (prev < 90)
+                        return prev + 10;
+                    return prev;
+                });
+            }, 200);
+            const publicURL = await uploadFile(file);
+            clearInterval(progressInterval);
+            setUploadProgress(100);
+            // Update state
+            onChange?.(publicURL);
+            onUploadSuccess?.(publicURL);
+            addToast({
+                message: 'Image uploaded successfully!',
+                variant: 'success',
+            });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Upload failed';
+            setError(errorMessage);
+            setPreviewUrl(null);
+            onChange?.(null);
+            onError?.(error instanceof Error ? error : new Error(errorMessage));
+            addToast({
+                message: errorMessage,
+                variant: 'error',
+            });
+        }
+        finally {
+            setIsUploading(false);
+            setUploadProgress(0);
+        }
+    };
+    const onDrop = useCallback((acceptedFiles) => {
+        const file = acceptedFiles[0];
+        if (file) {
+            handleFileUpload(file);
+        }
+    }, [disabled, acceptedFileTypes, maxFileSize]);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: acceptedFileTypes.reduce((acc, type) => {
+            acc[type] = [];
+            return acc;
+        }, {}),
+        maxFiles: 1,
+        disabled: disabled || isUploading,
+    });
+    const handleRemove = () => {
+        setPreviewUrl(null);
+        setError(null);
+        onChange?.(null);
+    };
+    return (_jsxs("div", { className: cn('w-full', className), children: [previewUrl && showPreview ? (_jsxs("div", { className: "relative mb-4", children: [_jsx("img", { src: previewUrl, alt: "Preview", className: "max-h-64 w-full rounded-lg object-contain border border-gray-200" }), !isUploading && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "absolute top-2 right-2", onClick: handleRemove, children: _jsx(X, { className: "h-4 w-4" }) }))] })) : (_jsxs("div", { ...getRootProps(), className: cn('border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-gray-400', isDragActive && 'border-blue-500 bg-blue-50', disabled && 'cursor-not-allowed opacity-50', error && 'border-red-500 bg-red-50'), children: [_jsx("input", { ...getInputProps() }), isUploading ? (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-blue-500" }), _jsx("p", { className: "text-sm text-gray-600", children: "Uploading image..." }), _jsx(Progress, { value: uploadProgress, className: "w-full max-w-xs" })] })) : (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [isDragActive ? (_jsx(Upload, { className: "h-8 w-8 text-blue-500" })) : (_jsx(ImageIcon, { className: "h-8 w-8 text-gray-400" })), _jsx("p", { className: "text-sm text-gray-600", children: isDragActive ? 'Drop the image here' : placeholder }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Supported formats: ", acceptedFileTypes.map((type) => type.split('/')[1]).join(', ')] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Max size: ", Math.round(maxFileSize / 1024 / 1024), "MB"] })] }))] })), error && _jsx("p", { className: "mt-2 text-sm text-red-600", children: error })] }));
+};
+export default ImageUploader;

package/lib/components/ui/Input.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/lib/components/ui/Input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Input = React.forwardRef(({ className, type, id, placeholder, ...props }, ref) => {
+    return (_jsx("input", { id: id, type: type, className: cn('h-9 w-full rounded-md border-gray-300 bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), placeholder: placeholder, ref: ref, ...props }));
+});
+Input.displayName = 'Input';
+export default Input;

package/lib/components/ui/Label.d.ts

@@ -0,0 +1,5 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export default Label;

package/lib/components/ui/Label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export default Label;

package/lib/components/ui/Loader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LoaderProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    colorClassName?: string;
+    variant?: 'bars' | 'dots';
+    className?: string;
+}
+declare const LoaderComponent: React.FC<LoaderProps>;
+export default LoaderComponent;
+export type { LoaderProps };

package/lib/components/ui/Loader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader as MantineLoader } from '@mantine/core';
+import { cn } from '../../helpers';
+const LoaderComponent = ({ size = 'xl', colorClassName = 'text-primary-500', variant = 'bars', className = '', }) => {
+    return (_jsx("div", { className: cn('inline-block', className), children: _jsx("div", { className: colorClassName.startsWith('text-') ? colorClassName : 'text-' + colorClassName, children: _jsx(MantineLoader, { color: "currentColor", variant: variant, size: size }) }) }));
+};
+export default LoaderComponent;

package/lib/components/ui/Modal.d.ts

@@ -0,0 +1,72 @@
+import type { ModalProps as FlowbiteModalProps } from 'flowbite-react';
+import * as React from 'react';
+import { type ButtonVariant } from './Button';
+export interface ModalProps extends Omit<FlowbiteModalProps, 'theme' | 'title'> {
+    /** Title of the modal */
+    title?: React.ReactNode;
+    /** Modal content */
+    children: React.ReactNode;
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when modal is closed */
+    onClose: () => void;
+    /** Specify the size of the modal */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+    /** Button for the primary action */
+    primaryButton?: {
+        /** Text to display on the button */
+        label: string;
+        /** Click handler for the button */
+        onClick: () => void;
+        /** Button is in loading state */
+        loading?: boolean;
+        /** Button is disabled */
+        disabled?: boolean;
+        /** Custom variant for the button */
+        variant?: ButtonVariant;
+    };
+    /** Button for the secondary/cancel action */
+    secondaryButton?: {
+        /** Text to display on the button */
+        label: string;
+        /** Click handler for the button */
+        onClick: () => void;
+        /** Button is in loading state */
+        loading?: boolean;
+        /** Button is disabled */
+        disabled?: boolean;
+        /** Custom variant for the button */
+        variant?: ButtonVariant;
+    };
+    /** Custom header content */
+    headerContent?: React.ReactNode;
+    /** Custom footer content (will override primary/secondary buttons) */
+    footerContent?: React.ReactNode;
+    /** Additional class name for the modal */
+    className?: string;
+}
+/**
+ * Reusable Modal component that wraps Flowbite's Modal with Pagamio styling and structure
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Confirmation"
+ *   primaryButton={{
+ *     label: "Confirm",
+ *     onClick: handleConfirm,
+ *   }}
+ *   secondaryButton={{
+ *     label: "Cancel",
+ *     onClick: handleClose,
+ *     variant: "outline-primary"
+ *   }}
+ * >
+ *   <p>Are you sure you want to perform this action?</p>
+ * </Modal>
+ * ```
+ */
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/lib/components/ui/Modal.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal as FlowbiteModal } from 'flowbite-react';
+import { cn } from '../../helpers';
+import Button from './Button';
+/**
+ * Reusable Modal component that wraps Flowbite's Modal with Pagamio styling and structure
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Confirmation"
+ *   primaryButton={{
+ *     label: "Confirm",
+ *     onClick: handleConfirm,
+ *   }}
+ *   secondaryButton={{
+ *     label: "Cancel",
+ *     onClick: handleClose,
+ *     variant: "outline-primary"
+ *   }}
+ * >
+ *   <p>Are you sure you want to perform this action?</p>
+ * </Modal>
+ * ```
+ */
+const Modal = ({ title, children, isOpen, onClose, size = 'md', primaryButton, secondaryButton, headerContent, footerContent, className, ...rest }) => {
+    return (_jsxs(FlowbiteModal, { show: isOpen, onClose: onClose, size: size, className: cn('max-h-[90vh] mt-16 md:mt-0 md:max-h-full', className), ...rest, children: [(title ?? headerContent) && _jsx(FlowbiteModal.Header, { children: headerContent ?? title }), _jsx(FlowbiteModal.Body, { children: _jsx("div", { className: "space-y-4", children: children }) }), (primaryButton || secondaryButton || footerContent) && (_jsx(FlowbiteModal.Footer, { children: footerContent ?? (_jsxs("div", { className: "flex w-full justify-end gap-2", children: [secondaryButton && (_jsx(Button, { onClick: secondaryButton.onClick, variant: secondaryButton.variant ?? 'outline-primary', disabled: secondaryButton.loading ?? secondaryButton.disabled, className: secondaryButton.variant, children: secondaryButton.label })), primaryButton && (_jsx(Button, { onClick: primaryButton.onClick, variant: primaryButton.variant ?? 'primary', disabled: primaryButton.loading ?? primaryButton.disabled, className: primaryButton.variant, children: primaryButton.label }))] })) }))] }));
+};
+export default Modal;

package/lib/components/ui/MultiSelect.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Field, SelectOption } from '../../form-engine';
+export interface MultiSelectProps {
+    options: SelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    disabled?: boolean;
+    onChange?: (selected: string[]) => void;
+    placeholder?: string;
+    className?: string;
+    onSearch?: (value: string) => void;
+    field?: Field;
+    tagPosition?: 'inside' | 'bottom';
+}
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
+export default MultiSelect;

package/lib/components/ui/MultiSelect.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { CheckIcon, ChevronDownIcon, Cross2Icon } from '@radix-ui/react-icons';
+import * as Popover from '@radix-ui/react-popover';
+import { forwardRef, useEffect, useState } from 'react';
+import { cn } from '../../helpers';
+const TagsList = ({ selectedOptions, placeholder, removeTag }) => {
+    if (selectedOptions.length === 0) {
+        return _jsx("span", { className: "truncate", children: placeholder ?? 'Select options' });
+    }
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedOptions.map((option) => (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 text-sm bg-gray-100 rounded-md", children: [option.label, _jsx("button", { type: "button", onClick: (e) => removeTag(option.value, e), className: "p-0.5 hover:bg-gray-200 rounded-full", children: _jsx(Cross2Icon, { className: "w-3 h-3" }) })] }, option.value))) }));
+};
+const MultiSelect = forwardRef(({ options, value, defaultValue = [], disabled, onChange, placeholder, className, onSearch, field, tagPosition = 'inside', }, ref) => {
+    const [selectedValues, setSelectedValues] = useState(defaultValue);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        if (onSearch) {
+            onSearch(searchTerm);
+        }
+        else {
+            setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase())));
+        }
+    }, [searchTerm, options, onSearch]);
+    const internalValues = value || selectedValues;
+    const handleToggle = (option) => {
+        const updatedValues = internalValues.includes(option)
+            ? internalValues.filter((val) => val !== option)
+            : [...internalValues, option];
+        if (!value) {
+            setSelectedValues(updatedValues);
+        }
+        onChange?.(updatedValues);
+    };
+    const removeTag = (optionValue, e) => {
+        e.stopPropagation();
+        handleToggle(optionValue);
+    };
+    const selectedOptions = options.filter((option) => internalValues.includes(option.value));
+    return (_jsx("div", { ref: ref, className: cn('relative w-full', className), children: _jsxs(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, className: "w-full cursor-pointer disabled:text-gray-400 disabled:bg-gray-50 disabled:cursor-not-allowed", onClick: (e) => {
+                            e.preventDefault();
+                            setIsOpen(!isOpen);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                setIsOpen(!isOpen);
+                            }
+                        }, children: [_jsxs("div", { id: field?.name, className: "flex items-center w-full px-4 py-2 border rounded-md", style: { minHeight: '41px' }, children: [_jsx("div", { className: "flex-1 text-left", children: tagPosition === 'inside' ? (_jsx(TagsList, { selectedOptions: selectedOptions, removeTag: removeTag, placeholder: field?.placeholder })) : (_jsx("span", { className: "truncate", children: selectedOptions.length === 0
+                                                ? (field?.placeholder ?? placeholder ?? 'Select options')
+                                                : `${selectedOptions.length} selected` })) }), _jsx(ChevronDownIcon, { className: "ml-2 flex-shrink-0" })] }), tagPosition === 'bottom' && selectedOptions.length > 0 && (_jsx("div", { className: "mt-2", children: _jsx(TagsList, { selectedOptions: selectedOptions, removeTag: removeTag, placeholder: field?.placeholder }) }))] }) }), _jsxs(Popover.Content, { className: "p-2 bg-white border rounded shadow-md w-full z-50", align: "start", sideOffset: 5, onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 mb-2 border rounded", onClick: (e) => e.stopPropagation() }), _jsx("div", { className: "max-h-60 overflow-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => (_jsxs("div", { className: "flex items-center gap-2 px-2 py-1 cursor-pointer hover:bg-gray-100", children: [_jsx(Checkbox.Root, { type: "button", checked: internalValues.includes(option.value), onCheckedChange: () => handleToggle(option.value), className: "w-4 h-4 border rounded", children: _jsx(Checkbox.Indicator, { children: _jsx(CheckIcon, { className: "w-4 h-4 text-blue-500" }) }) }), _jsx("button", { type: "button", onClick: () => handleToggle(option.value), onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                handleToggle(option.value);
+                                            }
+                                        }, className: "text-left w-full", children: option.label })] }, option.value)))) : (_jsx("div", { className: "px-2 py-1 text-gray-500", children: "No options found" })) })] })] }) }));
+});
+MultiSelect.displayName = 'MultiSelect';
+export default MultiSelect;

package/lib/components/ui/NotificationModal.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface NotificationModalProps {
+    show: boolean;
+    onClose: () => void;
+    onConfirm?: () => void;
+    title?: string;
+    message: string;
+    variant?: 'success' | 'error' | 'warning' | 'info';
+    confirmText?: string;
+    cancelText?: string;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    children?: React.ReactNode;
+}
+declare const NotificationModal: React.FC<NotificationModalProps>;
+export default NotificationModal;