@capyx/components-library 0.0.1 → 0.0.3

package/dist/addons/CharacterCountInput.d.ts

@@ -0,0 +1,73 @@
+import { type FC, type PropsWithChildren, type ReactNode } from 'react';
+/**
+ * Props for the CharacterCountInput component
+ */
+export type CharacterCountInputProps = PropsWithChildren<{
+    /** Array of valid HTML element types to monitor (e.g., ["text", "email", "textarea"]) */
+    validHTMLElements?: string[];
+    /** CSS class for the container wrapper */
+    containerClassName?: string;
+    /** CSS class for the character counter element */
+    counterClassName?: string;
+    /** CSS class applied when character count is normal */
+    normalClassName?: string;
+    /** CSS class applied when character count is near the limit */
+    warningClassName?: string;
+    /** CSS class applied when character count reaches the limit */
+    dangerClassName?: string;
+    /** Number of characters remaining before warning state (default: 10) */
+    warningThreshold?: number;
+    /** Custom function to format the counter display */
+    formatCounter?: (current: number, max: number) => ReactNode;
+    /** Whether to show the character counter (default: true) */
+    showCounter?: boolean;
+    /** Whether to show counter even when input is empty (default: false) */
+    showWhenEmpty?: boolean;
+}>;
+/**
+ * A wrapper component that adds a character counter to text inputs and textareas.
+ * Automatically detects the maxLength property from the child input and displays
+ * the current character count with visual feedback.
+ *
+ * Features:
+ * - Automatic character counting from input/textarea children
+ * - Visual feedback with customizable warning and danger states
+ * - Configurable warning threshold
+ * - Custom counter formatting
+ * - Support for multiple input types (text, email, password, textarea, etc.)
+ * - Show/hide counter toggle
+ *
+ * @example
+ * // Basic usage with TextInput
+ * <CharacterCountInput>
+ *   <TextInput
+ *     name="bio"
+ *     type="text"
+ *     maxLength={100}
+ *     placeholder="Enter your bio"
+ *   />
+ * </CharacterCountInput>
+ *
+ * @example
+ * // With custom styling and warning threshold
+ * <CharacterCountInput
+ *   warningThreshold={20}
+ *   normalClassName="text-muted"
+ *   warningClassName="text-warning"
+ *   dangerClassName="text-danger"
+ * >
+ *   <TextAreaInput name="message" maxLength={200} />
+ * </CharacterCountInput>
+ *
+ * @example
+ * // With custom counter format
+ * <CharacterCountInput
+ *   formatCounter={(current, max) => (
+ *     <span>{max - current} characters remaining</span>
+ *   )}
+ * >
+ *   <TextInput name="title" maxLength={50} />
+ * </CharacterCountInput>
+ */
+export declare const CharacterCountInput: FC<CharacterCountInputProps>;
+//# sourceMappingURL=CharacterCountInput.d.ts.map

package/dist/addons/CharacterCountInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterCountInput.d.ts","sourceRoot":"","sources":["../../lib/addons/CharacterCountInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,EAAE,EACP,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAaf;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACxD,yFAAyF;IACzF,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IAC5D,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA+G5D,CAAC"}

