@capyx/components-library 0.0.1 → 0.0.3

package/dist/components/FileInput.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+/**
+ * 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 const FileInput = ({ name, accept, multiple = false, onChange, onUploadStart, onUploadComplete, onUploadError, disabled = false, maxSize, containerClassName = '', labelClassName = '', buttonClassName = '', fileInfoClassName = '', errorClassName = '', label = 'Upload File', buttonText = 'Choose File', noFileText = 'No file selected', uploadingText = 'Uploading...', formatFileInfo, validateFile, required = false, }) => {
+    const fileInputRef = useRef(null);
+    const [selectedFiles, setSelectedFiles] = useState(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [error, setError] = useState(null);
+    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 formErrorMessage = name ? getFieldError(name) : undefined;
+    const handleFileUploadClick = () => {
+        if (isUploading || disabled)
+            return;
+        fileInputRef.current?.click();
+    };
+    const validateFiles = (files) => {
+        for (const file of files) {
+            // Check file size
+            if (maxSize && file.size > maxSize) {
+                return {
+                    valid: false,
+                    error: `File size exceeds maximum allowed size of ${(maxSize / 1024 / 1024).toFixed(2)}MB`,
+                };
+            }
+            // Custom validation
+            if (validateFile) {
+                const result = validateFile(file);
+                if (!result.valid) {
+                    return result;
+                }
+            }
+        }
+        return { valid: true };
+    };
+    const handleFileChange = (event, fieldOnChange) => {
+        setError(null);
+        const files = event.target.files;
+        if (!files || files.length === 0) {
+            setSelectedFiles(null);
+            onChange?.(null);
+            fieldOnChange?.(null);
+            return;
+        }
+        const fileArray = Array.from(files);
+        const validation = validateFiles(fileArray);
+        if (!validation.valid) {
+            setError(validation.error ?? 'Invalid file');
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+            return;
+        }
+        const result = multiple ? fileArray : fileArray[0];
+        setSelectedFiles(result);
+        // Reset input value to allow re-selecting the same file
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+        try {
+            onUploadStart?.();
+            setIsUploading(true);
+            onChange?.(result);
+            fieldOnChange?.(result);
+            onUploadComplete?.();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Upload failed');
+            setError(error.message);
+            onUploadError?.(error);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    const renderFileInfo = () => {
+        if (isUploading) {
+            return (_jsx(Form.Text, { className: fileInfoClassName, children: uploadingText }));
+        }
+        if (!selectedFiles) {
+            return _jsx(Form.Text, { className: fileInfoClassName, children: noFileText });
+        }
+        if (formatFileInfo) {
+            return (_jsx(Form.Text, { className: fileInfoClassName, children: formatFileInfo(selectedFiles) }));
+        }
+        if (Array.isArray(selectedFiles)) {
+            return (_jsxs(Form.Text, { className: fileInfoClassName, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', ' ', "selected"] }));
+        }
+        return (_jsx(Form.Text, { className: fileInfoClassName, children: selectedFiles.name }));
+    };
+    const displayError = error || formErrorMessage;
+    // Render with form context integration
+    if (formContext && name) {
+        return (_jsx(Controller, { name: name, control: formContext.control, rules: {
+                required: required
+                    ? `${typeof label === 'string' ? label : 'File'} is required`
+                    : false,
+            }, render: ({ field }) => (_jsxs(Form.Group, { className: containerClassName, children: [_jsx("input", { type: "file", ref: (e) => {
+                            fileInputRef.current = e;
+                            field.ref(e);
+                        }, style: { display: 'none' }, accept: accept, multiple: multiple, onChange: (e) => handleFileChange(e, field.onChange), onBlur: field.onBlur, disabled: disabled || isUploading, "aria-invalid": !!displayError, "aria-describedby": displayError ? `${name}-error` : undefined }), label && (_jsx(Form.Label, { className: labelClassName, children: label })), _jsxs("div", { children: [_jsx(Button, { variant: "secondary", className: buttonClassName, onClick: handleFileUploadClick, disabled: disabled || isUploading, children: buttonText }), ' ', renderFileInfo()] }), displayError && (_jsx(Form.Control.Feedback, { type: "invalid", className: errorClassName, style: { display: 'block' }, children: displayError }))] })) }));
+    }
+    // Standalone mode (no form context)
+    return (_jsxs(Form.Group, { className: containerClassName, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: accept, multiple: multiple, onChange: (e) => handleFileChange(e), disabled: disabled || isUploading }), label && _jsx(Form.Label, { className: labelClassName, children: label }), _jsxs("div", { children: [_jsx(Button, { variant: "secondary", className: buttonClassName, onClick: handleFileUploadClick, disabled: disabled || isUploading, children: buttonText }), ' ', renderFileInfo()] }), displayError && (_jsx(Form.Control.Feedback, { type: "invalid", className: errorClassName, style: { display: 'block' }, children: displayError }))] }));
+};

package/dist/components/RichTextInput.d.ts

@@ -0,0 +1,34 @@
+import { type FC } from 'react';
+import 'react-quill-new/dist/quill.snow.css';
+/**
+ * Props for the RichTextInput component
+ */
+export type RichTextInputProps = {
+    /** Whether the editor is in read-only mode */
+    readonly?: boolean;
+    /** Maximum number of characters allowed in the editor */
+    maxLength?: number;
+    /** Current value of the editor (HTML string) */
+    value?: string;
+    /** Callback function called when the content changes */
+    onChange?: (value: string) => void;
+    /** Whether the input should be styled as invalid */
+    isInvalid?: boolean;
+};
+/**
+ * RichTextInput - A rich text editor component using ReactQuill
+ *
+ * Provides a WYSIWYG editor with support for headers, bold, italic, underline, and lists.
+ * Includes optional character counting and length validation.
+ *
+ * @example
+ * ```tsx
+ * <RichTextInput
+ *   value={content}
+ *   onChange={setContent}
+ *   maxLength={1000}
+ * />
+ * ```
+ */
+export declare const RichTextInput: FC<RichTextInputProps>;
+//# sourceMappingURL=RichTextInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextInput.d.ts","sourceRoot":"","sources":["../../lib/components/RichTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AAGtE,OAAO,qCAAqC,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2EhD,CAAC"}

