@capyx/components-library 0.0.17 → 0.0.19

package/README.md

@@ -176,11 +176,11 @@ function MyForm() {
 
 By default the editor has no maximum height. In a constrained context — such as a Bootstrap `Modal` — you want the editor to grow until the modal fills the viewport, then scroll inside the editor instead of overflowing the page.
 
-Three things are required:
+Use the `constrainHeight` prop together with a `style` that sets the height. Three things are required:
 
 1. **`<Modal scrollable>`** — Bootstrap caps the modal body at the available viewport height.
 2. **`d-flex flex-column overflow-hidden` on `<Modal.Body>`** — turns the body into a flex column that constrains its children to the available height.
-3. **`style={{ flex: 1, minHeight: 0 }}` on `<RichTextInput>`** — `flex: 1` fills the remaining space; `minHeight: 0` is required in a flex context so the wrapper can shrink below its natural size and pass the overflow constraint down to Quill.
+3. **`constrainHeight` + `style={{ flex: 1, minHeight: 0 }}` on `<RichTextInput>`** — `constrainHeight` activates the CSS flex chain through Quill's internal DOM nodes; `flex: 1` fills the remaining space; `minHeight: 0` is required in a flex context so the wrapper can shrink below its natural size.
 
 ```tsx
 import { RichTextInput } from '@your-package/components-library';
@@ -200,6 +200,7 @@ function MyModal({ show, onHide }) {
         <RichTextInput
           value={content}
           onChange={setContent}
+          constrainHeight
           {/* flex:1 fills remaining space; minHeight:0 enables overflow */}
           style={{ flex: 1, minHeight: 0 }}
         />
@@ -226,6 +227,59 @@ function MyModal({ show, onHide }) {
 | `formats` | `FormatType[]` | `['header','bold','italic','underline','list']` | Allowed Quill formats |
 | `style` | `CSSProperties` | — | Inline styles on the outer wrapper `div`. Use to constrain height in a flex context |
 | `wrapperClassName` | `string` | — | Extra CSS class names on the outer wrapper `div` |
+| `constrainHeight` | `boolean` | `false` | Activates internal flex chain so the editor scrolls inside itself. Requires a height to be set via `style` (e.g. `style={{ flex: 1, minHeight: 0 }}` or `style={{ height: '40vh' }}`) |
+
+### TextAreaInput
+
+`TextAreaInput` is a multiline text input that **auto-grows with its content** using a row-counting approach. There are no inline `style` height overrides, so consumers can freely customise appearance with plain CSS.
+
+#### Basic usage
+
+```tsx
+import { TextAreaInput } from '@capyx/components-library';
+import { FormProvider, useForm } from 'react-hook-form';
+
+function MyForm() {
+  const methods = useForm();
+  return (
+    <FormProvider {...methods}>
+      <TextAreaInput name="notes" label="Notes" placeholder="Enter notes…" />
+    </FormProvider>
+  );
+}
+```
+
+#### Controlling row height
+
+```tsx
+{/* Starts at 5 rows, grows without limit */}
+<TextAreaInput name="bio" label="Biography" minRows={5} />
+
+{/* Starts at 2 rows, scrolls internally after 8 rows */}
+<TextAreaInput name="summary" label="Summary" maxRows={8} />
+
+{/* Fixed band: always between 3 and 6 rows */}
+<TextAreaInput name="notes" label="Notes" minRows={3} maxRows={6} />
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `name` | `string` | — | Field name for form registration |
+| `label` | `string` | — | Label text |
+| `required` | `boolean` | `false` | Marks the field as required |
+| `maxLength` | `number` | — | Maximum number of characters allowed |
+| `placeholder` | `string` | — | Placeholder text |
+| `value` | `string` | — | Controlled value (standalone mode) |
+| `onChange` | `(value: string) => void` | — | Change callback |
+| `disabled` | `boolean` | `false` | Disables the field |
+| `isReadOnly` | `boolean` | `false` | Makes the field read-only |
+| `isPlainText` | `boolean` | `false` | Renders as plain text (no border) |
+| `controlSize` | `'sm' \| 'lg'` | — | Bootstrap size variant |
+| `debounceMs` | `number` | — | Debounce delay in milliseconds for `onChange` |
+| `minRows` | `number` | `2` | Minimum number of visible rows |
+| `maxRows` | `number` | — | Maximum rows before the textarea scrolls internally. Unset = grows without limit |
 
 ### Using Addons
 

package/dist/components/TagsInput.d.ts

@@ -3,6 +3,22 @@ import { type FC } from 'react';
  * Props for the TagsInput component
  */
 export type TagsInputProps = {
+    chipStyle?: {
+        backgroundColor?: string;
+        borderColor?: string;
+        color?: string;
+        hoverBackgroundColor?: string;
+        hoverBorderColor?: string;
+        hoverColor?: string;
+        deleteIconColor?: string;
+        deleteIconHoverColor?: string;
+    };
+    inputStyle?: {
+        borderColor?: string;
+        errorBorderColor?: string;
+        hoverBorderColor?: string;
+        focusBorderColor?: string;
+    };
     /** Field name — required for form integration and the hidden native input */
     name: string;
     /** Array of current tag values */
@@ -37,16 +53,44 @@ export type TagsInputProps = {
  *   constraint validation (`required` attribute), making it compatible with
  *   any form library that relies on `checkValidity()` / `reportValidity()`.
  *
+ * ## Customization
+ *
+ * - `chipStyle`: Minimal style customization for all chips. Only the following keys are supported:
+ *   - backgroundColor
+ *   - borderColor
+ *   - color
+ *   - hoverBackgroundColor
+ *   - hoverBorderColor
+ *   - hoverColor
+ *   - deleteIconColor
+ *   - deleteIconHoverColor
+ * - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
+ *   - borderColor
+ *   - errorBorderColor
+ *   - hoverBorderColor
+ *   - focusBorderColor
+ *
  * @example
  * ```tsx
  * <TagsInput
  *   name="skills"
  *   value={tags}
  *   onChange={setTags}
- *   placeholder="Add skills..."
  *   required
- *   min={1}
- *   max={5}
+ *   chipStyle={{
+ *     backgroundColor: tagsError ? '#ffeaea' : '#212529',
+ *     borderColor: tagsError ? '#ff4d4f' : '#212529',
+ *     color: tagsError ? '#ff4d4f' : '#fff',
+ *     hoverBackgroundColor: tagsError ? '#ffd6d6' : '#343a40',
+ * 	   hoverBorderColor: tagsError ? '#ff4d4f' : '#343a40',
+ *  	 hoverColor: tagsError ? '#ff4d4f' : '#fff',
+ *   }}
+ *   inputStyle={{
+ *     borderColor: '#ced4da',
+ *     errorBorderColor: '#ff4d4f',
+ *     hoverBorderColor: '#86b7fe',
+ *     focusBorderColor: '#1976d2',
+ *   }}
  * />
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA2OxC,CAAC"}
+{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,SAAS,CAAC,EAAE;QACX,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;IACF,UAAU,CAAC,EAAE;QACZ,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA4QxC,CAAC"}

package/dist/components/TagsInput.js

@@ -18,20 +18,48 @@ import { Controller, useFormContext } from 'react-hook-form';
  *   constraint validation (`required` attribute), making it compatible with
  *   any form library that relies on `checkValidity()` / `reportValidity()`.
  *
+ * ## Customization
+ *
+ * - `chipStyle`: Minimal style customization for all chips. Only the following keys are supported:
+ *   - backgroundColor
+ *   - borderColor
+ *   - color
+ *   - hoverBackgroundColor
+ *   - hoverBorderColor
+ *   - hoverColor
+ *   - deleteIconColor
+ *   - deleteIconHoverColor
+ * - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
+ *   - borderColor
+ *   - errorBorderColor
+ *   - hoverBorderColor
+ *   - focusBorderColor
+ *
  * @example
  * ```tsx
  * <TagsInput
  *   name="skills"
  *   value={tags}
  *   onChange={setTags}
- *   placeholder="Add skills..."
  *   required
- *   min={1}
- *   max={5}
+ *   chipStyle={{
+ *     backgroundColor: tagsError ? '#ffeaea' : '#212529',
+ *     borderColor: tagsError ? '#ff4d4f' : '#212529',
+ *     color: tagsError ? '#ff4d4f' : '#fff',
+ *     hoverBackgroundColor: tagsError ? '#ffd6d6' : '#343a40',
+ * 	   hoverBorderColor: tagsError ? '#ff4d4f' : '#343a40',
+ *  	 hoverColor: tagsError ? '#ff4d4f' : '#fff',
+ *   }}
+ *   inputStyle={{
+ *     borderColor: '#ced4da',
+ *     errorBorderColor: '#ff4d4f',
+ *     hoverBorderColor: '#86b7fe',
+ *     focusBorderColor: '#1976d2',
+ *   }}
  * />
  * ```
  */
-export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder = 'Add tags...', disabled = false, required = false, label, min, max, }) => {
+export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder = 'Add tags...', disabled = false, required = false, label, min, max, chipStyle, inputStyle, }) => {
     const formContext = useFormContext();
     const nativeInputRef = useRef(null);
     const fieldLabel = label || 'This field';
@@ -91,11 +119,31 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
         }
         return cleaned;
     };
-    const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) => (_createElement(Chip, { ...getTagProps({ index }), key: option, label: option, sx: {
+    const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) => {
+        const baseChipSx = {
             backgroundColor: '#212529',
             color: '#ffffff',
+            border: '1px solid transparent',
+            ...(chipStyle?.backgroundColor && {
+                backgroundColor: chipStyle.backgroundColor,
+            }),
+            ...(chipStyle?.borderColor && {
+                borderColor: chipStyle.borderColor,
+                border: `1px solid ${chipStyle.borderColor}`,
+            }),
+            ...(chipStyle?.color && { color: chipStyle.color }),
+            '&:hover': {
+                ...(chipStyle?.hoverBackgroundColor && {
+                    backgroundColor: chipStyle.hoverBackgroundColor,
+                }),
+                ...(chipStyle?.hoverBorderColor && {
+                    borderColor: chipStyle.hoverBorderColor,
+                    border: `1px solid ${chipStyle.hoverBorderColor}`,
+                }),
+                ...(chipStyle?.hoverColor && { color: chipStyle.hoverColor }),
+            },
             '& .MuiChip-deleteIcon': {
-                color: 'rgba(255, 255, 255, 0.7)',
+                color: chipStyle?.deleteIconColor || 'rgba(255, 255, 255, 0.7)',
                 userSelect: 'none',
                 WebkitUserSelect: 'none',
                 MozUserSelect: 'none',
@@ -111,26 +159,34 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
                     pointerEvents: 'none',
                 },
                 '&:hover': {
-                    color: '#dc3545',
+                    color: chipStyle?.deleteIconHoverColor || '#dc3545',
                 },
             },
-        } })));
-    const inputSx = (hasError) => ({
-        '& .MuiOutlinedInput-root': {
-            padding: '4px',
-            minHeight: '38px',
-            '& fieldset': {
-                borderColor: hasError ? '#dc3545' : '#ced4da',
-            },
-            '&:hover fieldset': {
-                borderColor: hasError ? '#dc3545' : '#86b7fe',
-            },
-            '&.Mui-focused fieldset': {
-                borderColor: hasError ? '#dc3545' : '#86b7fe',
-                borderWidth: '1px',
-            },
-        },
+        };
+        return (_createElement(Chip, { ...getTagProps({ index }), key: option, label: option, sx: baseChipSx }));
     });
+    const inputSx = (hasError) => {
+        const borderColor = inputStyle?.borderColor || '#ced4da';
+        const errorBorderColor = inputStyle?.errorBorderColor || '#dc3545';
+        const hoverBorderColor = inputStyle?.hoverBorderColor || '#86b7fe';
+        const focusBorderColor = inputStyle?.focusBorderColor || '#86b7fe';
+        return {
+            '& .MuiOutlinedInput-root': {
+                padding: '4px',
+                minHeight: '38px',
+                '& fieldset': {
+                    borderColor: hasError ? errorBorderColor : borderColor,
+                },
+                '&:hover fieldset': {
+                    borderColor: hasError ? errorBorderColor : hoverBorderColor,
+                },
+                '&.Mui-focused fieldset': {
+                    borderColor: hasError ? errorBorderColor : focusBorderColor,
+                    borderWidth: '1px',
+                },
+            },
+        };
+    };
     // ── react-hook-form mode ──────────────────────────────────────────────
     if (formContext) {
         const errorMessage = getFieldError(name);

package/dist/components/TextAreaInput.css

@@ -0,0 +1,6 @@
+/* Applied via className on every TextAreaInput <Form.Control>.
+   Using a stylesheet rule (not an inline style) so consumers can override
+   with normal CSS specificity — no !important required. */
+.rhi-textarea-input {
+	resize: none;
+}

package/dist/components/TextAreaInput.d.ts

@@ -1,4 +1,5 @@
 import { type FC } from 'react';
+import './TextAreaInput.css';
 /**
  * Props for the TextAreaInput component
  */
@@ -27,6 +28,16 @@ export type TextAreaInputProps = {
     isPlainText?: boolean;
     /** Debounce delay in milliseconds for value changes */
     debounceMs?: number;
+    /**
+     * Minimum number of visible rows.
+     * @default 2
+     */
+    minRows?: number;
+    /**
+     * Maximum number of visible rows before the textarea scrolls internally.
+     * When unset the textarea grows without any row cap.
+     */
+    maxRows?: number;
 };
 /**
  * A flexible textarea input component with automatic height adjustment,

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

@@ -1 +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"}
+{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../lib/components/TextAreaInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,EAAE,EAKP,MAAM,OAAO,CAAC;AAGf,OAAO,qBAAqB,CAAC;AAE7B;;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;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAyIhD,CAAC"}

package/dist/components/TextAreaInput.js

@@ -3,7 +3,8 @@ import debounce from 'lodash.debounce';
 import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { Form } from 'react-bootstrap';
 import { Controller, useFormContext } from 'react-hook-form';
-const MIN_TEXTAREA_HEIGHT = 32;
+import './TextAreaInput.css';
+const MIN_ROWS = 2;
 /**
  * A flexible textarea input component with automatic height adjustment,
  * react-hook-form integration, and optional debouncing.
@@ -43,7 +44,8 @@ const MIN_TEXTAREA_HEIGHT = 32;
  *   placeholder="Add your comment..."
  * />
  */
-export const TextAreaInput = ({ name, label, required = false, maxLength, controlSize, placeholder, value, onChange, disabled = false, isReadOnly = false, isPlainText = false, debounceMs, }) => {
+export const TextAreaInput = ({ name, label, required = false, maxLength, controlSize, placeholder, value, onChange, disabled = false, isReadOnly = false, isPlainText = false, debounceMs, minRows, maxRows, }) => {
+    const resolvedMinRows = minRows ?? MIN_ROWS;
     const formContext = useFormContext();
     // Create ref for debounced onChange to clean up on unmount
     const debouncedOnChangeRef = useRef(null);
@@ -78,17 +80,27 @@ export const TextAreaInput = ({ name, label, required = false, maxLength, contro
     const errorMessage = getFieldError(name);
     const isInvalid = !!errorMessage;
     const textareaRef = useRef(null);
-    const [_textAreaValue, setTextAreaValue] = useState('');
+    const [rowCount, setRowCount] = useState(resolvedMinRows);
     const _handleTextAreaChange = (event) => {
-        setTextAreaValue(event.target.value);
         handleChange(event.target.value);
     };
+    // Runs after every render (no dep-array) so it reacts to any value change,
+    // including programmatic resets (e.g. react-hook-form reset()).
+    // Guards against infinite loops by only scheduling a state update when the
+    // row count actually changes — React will bail out of the re-render when the
+    // new state value is identical to the current one.
     useLayoutEffect(() => {
-        if (textareaRef.current) {
-            textareaRef.current.style.height = 'inherit';
-            textareaRef.current.style.height = `${Math.max(textareaRef.current.scrollHeight, MIN_TEXTAREA_HEIGHT)}px`;
-        }
-    }, []);
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        const savedRows = el.rows;
+        el.rows = 1; // collapse to measure natural scrollHeight
+        const lineHeight = Number.parseInt(getComputedStyle(el).lineHeight, 10) || 20;
+        const rawRows = Math.ceil(el.scrollHeight / lineHeight);
+        el.rows = savedRows; // restore before React paints
+        const next = Math.max(resolvedMinRows, maxRows !== undefined ? Math.min(rawRows, maxRows) : rawRows);
+        setRowCount((prev) => (prev === next ? prev : next));
+    });
     // Integrated with react-hook-form
     if (formContext) {
         return (_jsx(Controller, { name: name, control: formContext.control, rules: {
@@ -101,13 +113,9 @@ export const TextAreaInput = ({ name, label, required = false, maxLength, contro
                     : undefined,
             }, render: ({ field }) => (_jsx(Form.Control, { ...field, onChange: (e) => {
                     field.onChange(e);
-                    setTextAreaValue(e.target.value);
-                    handleChange(e.target.value);
-                }, ref: textareaRef, style: {
-                    minHeight: MIN_TEXTAREA_HEIGHT,
-                    resize: 'none',
-                }, as: "textarea", required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, isInvalid: isInvalid })) }));
+                    _handleTextAreaChange(e);
+                }, ref: textareaRef, className: "rhi-textarea-input", as: "textarea", rows: rowCount, required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, isInvalid: isInvalid })) }));
     }
     // Standalone mode
-    return (_jsx(Form.Control, { as: "textarea", required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, value: value || '', disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText }));
+    return (_jsx(Form.Control, { as: "textarea", ref: textareaRef, className: "rhi-textarea-input", rows: rowCount, required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, value: value || '', onChange: _handleTextAreaChange, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@capyx/components-library",
-	"version": "0.0.17",
+	"version": "0.0.19",
 	"description": "Shared React component library for Capyx applications",
 	"publishConfig": {
 		"access": "public"