package/dist/addons/CharacterCountInput.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { Form } from 'react-bootstrap';
+const _DEFAULT_VALID_HTML_ELEMENTS = [
+    'text',
+    'email',
+    'password',
+    'search',
+    'tel',
+    'url',
+    'textarea',
+];
+/**
+ * A wrapper component that adds a character counter to text inputs and textareas.
+ * Automatically detects the maxLength property from the child input and displays
+ * the current character count with visual feedback.
+ *
+ * Features:
+ * - Automatic character counting from input/textarea children
+ * - Visual feedback with customizable warning and danger states
+ * - Configurable warning threshold
+ * - Custom counter formatting
+ * - Support for multiple input types (text, email, password, textarea, etc.)
+ * - Show/hide counter toggle
+ *
+ * @example
+ * // Basic usage with TextInput
+ * <CharacterCountInput>
+ *   <TextInput
+ *     name="bio"
+ *     type="text"
+ *     maxLength={100}
+ *     placeholder="Enter your bio"
+ *   />
+ * </CharacterCountInput>
+ *
+ * @example
+ * // With custom styling and warning threshold
+ * <CharacterCountInput
+ *   warningThreshold={20}
+ *   normalClassName="text-muted"
+ *   warningClassName="text-warning"
+ *   dangerClassName="text-danger"
+ * >
+ *   <TextAreaInput name="message" maxLength={200} />
+ * </CharacterCountInput>
+ *
+ * @example
+ * // With custom counter format
+ * <CharacterCountInput
+ *   formatCounter={(current, max) => (
+ *     <span>{max - current} characters remaining</span>
+ *   )}
+ * >
+ *   <TextInput name="title" maxLength={50} />
+ * </CharacterCountInput>
+ */
+export const CharacterCountInput = ({ validHTMLElements: _validHTMLElements, children, containerClassName = 'text-end', counterClassName = '', normalClassName = 'text-muted', warningClassName = 'text-warning', dangerClassName = 'text-danger', warningThreshold = 10, formatCounter, showCounter = true, showWhenEmpty = false, }) => {
+    const containerRef = useRef(null);
+    const [characterCount, setCharacterCount] = useState(0);
+    const [maxLength, setMaxLength] = useState(null);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        // Extract maxLength from child props
+        const childProps = children?.props;
+        if (childProps?.maxLength) {
+            setMaxLength(childProps.maxLength);
+        }
+        // Use MutationObserver to wait for input element to be rendered
+        const findAndAttachInput = () => {
+            const input = containerRef.current?.querySelector('input, textarea');
+            if (!input)
+                return null;
+            const inputReader = () => {
+                setCharacterCount(input.value?.length ?? 0);
+            };
+            input.addEventListener('input', inputReader);
+            input.addEventListener('keyup', inputReader);
+            inputReader(); // Initial read
+            return () => {
+                input.removeEventListener('input', inputReader);
+                input.removeEventListener('keyup', inputReader);
+            };
+        };
+        // Try to find input immediately
+        let cleanup = findAndAttachInput();
+        // If not found, wait for it to be rendered
+        if (!cleanup && containerRef.current) {
+            const observer = new MutationObserver(() => {
+                if (!cleanup) {
+                    cleanup = findAndAttachInput();
+                    if (cleanup) {
+                        observer.disconnect();
+                    }
+                }
+            });
+            observer.observe(containerRef.current, {
+                childList: true,
+                subtree: true,
+            });
+            return () => {
+                observer.disconnect();
+                cleanup?.();
+            };
+        }
+        return cleanup || undefined;
+    }, [children]);
+    const getCounterClassName = () => {
+        if (maxLength === null)
+            return normalClassName;
+        if (characterCount === maxLength)
+            return dangerClassName;
+        if (characterCount >= maxLength - warningThreshold)
+            return warningClassName;
+        return normalClassName;
+    };
+    const renderCounter = () => {
+        if (!showCounter || maxLength === null)
+            return null;
+        if (!showWhenEmpty && characterCount === 0)
+            return null;
+        const className = `${counterClassName} ${getCounterClassName()}`.trim();
+        const content = formatCounter
+            ? formatCounter(characterCount, maxLength)
+            : `${characterCount} / ${maxLength}`;
+        return _jsx(Form.Text, { className: className, children: content });
+    };
+    return (_jsxs("div", { ref: containerRef, className: containerClassName, children: [children, renderCounter()] }));
+};

package/dist/addons/index.d.ts

@@ -0,0 +1,5 @@
+export type { AutocompleteInputProps } from './AutocompleteInput';
+export { AutocompleteInput } from './AutocompleteInput';
+export type { CharacterCountInputProps } from './CharacterCountInput';
+export { CharacterCountInput } from './CharacterCountInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/addons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/addons/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/addons/index.js

@@ -0,0 +1,2 @@
+export { AutocompleteInput } from './AutocompleteInput';
+export { CharacterCountInput } from './CharacterCountInput';