package/dist/components/RichTextInput.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import ReactQuill from 'react-quill-new';
+import 'react-quill-new/dist/quill.snow.css';
+/**
+ * RichTextInput - A rich text editor component using ReactQuill
+ *
+ * Provides a WYSIWYG editor with support for headers, bold, italic, underline, and lists.
+ * Includes optional character counting and length validation.
+ *
+ * @example
+ * ```tsx
+ * <RichTextInput
+ *   value={content}
+ *   onChange={setContent}
+ *   maxLength={1000}
+ * />
+ * ```
+ */
+export const RichTextInput = ({ readonly = false, maxLength, value = '', onChange, isInvalid = false, }) => {
+    const reactQuillRef = useRef(null);
+    const [count, setCount] = useState(value.length);
+    const checkCharacterCount = (event) => {
+        const currentRef = reactQuillRef.current;
+        if (currentRef != null && maxLength != null) {
+            const unprivilegedEditor = currentRef.unprivilegedEditor;
+            if (unprivilegedEditor) {
+                const length = unprivilegedEditor.getHTML().length;
+                if (length >= maxLength && event.key !== 'Backspace') {
+                    event.preventDefault();
+                }
+            }
+        }
+    };
+    const setContentLength = () => {
+        const currentRef = reactQuillRef.current;
+        if (currentRef != null && maxLength != null) {
+            const unprivilegedEditor = currentRef.unprivilegedEditor;
+            if (unprivilegedEditor) {
+                const length = unprivilegedEditor.getHTML().length;
+                setCount(length);
+            }
+        }
+    };
+    const modules = {
+        toolbar: readonly
+            ? false
+            : [
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                ['bold', 'italic', 'underline'],
+                [{ list: 'ordered' }, { list: 'bullet' }],
+            ],
+    };
+    const formats = ['header', 'bold', 'italic', 'underline', 'list', 'bullet'];
+    return (_jsxs(_Fragment, { children: [_jsx(ReactQuill, { ref: reactQuillRef, theme: "snow", onKeyDown: checkCharacterCount, onKeyUp: setContentLength, formats: formats, modules: modules, value: value, onChange: onChange, readOnly: readonly, className: isInvalid ? 'is-invalid' : '' }), maxLength && (_jsxs(Form.Text, { className: count > maxLength ? 'text-danger' : 'text-muted', children: [count, "/", maxLength, " characters"] }))] }));
+};

