@capyx/components-library 0.0.1 → 0.0.2

package/dist/components/TextAreaInput.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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;
+/**
+ * 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 const TextAreaInput = ({ name, label, required = false, maxLength, controlSize, placeholder, value, onChange, disabled = false, isReadOnly = false, isPlainText = false, debounceMs, }) => {
+    const formContext = useFormContext();
+    // Create ref for debounced onChange to clean up on unmount
+    const debouncedOnChangeRef = useRef(null);
+    // Create debounced version of onChange if debounceMs is provided
+    useEffect(() => {
+        if (debounceMs && onChange) {
+            debouncedOnChangeRef.current = debounce(onChange, debounceMs);
+        }
+        // Cleanup on unmount
+        return () => {
+            debouncedOnChangeRef.current?.cancel();
+        };
+    }, [debounceMs, onChange]);
+    // Helper to handle onChange with optional debouncing
+    const handleChange = (value) => {
+        if (debounceMs && debouncedOnChangeRef.current) {
+            debouncedOnChangeRef.current(value);
+        }
+        else if (onChange) {
+            onChange(value);
+        }
+    };
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const errorMessage = getFieldError(name);
+    const isInvalid = !!errorMessage;
+    const textareaRef = useRef(null);
+    const [_textAreaValue, setTextAreaValue] = useState('');
+    const _handleTextAreaChange = (event) => {
+        setTextAreaValue(event.target.value);
+        handleChange(event.target.value);
+    };
+    useLayoutEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'inherit';
+            textareaRef.current.style.height = `${Math.max(textareaRef.current.scrollHeight, MIN_TEXTAREA_HEIGHT)}px`;
+        }
+    }, []);
+    // 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
+                    ? {
+                        value: maxLength,
+                        message: `Maximum ${maxLength} characters allowed`,
+                    }
+                    : 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 })) }));
+    }
+    // Standalone mode
+    return (_jsx(Form.Control, { as: "textarea", required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, value: value || '', disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText }));
+};

package/dist/components/TextInput.d.ts

@@ -0,0 +1,89 @@
+import { type FC, type ReactElement } from 'react';
+/**
+ * Props for the TextInput component
+ */
+export type TextInputProps = {
+    /** The name of the text input field */
+    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;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is read-only */
+    isReadOnly?: boolean;
+    /** Whether to render as plain text */
+    isPlainText?: boolean;
+    /** 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.
+ *
+ * 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
+ *
+ * @example
+ * // Basic usage with react-hook-form
+ * <TextInput
+ *   name="email"
+ *   label="Email Address"
+ *   type="email"
+ *   required
+ *   placeholder="Enter your email"
+ * />
+ *
+ * @example
+ * // With autocomplete suggestions
+ * <TextInput
+ *   name="country"
+ *   label="Country"
+ *   shouldAutoComplete
+ *   values={["USA", "Canada", "Mexico"]}
+ * />
+ *
+ * @example
+ * // With debouncing and custom callbacks
+ * <TextInput
+ *   name="search"
+ *   placeholder="Search..."
+ *   debounceMs={300}
+ *   setFieldValue={handleSearch}
+ * />
+ */
+export declare const TextInput: FC<TextInputProps>;
+//# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/TextInput.js

@@ -0,0 +1,177 @@
+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 { 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.
+ *
+ * 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
+ *
+ * @example
+ * // Basic usage with react-hook-form
+ * <TextInput
+ *   name="email"
+ *   label="Email Address"
+ *   type="email"
+ *   required
+ *   placeholder="Enter your email"
+ * />
+ *
+ * @example
+ * // With autocomplete suggestions
+ * <TextInput
+ *   name="country"
+ *   label="Country"
+ *   shouldAutoComplete
+ *   values={["USA", "Canada", "Mexico"]}
+ * />
+ *
+ * @example
+ * // With debouncing and custom callbacks
+ * <TextInput
+ *   name="search"
+ *   placeholder="Search..."
+ *   debounceMs={300}
+ *   setFieldValue={handleSearch}
+ * />
+ */
+export const TextInput = ({ name, label, type = 'text', min, max, required, maxLength, controlSize, placeholder, fieldValue, setFieldValue, saveFieldvalue, disabled, isReadOnly, isPlainText, pattern, icon, shouldAutoComplete, values = [], debounceMs, }) => {
+    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);
+        }
+        // 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);
+        }
+    };
+    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);
+    };
+    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 })] })) }));
+        }
+        return (_jsx(Controller, { name: name, control: formContext.control, rules: {
+                required: required ? `${label || 'This field'} is required` : false,
+                maxLength: maxLength
+                    ? {
+                        value: maxLength,
+                        message: `Maximum ${maxLength} characters allowed`,
+                    }
+                    : undefined,
+                min: min
+                    ? { value: Number(min), message: `Minimum value is ${min}` }
+                    : undefined,
+                max: max
+                    ? { value: Number(max), message: `Maximum value is ${max}` }
+                    : undefined,
+                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) => {
+                    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 })] }));
+            } }));
+    }
+    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 }));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+export { CheckInput } from './CheckInput';
+export { DateInput } from './DateInput';
+export { FileInput } from './FileInput';
+export { RichTextInput } from './RichTextInput';
+export { SelectInput } from './SelectInput';
+export { SwitchInput } from './SwitchInput';
+export { TagsInput } from './TagsInput';
+export { TextAreaInput } from './TextAreaInput';
+export { TextInput } from './TextInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./addons"), exports);
+__exportStar(require("./components"), exports);

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './addons';
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,72 +1,87 @@
 {
-  "name": "@capyx/components-library",
-  "version": "0.0.1",
-  "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": "commonjs",
-  "main": "index.js",
-  "directories": {
-    "lib": "lib"
-  },
-  "scripts": {
-    "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.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"
+	}
 }

package/.storybook/main.ts

@@ -1,33 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@chromatic-com/storybook",
-    "@storybook/addon-vitest",
-    "@storybook/addon-a11y",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding"
-  ],
-  "framework": "@storybook/react-vite",
-  async viteFinal(config) {
-    // Suppress "use client" directive warnings from MUI components
-    if (config.build) {
-      config.build.rollupOptions = {
-        ...config.build.rollupOptions,
-        onwarn(warning, warn) {
-          // Ignore "use client" directive warnings
-          if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('"use client"')) {
-            return;
-          }
-          warn(warning);
-        },
-      };
-    }
-    return config;
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,36 +0,0 @@
-import type { Preview } from '@storybook/react-vite'
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'react-quill-new/dist/quill.snow.css';
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      default: 'dark',
-      values: [
-        {
-          name: 'dark',
-          value: '#1a1a1a',
-        },
-        {
-          name: 'light',
-          value: '#ffffff',
-        },
-      ],
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: 'todo'
-    }
-  },
-};
-
-export default preview;