@capyx/components-library 0.0.2 → 0.0.4

package/README.md

@@ -1,225 +1,250 @@
-# Components Library
-
-A comprehensive React component library built with TypeScript, React 19, react-hook-form, react-bootstrap, and Material-UI (MUI).
-
-## Architecture
-
-This library follows a clear separation between **Components** and **Addons**:
-
-### Components (Base Input Types)
-
-Components are specific input elements based on HTML input types and specialized use cases:
-
-- **CheckInput** - Checkbox input for boolean values
-- **DateInput** - Date picker with formatted string output (using MUI DatePicker)
-- **FileInput** - File upload with validation and preview
-- **SelectInput** - Dropdown selection for single/multiple options
-- **SwitchInput** - Toggle switch for on/off values
-- **TagsInput** - Tag management with MUI Autocomplete
-- **TextAreaInput** - Multiline text input with auto-growing height
-- **TextInput** - Single-line text input with optional autocomplete
-
-### Addons (Enhancement Wrappers)
-
-Addons wrap existing components to add functionality:
-
-- **CharacterCountInput** - Adds character counting to text, textarea, or editor inputs
-- **EditorAddon** - Wraps TextAreaInput to add rich text editing (ReactQuill)
-- **Editor** (Legacy) - Standalone rich text editor (deprecated, use EditorAddon instead)
-
-## Features
-
-- ✅ **React 19** compatible
-- ✅ **TypeScript** with full type safety and auto-generated type declarations
-- ✅ **ESM and CommonJS** dual module support
-- ✅ **react-hook-form** integration for form state management and validation
-- ✅ **react-bootstrap** for consistent styling
-- ✅ **Material-UI (MUI)** for advanced components (DatePicker, Autocomplete)
-- ✅ Standalone or form-integrated modes
-- ✅ Consistent error handling
-- ✅ Customizable styling
-
-## Installation
-
-```bash
-npm install @capyx/components-library
-```
-
-### Peer Dependencies
-
-This library requires the following peer dependencies to be installed in your project:
-
-```bash
-npm install react react-dom react-hook-form react-bootstrap @mui/material @mui/x-date-pickers dayjs react-quill-new react-autosuggest
-```
-
-## TypeScript Support
-
-This library is written in TypeScript and includes full type definitions. Type declarations are automatically provided when you install the package, giving you:
-
-- Full IntelliSense and autocomplete in your IDE
-- Type checking for component props
-- Improved development experience with inline documentation
-
-No additional `@types` packages are needed!
-
-## Usage
-
-### Basic Component Usage
-
-```tsx
-import { TextInput, CheckInput, DateInput } from '@your-package/components-library';
-import { FormProvider, useForm } from 'react-hook-form';
-
-function MyForm() {
-  const methods = useForm();
-
-  return (
-    <FormProvider {...methods}>
-      <form>
-        <TextInput
-          name='username'
-          label='Username'
-          required
-          maxLength={50}
-        />
-
-        <CheckInput
-          name='terms'
-          label='I agree to terms'
-          required
-        />
-
-        <DateInput
-          name='birthdate'
-          label='Date of Birth'
-          required
-        />
-      </form>
-    </FormProvider>
-  );
-}
-```
-
-### Using Addons
-
-#### Character Count Addon
-
-```tsx
-import { TextInput, CharacterCountInput } from '@your-package/components-library';
-
-function MyForm() {
-  return (
-    <CharacterCountInput>
-      <TextInput
-        name='bio'
-        label='Biography'
-        maxLength={200}
-      />
-    </CharacterCountInput>
-  );
-}
-```
-
-#### Editor Addon (Rich Text)
-
-```tsx
-import { EditorAddon } from '@your-package/components-library';
-import { Controller, useFormContext } from 'react-hook-form';
-
-function MyForm() {
-  const { control } = useFormContext();
-
-  return (
-    <Controller
-      name='content'
-      control={control}
-      render={({ field }) => (
-        <EditorAddon
-          value={field.value}
-          onChange={field.onChange}
-          maxLength={5000}
-        />
-      )}
-    />
-  );
-}
-```
-
-#### Combining Addons
-
-```tsx
-import { CharacterCountInput, EditorAddon } from '@your-package/components-library';
-
-function MyForm() {
-  const [value, setValue] = useState('');
-
-  return (
-    <CharacterCountInput>
-      <EditorAddon
-        value={value}
-        onChange={setValue}
-        maxLength={1000}
-      />
-    </CharacterCountInput>
-  );
-}
-```
-
-## Component API
-
-### Common Props
-
-All components support these common props when used with react-hook-form:
-
-- `name: string` (required) - Field name for form registration
-- `label?: string` - Label text
-- `required?: boolean` - Whether the field is required
-- `disabled?: boolean` - Whether the field is disabled
-
-### Standalone Mode
-
-All components can be used without react-hook-form by providing `value` and `onChange` props:
-
-```tsx
-<TextInput
-  name='standalone'
-  value={value}
-  onChange={(newValue) => setValue(newValue)}
-/>
-```
-
-## Styling
-
-Components use react-bootstrap and MUI components, making them easy to customize:
-
-- Override Bootstrap variables for global theming
-- Use MUI theme provider for MUI components
-- Add custom className props (where supported)
-
-## TypeScript Support
-
-All components are fully typed with TypeScript. Import types as needed:
-
-```tsx
-import type { TextAreaInputProps, CheckInputProps } from '@your-package/components-library';
-```
-
-## React 19 Compatibility
-
-This library is built and tested with React 19. All components use modern React patterns:
-
-- Functional components with hooks
-- No deprecated lifecycle methods
-- No unsafe React APIs
-- Full concurrent mode support
-
-## Contributing
-
-When adding new components:
-
-1. **Components** go in `lib/components/` - base input types
-2. **Addons** go in `lib/addons/` - wrappers that enhance components
-3. All components must support both react-hook-form and standalone modes
-4. Export types alongside components
-5. Update index files for proper exports
+# Components Library
+
+A comprehensive React component library built with TypeScript, React 19, react-hook-form, react-bootstrap, and Material-UI (MUI).
+
+## Architecture
+
+This library follows a clear separation between **Components** and **Addons**:
+
+### Components (Base Input Types)
+
+Components are specific input elements based on HTML input types and specialized use cases:
+
+- **CheckInput** - Checkbox input for boolean values
+- **DateInput** - Date picker with formatted string output (using MUI DatePicker)
+- **FileInput** - File upload with validation and preview
+- **SelectInput** - Dropdown selection for single/multiple options
+- **SwitchInput** - Toggle switch for on/off values
+- **TagsInput** - Tag management with MUI Autocomplete
+- **TextAreaInput** - Multiline text input with auto-growing height
+- **TextInput** - Single-line text input for various types (text, email, password, number, etc.)
+
+### Addons (Enhancement Wrappers)
+
+Addons wrap existing components to add functionality:
+
+- **AutocompleteInput** - Adds autocomplete/suggestions dropdown to text inputs
+- **CharacterCountInput** - Adds character counting to text, textarea, or editor inputs
+- **EditorAddon** - Wraps TextAreaInput to add rich text editing (ReactQuill)
+- **Editor** (Legacy) - Standalone rich text editor (deprecated, use EditorAddon instead)
+
+## Features
+
+- ✅ **React 19** compatible
+- ✅ **TypeScript** with full type safety and auto-generated type declarations
+- ✅ **ESM and CommonJS** dual module support
+- ✅ **react-hook-form** integration for form state management and validation
+- ✅ **react-bootstrap** for consistent styling
+- ✅ **Material-UI (MUI)** for advanced components (DatePicker, Autocomplete)
+- ✅ Standalone or form-integrated modes
+- ✅ Consistent error handling
+- ✅ Customizable styling
+
+## Installation
+
+```bash
+npm install @capyx/components-library
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies to be installed in your project:
+
+```bash
+npm install react react-dom react-hook-form react-bootstrap @mui/material @mui/x-date-pickers dayjs react-quill-new react-autosuggest
+```
+
+## TypeScript Support
+
+This library is written in TypeScript and includes full type definitions. Type declarations are automatically provided when you install the package, giving you:
+
+- Full IntelliSense and autocomplete in your IDE
+- Type checking for component props
+- Improved development experience with inline documentation
+
+No additional `@types` packages are needed!
+
+## Usage
+
+### Basic Component Usage
+
+```tsx
+import { TextInput, CheckInput, DateInput } from '@your-package/components-library';
+import { FormProvider, useForm } from 'react-hook-form';
+
+function MyForm() {
+  const methods = useForm();
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <TextInput
+          name='username'
+          label='Username'
+          required
+          maxLength={50}
+        />
+
+        <CheckInput
+          name='terms'
+          label='I agree to terms'
+          required
+        />
+
+        <DateInput
+          name='birthdate'
+          label='Date of Birth'
+          required
+        />
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+### Using Addons
+
+#### Autocomplete Addon
+
+```tsx
+import { TextInput, AutocompleteInput } from '@your-package/components-library';
+
+function MyForm() {
+  const countries = ['USA', 'Canada', 'UK', 'Australia'];
+
+  return (
+    <AutocompleteInput suggestions={countries}>
+      <TextInput
+        name='country'
+        label='Country'
+        placeholder='Type to search...'
+      />
+    </AutocompleteInput>
+  );
+}
+```
+
+#### Character Count Addon
+
+```tsx
+import { TextInput, CharacterCountInput } from '@your-package/components-library';
+
+function MyForm() {
+  return (
+    <CharacterCountInput>
+      <TextInput
+        name='bio'
+        label='Biography'
+        maxLength={200}
+      />
+    </CharacterCountInput>
+  );
+}
+```
+
+#### Editor Addon (Rich Text)
+
+```tsx
+import { EditorAddon } from '@your-package/components-library';
+import { Controller, useFormContext } from 'react-hook-form';
+
+function MyForm() {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name='content'
+      control={control}
+      render={({ field }) => (
+        <EditorAddon
+          value={field.value}
+          onChange={field.onChange}
+          maxLength={5000}
+        />
+      )}
+    />
+  );
+}
+```
+
+#### Combining Addons
+
+Addons can be nested to combine their functionality:
+
+```tsx
+import { TextInput, AutocompleteInput, CharacterCountInput } from '@your-package/components-library';
+
+function MyForm() {
+  const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston'];
+
+  return (
+    <CharacterCountInput>
+      <AutocompleteInput suggestions={cities}>
+        <TextInput
+          name='city'
+          label='City'
+          maxLength={50}
+        />
+      </AutocompleteInput>
+    </CharacterCountInput>
+  );
+}
+```
+
+## Component API
+
+### Common Props
+
+All components support these common props when used with react-hook-form:
+
+- `name: string` (required) - Field name for form registration
+- `label?: string` - Label text
+- `required?: boolean` - Whether the field is required
+- `disabled?: boolean` - Whether the field is disabled
+
+### Standalone Mode
+
+All components can be used without react-hook-form by providing `value` and `onChange` props:
+
+```tsx
+<TextInput
+  name='standalone'
+  value={value}
+  onChange={(newValue) => setValue(newValue)}
+/>
+```
+
+## Styling
+
+Components use react-bootstrap and MUI components, making them easy to customize:
+
+- Override Bootstrap variables for global theming
+- Use MUI theme provider for MUI components
+- Add custom className props (where supported)
+
+## TypeScript Support
+
+All components are fully typed with TypeScript. Import types as needed:
+
+```tsx
+import type { TextAreaInputProps, CheckInputProps } from '@your-package/components-library';
+```
+
+## React 19 Compatibility
+
+This library is built and tested with React 19. All components use modern React patterns:
+
+- Functional components with hooks
+- No deprecated lifecycle methods
+- No unsafe React APIs
+- Full concurrent mode support
+
+## Contributing
+
+When adding new components:
+
+1. **Components** go in `lib/components/` - base input types
+2. **Addons** go in `lib/addons/` - wrappers that enhance components
+3. All components must support both react-hook-form and standalone modes
+4. Export types alongside components
+5. Update index files for proper exports

package/dist/addons/AutocompleteInput.d.ts

@@ -0,0 +1,40 @@
+import type { FC, PropsWithChildren } from 'react';
+/**
+ * Props for the AutocompleteInput component
+ */
+export type AutocompleteInputProps = PropsWithChildren<{
+    /** Array of suggestion values for autocomplete */
+    suggestions: string[];
+    /** Whether to highlight the first suggestion (default: true) */
+    highlightFirstSuggestion?: boolean;
+}>;
+/**
+ * AutocompleteInput - A wrapper addon that adds autocomplete/suggestions to text inputs
+ *
+ * Wraps any text input component (like TextInput) and enhances it with dropdown
+ * suggestions that filter based on user input. Works seamlessly with both standalone
+ * and react-hook-form integrated inputs.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <AutocompleteInput suggestions={["USA", "Canada", "UK"]}>
+ *   <TextInput
+ *     name="country"
+ *     label="Country"
+ *     placeholder="Type to search..."
+ *   />
+ * </AutocompleteInput>
+ *
+ * // Standalone mode
+ * <AutocompleteInput suggestions={skills}>
+ *   <TextInput
+ *     name="skill"
+ *     value={value}
+ *     onChange={setValue}
+ *   />
+ * </AutocompleteInput>
+ * ```
+ */
+export declare const AutocompleteInput: FC<AutocompleteInputProps>;
+//# sourceMappingURL=AutocompleteInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../lib/addons/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAKjF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;IACtD,kDAAkD;IAClD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,gEAAgE;IAChE,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAgHxD,CAAC"}

package/dist/addons/AutocompleteInput.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, useEffect, useRef, useState } from 'react';
+import Autosuggest from 'react-autosuggest';
+import { useFormContext } from 'react-hook-form';
+/**
+ * AutocompleteInput - A wrapper addon that adds autocomplete/suggestions to text inputs
+ *
+ * Wraps any text input component (like TextInput) and enhances it with dropdown
+ * suggestions that filter based on user input. Works seamlessly with both standalone
+ * and react-hook-form integrated inputs.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <AutocompleteInput suggestions={["USA", "Canada", "UK"]}>
+ *   <TextInput
+ *     name="country"
+ *     label="Country"
+ *     placeholder="Type to search..."
+ *   />
+ * </AutocompleteInput>
+ *
+ * // Standalone mode
+ * <AutocompleteInput suggestions={skills}>
+ *   <TextInput
+ *     name="skill"
+ *     value={value}
+ *     onChange={setValue}
+ *   />
+ * </AutocompleteInput>
+ * ```
+ */
+export const AutocompleteInput = ({ suggestions: allSuggestions, children, highlightFirstSuggestion = true, }) => {
+    const formContext = useFormContext();
+    const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+    const [inputValue, setInputValue] = useState('');
+    const nameRef = useRef('');
+    // Extract child props
+    const childElement = children;
+    const childProps = childElement?.props;
+    const name = childProps?.name || '';
+    nameRef.current = name;
+    // Sync input value with form context or child value
+    useEffect(() => {
+        if (formContext && name) {
+            const formValue = formContext.getValues(name);
+            setInputValue(formValue || '');
+        }
+        else if (childProps?.value !== undefined) {
+            setInputValue(String(childProps.value));
+        }
+    }, [formContext, name, childProps?.value]);
+    // Filter suggestions based on input value
+    const getSuggestions = (value) => {
+        const trimmedValue = value.trim().toLowerCase();
+        if (trimmedValue.length === 0)
+            return [];
+        return allSuggestions.filter((suggestion) => suggestion.toLowerCase().includes(trimmedValue));
+    };
+    const onSuggestionsFetchRequested = ({ value }) => {
+        setFilteredSuggestions(getSuggestions(value));
+    };
+    const onSuggestionsClearRequested = () => {
+        setFilteredSuggestions([]);
+    };
+    const getSuggestionValue = (suggestion) => suggestion;
+    const renderSuggestion = (suggestion) => _jsx("span", { children: suggestion });
+    const handleChange = (_event, { newValue }) => {
+        setInputValue(newValue);
+        // Update form context if available
+        if (formContext && name) {
+            formContext.setValue(name, newValue);
+        }
+        // Call child's onChange if provided
+        childProps?.onChange?.(newValue);
+    };
+    return (_jsx(Autosuggest, { suggestions: filteredSuggestions, onSuggestionsFetchRequested: onSuggestionsFetchRequested, onSuggestionsClearRequested: onSuggestionsClearRequested, getSuggestionValue: getSuggestionValue, renderSuggestion: renderSuggestion, highlightFirstSuggestion: highlightFirstSuggestion, inputProps: {
+            value: inputValue,
+            onChange: handleChange,
+        }, renderInputComponent: (inputProps) => {
+            // Clone the child element and merge with autosuggest props
+            const { value, onChange: autosuggestOnChange, ...autosuggestProps } = inputProps;
+            return cloneElement(childElement, {
+                ...autosuggestProps,
+                value,
+                onChange: (newValue) => {
+                    // Handle both event objects and direct values
+                    const actualValue = typeof newValue === 'string'
+                        ? newValue
+                        : newValue?.target
+                            ?.value || '';
+                    // Create synthetic event for Autosuggest
+                    const syntheticEvent = {};
+                    autosuggestOnChange?.(syntheticEvent, {
+                        newValue: actualValue,
+                        method: 'type',
+                    });
+                },
+            });
+        } }));
+};