package/dist/components/SelectInput.d.ts

@@ -0,0 +1,54 @@
+import type { FC } from 'react';
+/**
+ * Props for the SelectInput component
+ */
+export type SelectInputProps = {
+    /** The name of the select input field */
+    name: string;
+    /** Label text displayed for the select */
+    label?: string;
+    /** Array of option strings to display in the dropdown */
+    options: string[];
+    /** Placeholder text shown when no option is selected (default: "Select...") */
+    helpText?: string;
+    /** Size of the select control */
+    controlSize?: 'sm' | 'lg';
+    /** Current selected value (standalone mode) */
+    value?: string;
+    /** Callback function called when the selection changes */
+    onChange?: (value: string) => void;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Array of option values to display in bold */
+    highlightValues?: string[];
+};
+/**
+ * SelectInput - A dropdown select component with react-hook-form integration
+ *
+ * Provides a select dropdown that works both standalone and with react-hook-form.
+ * Supports option highlighting, custom placeholder text, and automatic validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <SelectInput
+ *   name="country"
+ *   label="Country"
+ *   options={["USA", "Canada", "UK"]}
+ *   required
+ * />
+ *
+ * // Standalone mode
+ * <SelectInput
+ *   name="role"
+ *   options={["Admin", "User", "Guest"]}
+ *   value={selectedRole}
+ *   onChange={setSelectedRole}
+ *   highlightValues={["Admin"]}
+ * />
+ * ```
+ */
+export declare const SelectInput: FC<SelectInputProps>;
+//# sourceMappingURL=SelectInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../lib/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAI7C;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuF5C,CAAC"}

package/dist/components/SelectInput.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+/**
+ * SelectInput - A dropdown select component with react-hook-form integration
+ *
+ * Provides a select dropdown that works both standalone and with react-hook-form.
+ * Supports option highlighting, custom placeholder text, and automatic validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <SelectInput
+ *   name="country"
+ *   label="Country"
+ *   options={["USA", "Canada", "UK"]}
+ *   required
+ * />
+ *
+ * // Standalone mode
+ * <SelectInput
+ *   name="role"
+ *   options={["Admin", "User", "Guest"]}
+ *   value={selectedRole}
+ *   onChange={setSelectedRole}
+ *   highlightValues={["Admin"]}
+ * />
+ * ```
+ */
+export const SelectInput = ({ name, label, options = [], helpText = 'Select...', controlSize, value, onChange, disabled = false, required = false, highlightValues = [], }) => {
+    const formContext = useFormContext();
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const errorMessage = getFieldError(name);
+    const isInvalid = !!errorMessage;
+    const handleSelectChange = (event) => {
+        onChange?.(event.currentTarget.value);
+    };
+    const renderOptions = () => (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: helpText.trim() }), options.map((option) => {
+                const style = highlightValues.includes(option)
+                    ? { fontWeight: 'bold' }
+                    : {};
+                const key = option.replace(/ /g, '');
+                return (_jsx("option", { style: style, value: key, children: option.trim() }, key));
+            })] }));
+    // 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.Select, { ...field, onChange: (e) => {
+                    field.onChange(e);
+                    onChange?.(e.target.value);
+                }, required: required, size: controlSize, disabled: disabled, isInvalid: isInvalid, children: renderOptions() })) }));
+    }
+    // Standalone mode
+    return (_jsx(Form.Select, { required: required, size: controlSize, value: value || '', onChange: handleSelectChange, disabled: disabled, children: renderOptions() }));
+};

package/dist/components/SwitchInput.d.ts