package/dist/components/CheckInput.d.ts

@@ -0,0 +1,49 @@
+import type { FC } from 'react';
+/**
+ * Props for the CheckInput component
+ */
+export type CheckInputProps = {
+    /** The name of the checkbox input field */
+    name: string;
+    /** Label text displayed next to the checkbox */
+    label?: string;
+    /** Whether the checkbox is required */
+    required?: boolean;
+    /** Current checked state (standalone mode) */
+    value?: boolean;
+    /** Callback function called when the checked state changes */
+    onChange?: (checked: boolean) => void;
+    /** Callback function called when the checkbox loses focus */
+    onBlur?: () => void;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Custom HTML id for the checkbox element */
+    id?: string;
+};
+/**
+ * CheckInput - A checkbox input component with react-hook-form integration
+ *
+ * Provides a checkbox input that works both standalone and with react-hook-form.
+ * Automatically integrates with FormProvider when available, providing validation
+ * and error handling.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <CheckInput
+ *   name="agreeToTerms"
+ *   label="I agree to the terms"
+ *   required
+ * />
+ *
+ * // Standalone mode
+ * <CheckInput
+ *   name="newsletter"
+ *   label="Subscribe to newsletter"
+ *   value={subscribed}
+ *   onChange={setSubscribed}
+ * />
+ * ```
+ */
+export declare const CheckInput: FC<CheckInputProps>;
+//# sourceMappingURL=CheckInput.d.ts.map

package/dist/components/CheckInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckInput.d.ts","sourceRoot":"","sources":["../../lib/components/CheckInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA0E1C,CAAC"}

package/dist/components/CheckInput.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+/**
+ * CheckInput - A checkbox input component with react-hook-form integration
+ *
+ * Provides a checkbox input that works both standalone and with react-hook-form.
+ * Automatically integrates with FormProvider when available, providing validation
+ * and error handling.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <CheckInput
+ *   name="agreeToTerms"
+ *   label="I agree to the terms"
+ *   required
+ * />
+ *
+ * // Standalone mode
+ * <CheckInput
+ *   name="newsletter"
+ *   label="Subscribe to newsletter"
+ *   value={subscribed}
+ *   onChange={setSubscribed}
+ * />
+ * ```
+ */
+export const CheckInput = ({ name, label, required = false, value, onChange, onBlur, disabled = false, id, }) => {
+    const formContext = useFormContext();
+    // Helper to safely get nested error
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const errorMessage = getFieldError(name);
+    const inputId = id || `check-input-${name}`;
+    // Integrated with react-hook-form
+    if (formContext) {
+        return (_jsx(Controller, { name: name, control: formContext.control, rules: {
+                required: required ? `${label || 'This field'} is required` : false,
+            }, render: ({ field }) => (_jsx(Form.Check, { ...field, id: inputId, type: "checkbox", label: label, checked: field.value ?? false, onChange: (e) => {
+                    const checked = e.target.checked;
+                    field.onChange(checked);
+                    onChange?.(checked);
+                }, onBlur: () => {
+                    field.onBlur();
+                    onBlur?.();
+                }, disabled: disabled, required: required, isInvalid: !!errorMessage, feedback: errorMessage, feedbackType: "invalid" })) }));
+    }
+    // Standalone mode (no form context)
+    return (_jsx(Form.Check, { id: inputId, type: "checkbox", label: label, checked: value ?? false, onChange: (e) => onChange?.(e.target.checked), onBlur: onBlur, disabled: disabled, required: required }));
+};

package/dist/components/DateInput.d.ts