package/dist/addons/index.d.ts

@@ -1,3 +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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/addons/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"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

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

package/dist/components/RichTextInput.js

@@ -52,6 +52,6 @@ export const RichTextInput = ({ readonly = false, maxLength, value = '', onChang
                 [{ list: 'ordered' }, { list: 'bullet' }],
             ],
     };
-    const formats = ['header', 'bold', 'italic', 'underline', 'list', 'bullet'];
+    const formats = ['header', 'bold', 'color', 'italic', 'link', 'strike', 'script', 'underline', 'list', 'code', 'blockquote', 'code-block'];
     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/TextInput.d.ts

@@ -1,64 +1,51 @@
-import { type FC, type ReactElement } from 'react';
+import type { FC } from 'react';
 /**
  * Props for the TextInput component
  */
 export type TextInputProps = {
     /** The name of the text input field */
-    name?: string;
+    name: string;
     /** Label text displayed for the input */
     label?: string;
     /** HTML input type (default: "text") */
     type?: string;
-    /** Minimum value for number/date inputs */
-    min?: string | number;
-    /** Maximum value for number/date inputs */
-    max?: string | number;
-    /** Whether the field is required */
-    required?: boolean;
-    /** Maximum number of characters allowed */
-    maxLength?: number;
-    /** Size variant of the input control */
-    controlSize?: 'sm' | 'lg' | undefined;
     /** Placeholder text shown when input is empty */
     placeholder?: string;
-    /** Controlled field value */
-    fieldValue?: string | number | Date | boolean | undefined;
-    /** Callback to update field value */
-    setFieldValue?: (value: string | number | Date | boolean | undefined) => void;
-    /** Callback to save/persist field value */
-    saveFieldvalue?: (value: string | number | Date | boolean | undefined) => void;
+    /** Size of the input control */
+    size?: 'sm' | 'lg';
+    /** Current input value (standalone mode) */
+    value?: string | number;
+    /** Callback function called when the input value changes */
+    onChange?: (value: string) => void;
+    /** Callback function called when the input loses focus */
+    onBlur?: () => void;
+    /** Whether the field is required */
+    required?: boolean;
     /** Whether the input is disabled */
     disabled?: boolean;
     /** Whether the input is read-only */
-    isReadOnly?: boolean;
+    readOnly?: boolean;
     /** Whether to render as plain text */
-    isPlainText?: boolean;
+    plainText?: boolean;
+    /** Minimum value for number inputs */
+    min?: string | number;
+    /** Maximum value for number inputs */
+    max?: string | number;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
     /** Regex pattern for validation */
     pattern?: string;
-    /** Icon element to display in the input group */
-    icon?: ReactElement | null;
-    /** Enable autocomplete/suggestions functionality */
-    shouldAutoComplete?: boolean;
-    /** Array of suggestion values for autocomplete */
-    values?: string[];
-    /** Debounce delay in milliseconds for value changes */
-    debounceMs?: number;
 };
 /**
- * A versatile text input component with support for react-hook-form integration,
- * autocomplete suggestions, debouncing, and various input types.
+ * TextInput - A text input component with react-hook-form integration
  *
- * Features:
- * - Seamless integration with react-hook-form for validation and state management
- * - Autocomplete with suggestion filtering when enabled
- * - Debounced value updates to reduce callback frequency
- * - Support for various input types (text, number, email, tel, etc.)
- * - Built-in validation rules (required, min, max, maxLength, pattern)
- * - Icon support for enhanced UI
- * - Automatic phone number formatting for tel type
+ * Provides a text input that works both standalone and with react-hook-form.
+ * Supports various input types (text, number, email, tel, password, etc.) and
+ * automatic validation.
  *
  * @example
- * // Basic usage with react-hook-form
+ * ```tsx
+ * // With react-hook-form
  * <TextInput
  *   name="email"
  *   label="Email Address"
@@ -67,23 +54,15 @@ export type TextInputProps = {
  *   placeholder="Enter your email"
  * />
  *
- * @example
- * // With autocomplete suggestions
- * <TextInput
- *   name="country"
- *   label="Country"
- *   shouldAutoComplete
- *   values={["USA", "Canada", "Mexico"]}
- * />
- *
- * @example
- * // With debouncing and custom callbacks
+ * // Standalone mode
  * <TextInput
- *   name="search"
- *   placeholder="Search..."
- *   debounceMs={300}
- *   setFieldValue={handleSearch}
+ *   name="username"
+ *   label="Username"
+ *   value={username}
+ *   onChange={setUsername}
+ *   maxLength={50}
  * />
+ * ```
  */
 export declare const TextInput: FC<TextInputProps>;
 //# sourceMappingURL=TextInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../lib/components/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,EAAE,EACP,KAAK,YAAY,EAKjB,MAAM,OAAO,CAAC;AAWf;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1D,qCAAqC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9E,2CAA2C;IAC3C,cAAc,CAAC,EAAE,CAChB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,SAAS,KAC/C,IAAI,CAAC;IACV,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA+QxC,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../lib/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAI7C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA6GxC,CAAC"}