@@ -0,0 +1,46 @@
+import type { FC } from 'react';
+/**
+ * Props for the SwitchInput component
+ */
+export type SwitchInputProps = {
+    /** The name of the switch input field */
+    name: string;
+    /** Label text displayed next to the switch */
+    label?: string;
+    /** Whether the switch is required */
+    required?: boolean;
+    /** Current on/off state (standalone mode) */
+    value?: boolean;
+    /** Callback function called when the switch state changes */
+    onChange?: (checked: boolean) => void;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Custom HTML id for the switch element */
+    id?: string;
+};
+/**
+ * SwitchInput - A toggle switch component with react-hook-form integration
+ *
+ * Provides a toggle switch 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
+ * <SwitchInput
+ *   name="notifications"
+ *   label="Enable notifications"
+ * />
+ *
+ * // Standalone mode
+ * <SwitchInput
+ *   name="darkMode"
+ *   label="Dark mode"
+ *   value={isDarkMode}
+ *   onChange={setIsDarkMode}
+ * />
+ * ```
+ */
+export declare const SwitchInput: FC<SwitchInputProps>;
+//# sourceMappingURL=SwitchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchInput.d.ts","sourceRoot":"","sources":["../../lib/components/SwitchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAmE5C,CAAC"}

package/dist/components/SwitchInput.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+/**
+ * SwitchInput - A toggle switch component with react-hook-form integration
+ *
+ * Provides a toggle switch 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
+ * <SwitchInput
+ *   name="notifications"
+ *   label="Enable notifications"
+ * />
+ *
+ * // Standalone mode
+ * <SwitchInput
+ *   name="darkMode"
+ *   label="Dark mode"
+ *   value={isDarkMode}
+ *   onChange={setIsDarkMode}
+ * />
+ * ```
+ */
+export const SwitchInput = ({ name, label, required = false, value, onChange, disabled = false, id, }) => {
+    const formContext = useFormContext();
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const errorMessage = getFieldError(name);
+    const inputId = id || `switch-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: "switch", label: label, checked: field.value ?? false, onChange: (e) => {
+                    const checked = e.target.checked;
+                    field.onChange(checked);
+                    onChange?.(checked);
+                }, disabled: disabled, required: required, isInvalid: !!errorMessage, feedback: errorMessage, feedbackType: "invalid" })) }));
+    }
+    // Standalone mode
+    return (_jsx(Form.Check, { id: inputId, type: "switch", label: label, checked: value ?? false, onChange: (e) => onChange?.(e.target.checked), disabled: disabled, required: required }));
+};

package/dist/components/TagsInput.d.ts

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+/**
+ * Props for the TagsInput component
+ */
+export type TagsInputProps = {
+    /** Array of current tag values */
+    value: string[];
+    /** Callback function called when tags change */
+    onChange: (value: string[]) => void;
+    /** Placeholder text shown when no tags are entered (default: "Add tags...") */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Name attribute for the input field */
+    name?: string;
+};
+/**
+ * TagsInput - A multi-tag input component using Material-UI Autocomplete
+ *
+ * Provides a tag input interface where users can add/remove multiple tags.
+ * Automatically trims whitespace and filters empty values. Tags are displayed
+ * as chips with delete functionality.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput
+ *   name="skills"
+ *   value={tags}
+ *   onChange={setTags}
+ *   placeholder="Add skills..."
+ * />
+ * ```
+ */
+export declare const TagsInput: FC<TagsInputProps>;
+//# sourceMappingURL=TagsInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,kCAAkC;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiFxC,CAAC"}

package/dist/components/TagsInput.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Autocomplete, Chip, TextField } from '@mui/material';
+/**
+ * TagsInput - A multi-tag input component using Material-UI Autocomplete
+ *
+ * Provides a tag input interface where users can add/remove multiple tags.
+ * Automatically trims whitespace and filters empty values. Tags are displayed
+ * as chips with delete functionality.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput
+ *   name="skills"
+ *   value={tags}
+ *   onChange={setTags}
+ *   placeholder="Add skills..."
+ * />
+ * ```
+ */
+export const TagsInput = ({ value = [], onChange, placeholder = 'Add tags...', disabled = false, name, }) => {
+    return (_jsx(Autocomplete, { multiple: true, freeSolo: true, options: [], value: value, onChange: (_event, newValue) => {
+            // Filter out empty strings and trim whitespace
+            const cleanedValues = newValue
+                .map((v) => (typeof v === 'string' ? v.trim() : v))
+                .filter((v) => v.length > 0);
+            onChange(cleanedValues);
+        }, disabled: disabled, renderValue: (tagValue, getTagProps) => tagValue.map((option, index) => (_createElement(Chip, { ...getTagProps({ index }), key: option, label: option, sx: {
+                backgroundColor: '#212529',
+                color: '#ffffff',
+                '& .MuiChip-deleteIcon': {
+                    color: 'rgba(255, 255, 255, 0.7)',
+                    userSelect: 'none',
+                    WebkitUserSelect: 'none',
+                    MozUserSelect: 'none',
+                    msUserSelect: 'none',
+                    pointerEvents: 'auto',
+                    '&::selection': {
+                        backgroundColor: 'transparent',
+                        color: 'transparent',
+                    },
+                    '& svg': {
+                        userSelect: 'none',
+                        WebkitUserSelect: 'none',
+                        pointerEvents: 'none',
+                    },
+                    '&:hover': {
+                        color: '#dc3545',
+                    },
+                },
+            } }))), renderInput: (params) => (_jsx(TextField, { ...params, name: name, placeholder: value.length === 0 ? placeholder : undefined, variant: "outlined", size: "small", sx: {
+                '& .MuiOutlinedInput-root': {
+                    padding: '4px',
+                    minHeight: '38px',
+                    '& fieldset': {
+                        borderColor: '#ced4da',
+                    },
+                    '&:hover fieldset': {
+                        borderColor: '#86b7fe',
+                    },
+                    '&.Mui-focused fieldset': {
+                        borderColor: '#86b7fe',
+                        borderWidth: '1px',
+                    },
+                },
+            } })) }));
+};

