@fovestta2/web-react 1.1.0

package/dist/components/FvPfField.js

@@ -0,0 +1,106 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvPfField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvPfField = ({ label = 'PF Number', value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const activeSchema = schema || {
+        controlType: 'PfField',
+        errorPriority: ['required', 'regex'],
+        rules: [
+            {
+                name: 'regex',
+                params: {
+                    pattern: '^[A-Z]{2}/[A-Z]{3}/[0-9]{7}/[0-9]{3}/[0-9]{7}$'
+                },
+                errorKey: 'ERR_PF_INVALID'
+            }
+        ]
+    };
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, activeSchema]);
+    const validateValue = (val) => {
+        if (!activeSchema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, activeSchema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        let rawVal = e.target.value;
+        const formatted = rawVal.replace(/[^a-zA-Z0-9/]/g, '').toUpperCase();
+        onChange(formatted);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'PF Number is required',
+            ERR_PF_INVALID: 'Invalid PF Number format (e.g. AA/AAA/0000000/000/0000000)',
+            ERR_REGEX_MISMATCH: 'Invalid PF Number format'
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: "text", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...(disabled ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvPfField = FvPfField;

package/dist/components/FvPhoneField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvPhoneFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvPhoneField: React.FC<FvPhoneFieldProps>;

package/dist/components/FvPhoneField.js

@@ -0,0 +1,95 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvPhoneField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvPhoneField = ({ label = 'Phone Number', value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        let rawVal = e.target.value;
+        const numericValue = rawVal.replace(/[^0-9]/g, '');
+        const truncatedValue = numericValue.substring(0, 10);
+        onChange(truncatedValue);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Phone number is required',
+            ERR_MIN_LENGTH: 'Invalid phone number',
+            ERR_MAX_LENGTH: 'Invalid phone number',
+            ERR_REGEX_MISMATCH: 'Invalid phone number format',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: "tel", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...(disabled ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvPhoneField = FvPhoneField;

package/dist/components/FvRadioGroup.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface RadioOption {
+    value: any;
+    label: string;
+    disabled?: boolean;
+}
+export interface FvRadioGroupProps {
+    label?: string;
+    value: any;
+    options: RadioOption[];
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    layout?: 'vertical' | 'horizontal';
+    className?: string;
+    labelClassName?: string;
+    radioClassName?: string;
+    onChange: (value: any) => void;
+}
+export declare const FvRadioGroup: React.FC<FvRadioGroupProps>;

package/dist/components/FvRadioGroup.js

@@ -0,0 +1,64 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvRadioGroup = void 0;
+const react_1 = __importStar(require("react"));
+const FvRadioGroup = ({ label = '', value, options = [], disabled = false, required = false, name, layout = 'vertical', className = '', labelClassName = '', radioClassName = '', onChange, }) => {
+    const generatedId = (0, react_1.useId)();
+    const groupName = name || `fv-radio-${generatedId}`;
+    const handleChange = (val) => {
+        if (!disabled) {
+            onChange(val);
+        }
+    };
+    return (react_1.default.createElement("div", { className: `fv-radio-group-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-radio-group-label ${labelClassName}`, style: { marginBottom: '8px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            required && react_1.default.createElement("span", { className: "fv-required-asterisk", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("div", { className: "fv-radio-options", style: {
+                display: 'flex',
+                flexDirection: layout === 'horizontal' ? 'row' : 'column',
+                gap: layout === 'horizontal' ? '15px' : '8px',
+                flexWrap: 'wrap'
+            } }, options.map((option, index) => {
+            const isSelected = value === option.value;
+            const isOptionDisabled = disabled || option.disabled;
+            return (react_1.default.createElement("label", { key: index, className: `fv-radio-option ${isOptionDisabled ? 'fv-radio-disabled' : ''} ${radioClassName}`, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    cursor: isOptionDisabled ? 'not-allowed' : 'pointer',
+                    opacity: isOptionDisabled ? 0.6 : 1
+                } },
+                react_1.default.createElement("input", { type: "radio", name: groupName, value: option.value, checked: isSelected, disabled: isOptionDisabled, onChange: () => handleChange(option.value), className: "fv-radio-input", style: {
+                        marginRight: '8px',
+                        cursor: isOptionDisabled ? 'not-allowed' : 'pointer',
+                        width: '18px',
+                        height: '18px',
+                        accentColor: '#007bff'
+                    } }),
+                react_1.default.createElement("span", { className: "fv-radio-label-text", style: { fontSize: '14px', color: '#333' } }, option.label)));
+        }))));
+};
+exports.FvRadioGroup = FvRadioGroup;

package/dist/components/FvRichTextEditor.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvRichTextEditorProps {
+    label?: string;
+    placeholder?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    readonly?: boolean;
+    minHeight?: number;
+    showToolbar?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvRichTextEditor: React.FC<FvRichTextEditorProps>;

package/dist/components/FvRichTextEditor.js

@@ -0,0 +1,199 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvRichTextEditor = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvRichTextEditor = ({ label = '', placeholder = 'Enter text...', value, schema, disabled = false, readonly = false, minHeight = 150, showToolbar = true, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleTextChange = (e) => {
+        onChange(e.target.value);
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        if (onFocus)
+            onFocus();
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const insertText = (before, after = before) => {
+        if (disabled || readonly || !editorRef.current)
+            return;
+        const textarea = editorRef.current;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const text = value || '';
+        const selectedText = text.substring(start, end);
+        const newText = text.substring(0, start) + before + selectedText + after + text.substring(end);
+        onChange(newText);
+        // Restore cursor position
+        setTimeout(() => {
+            const newPosition = start + before.length + selectedText.length;
+            textarea.setSelectionRange(newPosition, newPosition);
+            textarea.focus();
+        }, 0);
+    };
+    const handleBulletList = () => {
+        if (disabled || readonly || !editorRef.current)
+            return;
+        const text = value || '';
+        const lines = text.split('\n');
+        const bulletedLines = lines.map((line) => (line.trim() ? `• ${line}` : line));
+        onChange(bulletedLines.join('\n'));
+    };
+    const handleNumberedList = () => {
+        if (disabled || readonly || !editorRef.current)
+            return;
+        const text = value || '';
+        const lines = text.split('\n').filter((line) => line.trim());
+        const numberedLines = lines.map((line, index) => `${index + 1}. ${line}`);
+        onChange(numberedLines.join('\n'));
+    };
+    const handleClear = () => {
+        if (disabled || readonly)
+            return;
+        onChange('');
+    };
+    const getCharacterCount = () => {
+        return (value === null || value === void 0 ? void 0 : value.length) || 0;
+    };
+    const getWordCount = () => {
+        const text = value || '';
+        return text.trim() ? text.trim().split(/\s+/).length : 0;
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_MIN_LENGTH: 'Text is too short',
+            ERR_MAX_LENGTH: 'Text is too long',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-rich-text-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("div", { className: `fv-editor-wrapper ${isFocused ? 'focused' : ''} ${errorMessage ? 'error' : ''}`, style: {
+                border: errorMessage ? '1px solid #dc3545' : (isFocused ? '1px solid #3498db' : '1px solid #e0e0e0'),
+                borderRadius: '8px',
+                overflow: 'hidden',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                transition: 'border-color 0.2s, box-shadow 0.2s',
+                boxShadow: isFocused ? '0 0 0 3px rgba(52, 152, 219, 0.1)' : 'none',
+                display: 'flex',
+                flexDirection: 'column'
+            } },
+            showToolbar && !readonly && (react_1.default.createElement("div", { className: "fv-editor-toolbar", style: {
+                    padding: '8px 12px',
+                    borderBottom: '1px solid #e0e0e0',
+                    backgroundColor: '#f9fafb',
+                    display: 'flex',
+                    gap: '8px',
+                    alignItems: 'center',
+                    flexWrap: 'wrap'
+                } },
+                react_1.default.createElement("div", { className: "toolbar-group", style: { display: 'flex', gap: '4px' } },
+                    react_1.default.createElement("button", { type: "button", className: "toolbar-btn", onClick: () => insertText('**'), disabled: disabled, title: "Bold", style: toolbarBtnStyle }, "B"),
+                    react_1.default.createElement("button", { type: "button", className: "toolbar-btn", onClick: () => insertText('*'), disabled: disabled, title: "Italic", style: { ...toolbarBtnStyle, fontStyle: 'italic' } }, "I"),
+                    react_1.default.createElement("button", { type: "button", className: "toolbar-btn", onClick: () => insertText('__'), disabled: disabled, title: "Underline", style: { ...toolbarBtnStyle, textDecoration: 'underline' } }, "U")),
+                react_1.default.createElement("div", { className: "toolbar-separator", style: { width: '1px', height: '20px', backgroundColor: '#ddd', margin: '0 4px' } }),
+                react_1.default.createElement("div", { className: "toolbar-group", style: { display: 'flex', gap: '4px' } },
+                    react_1.default.createElement("button", { type: "button", className: "toolbar-btn", onClick: handleBulletList, disabled: disabled, title: "Bullet List", style: toolbarBtnStyle }, "\u2022 List"),
+                    react_1.default.createElement("button", { type: "button", className: "toolbar-btn", onClick: handleNumberedList, disabled: disabled, title: "Numbered List", style: toolbarBtnStyle }, "1. List")),
+                react_1.default.createElement("div", { className: "toolbar-separator", style: { width: '1px', height: '20px', backgroundColor: '#ddd', margin: '0 4px' } }),
+                react_1.default.createElement("button", { type: "button", className: "toolbar-btn clear-btn", onClick: handleClear, disabled: disabled || !value, title: "Clear text", style: { ...toolbarBtnStyle, marginLeft: 'auto', color: '#e74c3c' } }, "Clear"))),
+            react_1.default.createElement("textarea", { ref: editorRef, value: value, onChange: handleTextChange, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, readOnly: readonly, placeholder: placeholder, className: `fv-editor-textarea ${inputClassName}`, style: {
+                    minHeight: `${minHeight}px`,
+                    padding: '12px',
+                    border: 'none',
+                    resize: 'vertical',
+                    outline: 'none',
+                    fontSize: '14px',
+                    color: '#1f2b41',
+                    lineHeight: 1.5,
+                    width: '100%',
+                    boxSizing: 'border-box',
+                    backgroundColor: 'transparent',
+                    ...(disabled ? { cursor: 'not-allowed' } : {})
+                } }),
+            react_1.default.createElement("div", { className: "fv-editor-footer", style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    padding: '4px 12px 8px',
+                    fontSize: '12px',
+                    color: '#888',
+                    backgroundColor: '#fafafa',
+                    borderTop: '1px solid #f0f0f0'
+                } },
+                errorMessage ? (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { color: '#dc3545' } },
+                    "\u26A0 ",
+                    getErrorMessage())) : (react_1.default.createElement("span", null)),
+                react_1.default.createElement("span", { className: "fv-stats" },
+                    getWordCount(),
+                    " words | ",
+                    getCharacterCount(),
+                    " characters")))));
+};
+exports.FvRichTextEditor = FvRichTextEditor;
+const toolbarBtnStyle = {
+    background: 'none',
+    border: '1px solid transparent',
+    borderRadius: '4px',
+    padding: '4px 8px',
+    cursor: 'pointer',
+    fontSize: '13px',
+    fontWeight: 600,
+    color: '#444',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'all 0.2s',
+};

package/dist/components/FvServicePeriod.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface FvServicePeriodProps {
+    label?: string;
+    startDate?: string;
+    endDate?: string;
+    roundToYears?: boolean;
+    onRoundChange?: (checked: boolean) => void;
+    className?: string;
+}
+export declare const FvServicePeriod: React.FC<FvServicePeriodProps>;

package/dist/components/FvServicePeriod.js

@@ -0,0 +1,122 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvServicePeriod = void 0;
+const react_1 = __importStar(require("react"));
+const FvServicePeriod = ({ label = 'Service Period', startDate, endDate, roundToYears = false, onRoundChange, className = '', }) => {
+    const [years, setYears] = (0, react_1.useState)(0);
+    const [months, setMonths] = (0, react_1.useState)(0);
+    const [days, setDays] = (0, react_1.useState)(0);
+    const [totalDays, setTotalDays] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        calculatePeriod();
+    }, [startDate, endDate, roundToYears]);
+    const resetValues = () => {
+        setYears(0);
+        setMonths(0);
+        setDays(0);
+        setTotalDays(0);
+    };
+    const calculatePeriod = () => {
+        if (!startDate || !endDate) {
+            resetValues();
+            return;
+        }
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            resetValues();
+            return;
+        }
+        if (end < start) {
+            resetValues();
+            return;
+        }
+        // Calculate difference
+        let calcYears = end.getFullYear() - start.getFullYear();
+        let calcMonths = end.getMonth() - start.getMonth();
+        let calcDays = end.getDate() - start.getDate();
+        if (calcDays < 0) {
+            calcMonths--;
+            // Days in previous month
+            const prevMonth = new Date(end.getFullYear(), end.getMonth(), 0);
+            calcDays += prevMonth.getDate();
+        }
+        if (calcMonths < 0) {
+            calcYears--;
+            calcMonths += 12;
+        }
+        // Apply Rounding if checkbox is checked
+        if (roundToYears) {
+            if (calcMonths >= 6) {
+                calcYears++;
+            }
+            calcMonths = 0;
+            calcDays = 0;
+        }
+        setYears(calcYears);
+        setMonths(calcMonths);
+        setDays(calcDays);
+        // Total Days
+        const diffTime = Math.abs(end.getTime() - start.getTime());
+        setTotalDays(Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
+    };
+    const handleCheckboxChange = (e) => {
+        if (onRoundChange) {
+            onRoundChange(e.target.checked);
+        }
+    };
+    return (react_1.default.createElement("div", { className: `service-period-card ${className}`, style: {
+            border: '1px solid #eee',
+            borderRadius: '8px',
+            padding: '16px',
+            backgroundColor: '#fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+            marginBottom: '16px'
+        } },
+        react_1.default.createElement("div", { className: "sp-header", style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' } },
+            react_1.default.createElement("div", { className: "sp-title-group", style: { display: 'flex', alignItems: 'center' } },
+                react_1.default.createElement("span", { className: "sp-label", style: { fontSize: '14px', fontWeight: 'bold', color: '#151D48', marginRight: '8px' } }, label),
+                react_1.default.createElement("svg", { className: "sp-icon", viewBox: "0 0 24 24", width: "18", height: "18", fill: "#151D48" },
+                    react_1.default.createElement("path", { d: "M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" })))),
+        react_1.default.createElement("div", { className: "sp-content", style: { marginBottom: '12px' } },
+            react_1.default.createElement("div", { className: "sp-duration", style: { fontSize: '14px', color: '#333', marginBottom: '4px' } },
+                years,
+                " Years, ",
+                months,
+                " Months, ",
+                days,
+                " Days"),
+            react_1.default.createElement("div", { className: "sp-total", style: { fontSize: '13px', color: '#666' } },
+                "Total: ",
+                totalDays,
+                " days")),
+        react_1.default.createElement("div", { className: "sp-divider", style: { height: '1px', backgroundColor: '#eee', margin: '12px 0' } }),
+        onRoundChange && (react_1.default.createElement("div", { className: "sp-footer" },
+            react_1.default.createElement("label", { className: "sp-checkbox-label", style: { display: 'flex', alignItems: 'center', fontSize: '13px', color: '#333', cursor: 'pointer' } },
+                react_1.default.createElement("input", { type: "checkbox", checked: roundToYears, onChange: handleCheckboxChange, style: { marginRight: '8px' } }),
+                "Round to years (if months >= 6)")))));
+};
+exports.FvServicePeriod = FvServicePeriod;