package/dist/components/TextInput.js

@@ -1,25 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import debounce from 'lodash.debounce';
-import { useEffect, useRef, useState, } from 'react';
-import Autosuggest from 'react-autosuggest';
-import { Form, InputGroup } from 'react-bootstrap';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form } from 'react-bootstrap';
 import { Controller, useFormContext } from 'react-hook-form';
-const formatSpaces = (value) => value.replace(/(?<=[A-Z])(?![0-9]+)(?=[A-Z][a-z])|(?<=[^A-Z])(?![0-9]+)(?=[A-Z])|(?<=[A-Za-z])(?![0-9]+)(?=[^A-Za-z])/g, ' ');
 /**
- * A versatile text input component with support for react-hook-form integration,
- * autocomplete suggestions, debouncing, and various input types.
+ * TextInput - A text input component with react-hook-form integration
  *
- * Features:
- * - Seamless integration with react-hook-form for validation and state management
- * - Autocomplete with suggestion filtering when enabled
- * - Debounced value updates to reduce callback frequency
- * - Support for various input types (text, number, email, tel, etc.)
- * - Built-in validation rules (required, min, max, maxLength, pattern)
- * - Icon support for enhanced UI
- * - Automatic phone number formatting for tel type
+ * Provides a text input that works both standalone and with react-hook-form.
+ * Supports various input types (text, number, email, tel, password, etc.) and
+ * automatic validation.
  *
  * @example
- * // Basic usage with react-hook-form
+ * ```tsx
+ * // With react-hook-form
  * <TextInput
  *   name="email"
  *   label="Email Address"
@@ -28,107 +19,34 @@ const formatSpaces = (value) => value.replace(/(?<=[A-Z])(?![0-9]+)(?=[A-Z][a-z]
  *   placeholder="Enter your email"
  * />
  *
- * @example
- * // With autocomplete suggestions
- * <TextInput
- *   name="country"
- *   label="Country"
- *   shouldAutoComplete
- *   values={["USA", "Canada", "Mexico"]}
- * />
- *
- * @example
- * // With debouncing and custom callbacks
+ * // Standalone mode
  * <TextInput
- *   name="search"
- *   placeholder="Search..."
- *   debounceMs={300}
- *   setFieldValue={handleSearch}
+ *   name="username"
+ *   label="Username"
+ *   value={username}
+ *   onChange={setUsername}
+ *   maxLength={50}
  * />
+ * ```
  */