@@ -0,0 +1,63 @@
+import type { FC } from 'react';
+/**
+ * Props for the DateInput component
+ */
+export type DateInputProps = {
+    /** The name of the date input field */
+    name: string;
+    /** Label text displayed for the date picker */
+    label?: string;
+    /** Current date value (standalone mode) */
+    value?: Date | null;
+    /** Callback function called when the date changes */
+    onChange?: (date: Date | null) => void;
+    /** Callback function called when the input loses focus */
+    onBlur?: () => void;
+    /** Whether the date field is required */
+    required?: boolean;
+    /** Whether the date picker is disabled */
+    disabled?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Date format string (default: "DD/MM/YYYY") */
+    dateFormat?: string;
+    /** Size of the text field (default: "small") */
+    textFieldSize?: 'small' | 'medium';
+    /** Whether to disable future dates */
+    disableFuture?: boolean;
+    /** Whether to disable past dates */
+    disablePast?: boolean;
+    /** Which calendar views to display */
+    views?: Array<'year' | 'month' | 'day'>;
+};
+/**
+ * DateInput - A date picker component using Material-UI with react-hook-form integration
+ *
+ * Provides a date picker with calendar interface that works both standalone and with
+ * react-hook-form. Uses MUI DatePicker internally with customizable date ranges,
+ * formats, and validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <DateInput
+ *   name="birthdate"
+ *   label="Date of Birth"
+ *   required
+ *   disableFuture
+ * />
+ *
+ * // Standalone mode
+ * <DateInput
+ *   name="appointmentDate"
+ *   label="Select Date"
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   minDate={new Date()}
+ * />
+ * ```
+ */
+export declare const DateInput: FC<DateInputProps>;
+//# sourceMappingURL=DateInput.d.ts.map

package/dist/components/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../lib/components/DateInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC;CACxC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgHxC,CAAC"}

package/dist/components/DateInput.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+/**
+ * DateInput - A date picker component using Material-UI with react-hook-form integration
+ *
+ * Provides a date picker with calendar interface that works both standalone and with
+ * react-hook-form. Uses MUI DatePicker internally with customizable date ranges,
+ * formats, and validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <DateInput
+ *   name="birthdate"
+ *   label="Date of Birth"
+ *   required
+ *   disableFuture
+ * />
+ *
+ * // Standalone mode
+ * <DateInput
+ *   name="appointmentDate"
+ *   label="Select Date"
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   minDate={new Date()}
+ * />
+ * ```
+ */
+export const DateInput = ({ name, label, value, onChange, onBlur, required = false, disabled = false, minDate, maxDate, dateFormat = 'DD/MM/YYYY', textFieldSize = 'small', disableFuture = false, disablePast = false, views, }) => {
+    const formContext = useFormContext();
+    // Helper to safely get nested error
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const errorMessage = getFieldError(name);
+    // Convert Date to Dayjs
+    const convertToDateValue = (date) => {
+        if (!date)
+            return undefined;
+        return dayjs(date);
+    };
+    // Integrated with react-hook-form
+    if (formContext) {
+        return (_jsx(Controller, { name: name, control: formContext.control, rules: {
+                required: required ? `${label || 'This field'} is required` : false,
+            }, render: ({ field }) => (_jsx(Form.Group, { children: _jsx(DatePicker, { label: label, value: convertToDateValue(field.value), onChange: (newValue) => {
+                        const dateValue = newValue?.isValid()
+                            ? newValue.toDate()
+                            : null;
+                        field.onChange(dateValue);
+                        onChange?.(dateValue);
+                    }, disabled: disabled, format: dateFormat, minDate: convertToDateValue(minDate), maxDate: convertToDateValue(maxDate), disableFuture: disableFuture, disablePast: disablePast, views: views, slotProps: {
+                        textField: {
+                            size: textFieldSize,
+                            required: required,
+                            error: !!errorMessage,
+                            helperText: errorMessage,
+                            onBlur: () => {
+                                field.onBlur();
+                                onBlur?.();
+                            },
+                        },
+                    } }) })) }));
+    }
+    // Standalone mode (no form context)
+    return (_jsx(Form.Group, { children: _jsx(DatePicker, { label: label, value: convertToDateValue(value), onChange: (newValue) => {
+                const dateValue = newValue?.isValid() ? newValue.toDate() : null;
+                onChange?.(dateValue);
+            }, disabled: disabled, format: dateFormat, minDate: convertToDateValue(minDate), maxDate: convertToDateValue(maxDate), disableFuture: disableFuture, disablePast: disablePast, views: views, slotProps: {
+                textField: {
+                    size: textFieldSize,
+                    required: required,
+                    onBlur: onBlur,
+                },
+            } }) }));
+};