package/dist/components/TextAreaInput.d.ts

@@ -0,0 +1,71 @@
+import { type FC } from 'react';
+/**
+ * Props for the TextAreaInput component
+ */
+export type TextAreaInputProps = {
+    /** The name of the textarea field */
+    name: string;
+    /** Label text displayed for the textarea */
+    label?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
+    /** Size variant of the textarea control */
+    controlSize?: 'sm' | 'lg';
+    /** Placeholder text shown when textarea is empty */
+    placeholder?: string;
+    /** Controlled value of the textarea */
+    value?: string;
+    /** Callback fired when the value changes */
+    onChange?: (value: string) => void;
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Whether the textarea is read-only */
+    isReadOnly?: boolean;
+    /** Whether to render as plain text */
+    isPlainText?: boolean;
+    /** Debounce delay in milliseconds for value changes */
+    debounceMs?: number;
+};
+/**
+ * A flexible textarea input component with automatic height adjustment,
+ * react-hook-form integration, and optional debouncing.
+ *
+ * Features:
+ * - Auto-expands height based on content
+ * - Seamless integration with react-hook-form for validation
+ * - Debounced onChange callback to reduce update frequency
+ * - Built-in validation rules (required, maxLength)
+ * - Works in both controlled and standalone modes
+ *
+ * @example
+ * // Basic usage with react-hook-form
+ * <TextAreaInput
+ *   name="description"
+ *   label="Description"
+ *   required
+ *   maxLength={500}
+ *   placeholder="Enter description..."
+ * />
+ *
+ * @example
+ * // With custom onChange and debouncing
+ * <TextAreaInput
+ *   name="notes"
+ *   label="Notes"
+ *   debounceMs={300}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * @example
+ * // Standalone mode without form context
+ * <TextAreaInput
+ *   name="comment"
+ *   value={commentText}
+ *   onChange={setCommentText}
+ *   placeholder="Add your comment..."
+ * />
+ */
+export declare const TextAreaInput: FC<TextAreaInputProps>;
+//# sourceMappingURL=TextAreaInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../lib/components/TextAreaInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,EAAE,EAKP,MAAM,OAAO,CAAC;AAIf;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+HhD,CAAC"}