-export const TextInput = ({ name, label, type = 'text', min, max, required, maxLength, controlSize, placeholder, fieldValue, setFieldValue, saveFieldvalue, disabled, isReadOnly, isPlainText, pattern, icon, shouldAutoComplete, values = [], debounceMs, }) => {
+export const TextInput = ({ name, label, type = 'text', placeholder, size, value, onChange, onBlur, required = false, disabled = false, readOnly = false, plainText = false, min, max, maxLength, pattern, }) => {
     const formContext = useFormContext();
-    // Create refs for debounced functions to clean up on unmount
-    const debouncedSetFieldValueRef = useRef(null);
-    const debouncedSaveFieldValueRef = useRef(null);
-    // Create debounced versions of callbacks if debounceMs is provided
-    useEffect(() => {
-        if (debounceMs && setFieldValue) {
-            debouncedSetFieldValueRef.current = debounce(setFieldValue, debounceMs);
-        }
-        if (debounceMs && saveFieldvalue) {
-            debouncedSaveFieldValueRef.current = debounce(saveFieldvalue, debounceMs);
+    // Helper to safely get nested error
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
         }
-        // Cleanup on unmount
-        return () => {
-            debouncedSetFieldValueRef.current?.cancel();
-            debouncedSaveFieldValueRef.current?.cancel();
-        };
-    }, [debounceMs, setFieldValue, saveFieldvalue]);
-    const fieldError = formContext && name ? formContext.formState.errors[name] : null;
-    const isInvalid = !!fieldError;
-    const [suggestions, setSuggestions] = useState([]);
-    const getSuggestions = (value) => {
-        const inputValue = value.trim().toLowerCase();
-        const inputLength = inputValue.length;
-        return inputLength === 0
-            ? []
-            : values.filter((v) => v.trim().toLowerCase().indexOf(inputValue) > -1);
-    };
-    const onChange = (_event, { newValue }) => {
-        if (debounceMs) {
-            if (debouncedSetFieldValueRef.current)
-                debouncedSetFieldValueRef.current(newValue);
-            if (debouncedSaveFieldValueRef.current)
-                debouncedSaveFieldValueRef.current(newValue);
-        }
-        else {
-            if (setFieldValue)
-                setFieldValue(newValue);
-            if (saveFieldvalue)
-                saveFieldvalue(newValue);
+        catch {
+            return undefined;
         }
     };
-    const defaultOnChange = async (event) => {
-        if (type === 'tel') {
-            const nativeEvent = event.nativeEvent;
-            const isPasted = nativeEvent.inputType?.startsWith('insertFromPaste');
-            if (isPasted) {
-                const pasted = event.currentTarget.value;
-                const formatted = pasted.replace(/[./]/g, ' ');
-                event.currentTarget.value = formatted;
-            }
-        }
-        if (setFieldValue)
-            setFieldValue(event.currentTarget.value);
-        if (saveFieldvalue)
-            saveFieldvalue(event.currentTarget.value);
+    const errorMessage = getFieldError(name);
+    const handleTextChange = (event) => {
+        onChange?.(event.currentTarget.value);
     };
-    let processedFieldValue = fieldValue;
-    if (label && label === 'Profile') {
-        processedFieldValue = formatSpaces(fieldValue);
-    }
-    if (formContext && name) {
-        // With react-hook-form Controller
-        if (shouldAutoComplete && values?.length > 0) {
-            return (_jsx(Autosuggest, { suggestions: suggestions, onSuggestionsFetchRequested: ({ value }) => {
-                    const newSuggestions = getSuggestions(value);
-                    setSuggestions(newSuggestions);
-                }, onSuggestionsClearRequested: () => setSuggestions([]), getSuggestionValue: (item) => item, renderSuggestion: (suggestion) => (_jsx("span", { children: suggestion }, suggestion)), highlightFirstSuggestion: true, inputProps: {
-                    value: String(processedFieldValue || ''),
-                    onChange: (_event, { newValue }) => {
-                        if (formContext && name) {
-                            formContext.setValue(name, newValue);
-                        }
-                        if (setFieldValue)
-                            setFieldValue(newValue);
-                        if (saveFieldvalue)
-                            saveFieldvalue(newValue);
-                    },
-                }, renderInputComponent: ({ value, onChange, ...props }) => (_jsxs(InputGroup, { children: [icon && _jsx(InputGroup.Text, { children: icon }), _jsx(Form.Control, { type: type, 
-                            // biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-                            size: controlSize, min: min ?? undefined, max: max ?? undefined, required: required ?? false, maxLength: maxLength ?? undefined, placeholder: placeholder ?? undefined, value: value, onChange: onChange, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, pattern: pattern, isInvalid: isInvalid, ...props })] })) }));
-        }
+    // Integrated with react-hook-form
+    if (formContext) {
         return (_jsx(Controller, { name: name, control: formContext.control, rules: {
                 required: required ? `${label || 'This field'} is required` : false,
                 maxLength: maxLength
@@ -146,32 +64,14 @@ export const TextInput = ({ name, label, type = 'text', min, max, required, maxL
                 pattern: pattern
                     ? { value: new RegExp(pattern), message: 'Invalid format' }
                     : undefined,
-            }, render: ({ field: { value, ...field } }) => (_jsx(Form.Control, { ...field, value: value ?? '', type: type, 
-                // biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-                size: controlSize, min: min ?? undefined, max: max ?? undefined, required: required ?? false, maxLength: maxLength ?? undefined, placeholder: placeholder ?? undefined, onChange: (e) => {
+            }, render: ({ field }) => (_jsx(Form.Control, { ...field, value: field.value ?? '', type: type, size: size, min: min, max: max, required: required, maxLength: maxLength, placeholder: placeholder, onChange: (e) => {
                     field.onChange(e);
-                    if (setFieldValue)
-                        setFieldValue(e.target.value);
-                    if (saveFieldvalue)
-                        saveFieldvalue(e.target.value);
-                }, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, pattern: pattern, isInvalid: isInvalid })) }));
-    }
-    // Without react-hook-form (fallback)
-    if (shouldAutoComplete && values?.length > 0) {
-        return (_jsx(Autosuggest, { suggestions: suggestions, onSuggestionsFetchRequested: ({ value }) => {
-                const newSuggestions = getSuggestions(value);
-                setSuggestions(newSuggestions);
-            }, onSuggestionsClearRequested: () => setSuggestions([]), getSuggestionValue: (item) => item, renderSuggestion: (suggestion) => (_jsx("span", { children: suggestion }, suggestion)), highlightFirstSuggestion: true, inputProps: {
-                value: String(processedFieldValue || ''),
-                onChange,
-            }, renderInputComponent: (inputProps) => {
-                const { value, onChange, ...props } = inputProps;
-                return (_jsxs(InputGroup, { children: [icon && _jsx(InputGroup.Text, { children: icon }), _jsx(Form.Control, { type: type, 
-                            // biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-                            size: controlSize, min: min ?? undefined, max: max ?? undefined, required: required ?? false, maxLength: maxLength ?? undefined, placeholder: placeholder ?? undefined, value: String(value || ''), onChange: onChange, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, pattern: pattern, ...props })] }));
-            } }));
+                    onChange?.(e.target.value);
+                }, onBlur: () => {
+                    field.onBlur();
+                    onBlur?.();
+                }, disabled: disabled, readOnly: readOnly, plaintext: plainText, pattern: pattern, isInvalid: !!errorMessage })) }));
     }
-    return (_jsx(Form.Control, { type: type, 
-        // biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-        size: controlSize, min: min ?? undefined, max: max ?? undefined, required: required ?? false, maxLength: maxLength ?? undefined, placeholder: placeholder ?? undefined, onChange: defaultOnChange, value: processedFieldValue, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, pattern: pattern }));
+    // Standalone mode (no form context)
+    return (_jsx(Form.Control, { type: type, size: size, min: min, max: max, required: required, maxLength: maxLength, placeholder: placeholder, value: value ?? '', onChange: handleTextChange, onBlur: onBlur, disabled: disabled, readOnly: readOnly, plaintext: plainText, pattern: pattern }));
 };

package/package.json

@@ -1,87 +1,87 @@
-{
-	"name": "@capyx/components-library",
-	"version": "0.0.2",
-	"description": "Capyx Components Library for forms across applications",
-	"publishConfig": {
-		"access": "public"
-	},
-	"keywords": [
-		"components",
-		"library",
-		"typescript"
-	],
-	"homepage": "https://gitlab.com/capyx/rmt/components-library#readme",
-	"bugs": {
-		"url": "https://gitlab.com/capyx/rmt/components-library/issues"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+ssh://git@gitlab.com/capyx/rmt/components-library.git"
-	},
-	"author": "tinael.devresse@capyx.be",
-	"type": "module",
-	"main": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js",
-			"require": "./dist/index.cjs"
-		}
-	},
-	"files": [
-		"dist",
-		"README.md"
-	],
-	"directories": {
-		"lib": "lib"
-	},
-	"scripts": {
-		"build": "tsc && npm run build:cjs",
-		"build:cjs": "tsc --module commonjs --outDir dist-cjs && node scripts/rename-cjs.js",
-		"prepublishOnly": "npm run build",
-		"lint": "biome lint .",
-		"lint:fix": "biome lint --write .",
-		"format": "biome format .",
-		"format:fix": "biome format --write .",
-		"check": "biome check .",
-		"check:fix": "biome check --write .",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.3.11",
-		"@chromatic-com/storybook": "^5.0.0",
-		"@storybook/addon-a11y": "^10.1.11",
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/addon-onboarding": "^10.1.11",
-		"@storybook/addon-vitest": "^10.1.11",
-		"@storybook/react-vite": "^10.1.11",
-		"@types/dateformat": "^5.0.3",
-		"@types/lodash.debounce": "^4.0.9",
-		"@types/node": "^25.0.9",
-		"@types/react": "^19.2.8",
-		"@types/react-autosuggest": "^10.1.11",
-		"@types/react-datepicker": "^7.0.0",
-		"@vitest/browser-playwright": "^4.0.17",
-		"@vitest/coverage-v8": "^4.0.17",
-		"playwright": "^1.57.0",
-		"storybook": "^10.1.11",
-		"typescript": "^5.9.3",
-		"vitest": "^4.0.17"
-	},
-	"dependencies": {
-		"@emotion/styled": "^11.14.1",
-		"@mui/material": "^7.3.7",
-		"@mui/x-date-pickers": "^8.25.0",
-		"bootstrap": "^5.3.8",
-		"dateformat": "^5.0.3",
-		"dayjs": "^1.11.19",
-		"lodash.debounce": "^4.0.8",
-		"react": "^19.2.3",
-		"react-autosuggest": "^10.1.0",
-		"react-bootstrap": "^2.10.10",
-		"react-hook-form": "^7.71.1",
-		"react-quill-new": "^3.7.0"
-	}
-}
+{
+	"name": "@capyx/components-library",
+	"version": "0.0.4",
+	"description": "Capyx Components Library for forms across applications",
+	"publishConfig": {
+		"access": "public"
+	},
+	"keywords": [
+		"components",
+		"library",
+		"typescript"
+	],
+	"homepage": "https://gitlab.com/capyx/rmt/components-library#readme",
+	"bugs": {
+		"url": "https://gitlab.com/capyx/rmt/components-library/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+ssh://git@gitlab.com/capyx/rmt/components-library.git"
+	},
+	"author": "tinael.devresse@capyx.be",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"directories": {
+		"lib": "lib"
+	},
+	"scripts": {
+		"build": "tsc && npm run build:cjs",
+		"build:cjs": "tsc --module commonjs --outDir dist-cjs && node scripts/rename-cjs.js",
+		"prepublishOnly": "npm run build",
+		"lint": "biome lint .",
+		"lint:fix": "biome lint --write .",
+		"format": "biome format .",
+		"format:fix": "biome format --write .",
+		"check": "biome check .",
+		"check:fix": "biome check --write .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.3.11",
+		"@chromatic-com/storybook": "^5.0.0",
+		"@storybook/addon-a11y": "^10.1.11",
+		"@storybook/addon-docs": "^10.1.11",
+		"@storybook/addon-onboarding": "^10.1.11",
+		"@storybook/addon-vitest": "^10.1.11",
+		"@storybook/react-vite": "^10.1.11",
+		"@types/dateformat": "^5.0.3",
+		"@types/lodash.debounce": "^4.0.9",
+		"@types/node": "^25.0.9",
+		"@types/react": "^19.2.8",
+		"@types/react-autosuggest": "^10.1.11",
+		"@types/react-datepicker": "^7.0.0",
+		"@vitest/browser-playwright": "^4.0.17",
+		"@vitest/coverage-v8": "^4.0.17",
+		"playwright": "^1.57.0",
+		"storybook": "^10.1.11",
+		"typescript": "^5.9.3",
+		"vitest": "^4.0.17"
+	},
+	"dependencies": {
+		"@emotion/styled": "^11.14.1",
+		"@mui/material": "^7.3.7",
+		"@mui/x-date-pickers": "^8.25.0",
+		"bootstrap": "^5.3.8",
+		"dateformat": "^5.0.3",
+		"dayjs": "^1.11.19",
+		"lodash.debounce": "^4.0.8",
+		"react": "^19.2.3",
+		"react-autosuggest": "^10.1.0",
+		"react-bootstrap": "^2.10.10",
+		"react-hook-form": "^7.71.1",
+		"react-quill-new": "^3.7.0"
+	}
+}