package/dist/components/FileInput.d.ts

@@ -0,0 +1,102 @@
+import { type FC, type ReactNode } from 'react';
+/**
+ * Props for the FileInput component
+ */
+export type FileInputProps = {
+    /** The name of the file input field for form integration */
+    name?: string;
+    /** File types to accept (e.g., "image/*", ".pdf,.doc") */
+    accept?: string;
+    /** Whether to allow selecting multiple files */
+    multiple?: boolean;
+    /** Callback fired when file selection changes */
+    onChange?: (files: File | File[] | null) => void;
+    /** Callback fired when upload process starts */
+    onUploadStart?: () => void;
+    /** Callback fired when upload completes successfully */
+    onUploadComplete?: () => void;
+    /** Callback fired when upload encounters an error */
+    onUploadError?: (error: Error) => void;
+    /** Whether the file input is disabled */
+    disabled?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** CSS class for the container element */
+    containerClassName?: string;
+    /** CSS class for the label element */
+    labelClassName?: string;
+    /** CSS class for the button element */
+    buttonClassName?: string;
+    /** CSS class for the file info text */
+    fileInfoClassName?: string;
+    /** CSS class for error messages */
+    errorClassName?: string;
+    /** Label text or element displayed above the input */
+    label?: ReactNode;
+    /** Text or element displayed on the button */
+    buttonText?: ReactNode;
+    /** Text shown when no file is selected */
+    noFileText?: ReactNode;
+    /** Text shown during file upload */
+    uploadingText?: ReactNode;
+    /** Custom function to format the file info display */
+    formatFileInfo?: (files: File | File[]) => ReactNode;
+    /** Custom validation function for individual files */
+    validateFile?: (file: File) => {
+        valid: boolean;
+        error?: string;
+    };
+    /** Whether file selection is required */
+    required?: boolean;
+};
+/**
+ * A customizable file input component with validation, upload lifecycle hooks,
+ * and react-hook-form integration.
+ *
+ * Features:
+ * - Single or multiple file selection
+ * - File type filtering via accept attribute
+ * - File size validation with configurable max size
+ * - Custom file validation logic
+ * - Upload lifecycle callbacks (start, complete, error)
+ * - Fully customizable UI with className props
+ * - Integration with react-hook-form for form validation
+ * - Custom formatting for file information display
+ *
+ * @example
+ * // Basic file upload with react-hook-form
+ * <FileInput
+ *   name="avatar"
+ *   label="Profile Picture"
+ *   accept="image/*"
+ *   required
+ *   maxSize={5 * 1024 * 1024} // 5MB
+ * />
+ *
+ * @example
+ * // Multiple files with custom validation
+ * <FileInput
+ *   name="documents"
+ *   label="Upload Documents"
+ *   multiple
+ *   accept=".pdf,.doc,.docx"
+ *   validateFile={(file) => {
+ *     if (file.name.length > 100) {
+ *       return { valid: false, error: "Filename too long" };
+ *     }
+ *     return { valid: true };
+ *   }}
+ *   onChange={(files) => console.log(files)}
+ * />
+ *
+ * @example
+ * // With upload lifecycle hooks
+ * <FileInput
+ *   name="report"
+ *   onUploadStart={() => console.log("Starting upload...")}
+ *   onUploadComplete={() => console.log("Upload complete!")}
+ *   onUploadError={(error) => console.error(error)}
+ * />
+ */
+export declare const FileInput: FC<FileInputProps>;
+//# sourceMappingURL=FileInput.d.ts.map

package/dist/components/FileInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../lib/components/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,EAAE,EACP,KAAK,SAAS,EAGd,MAAM,OAAO,CAAC;AAIf;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,oCAAoC;IACpC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,SAAS,CAAC;IACrD,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClE,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqPxC,CAAC"}