dojo-fe-shared
Version:
Shared React component library for Dojo FE (SuperAdmin, Admin, Student/Contact)
1,131 lines (1,107 loc) • 95.1 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
AccordionItem: () => AccordionItem,
AttachmentButton: () => AttachmentButton,
Button: () => Button,
ButtonDatePicker: () => ButtonDatePicker,
CommonCheckBox: () => CommonCheckBox,
CommonColorField: () => CommonColorField,
CommonPasswordField: () => CommonPasswordField,
CommonPinInput: () => CommonPinInput,
CommonSimpleCheckBox: () => CommonSimpleCheckBox,
CommonStepper: () => CommonStepper,
CommonTextEditor: () => CommonTextEditor,
CommonTextField: () => CommonTextField,
CustomSpinner: () => CustomSpinner,
DashboardStatsComparisonChip: () => DashboardStatsComparisonChip,
DraggableEnhancedTable: () => DraggableEnhancedTable,
EnhancedTable: () => EnhancedTable,
Modal: () => Modal,
NoDataFound: () => NoDataFound,
Pagination: () => Pagination,
SuccessCard: () => SuccessCard,
TagCell: () => TagCell,
showToaster: () => showToaster
});
module.exports = __toCommonJS(src_exports);
// src/components/AccordionItem.tsx
var import_react = require("react");
// src/assets/svg/DropDownArrowIcon.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var DropDownArrowIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "chevron-down", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
id: "Icon",
d: "M5 7.5L10 12.5L15 7.5",
stroke: "#667085",
strokeWidth: "1.66667",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) })
}
);
};
var DropDownArrowIcon_default = DropDownArrowIcon;
// src/components/AccordionItem.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var AccordionItem = ({
title,
children,
description
}) => {
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
console.log("children", children);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border flex-col mb-2 py-3 rounded-lg overflow-hidden border-gray-300 dark:border-primaryBorderDark", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"button",
{
type: "button",
className: "w-full text-left p-4 focus:outline-none flex justify-between items-center bg-white dark:bg-secondaryBgDark",
onClick: () => setIsOpen(!isOpen),
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-col flex", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold text-lg dark:text-primaryTextDark", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-normal text-BluishGrayColor dark:text-lightTextDark", children: description })
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: `transform transition-transform ${isOpen ? "rotate-180" : "rotate-0"}`,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DropDownArrowIcon_default, {})
}
)
]
}
),
isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 border-t bg-gray-50 dark:bg-secondaryBorderDark", children })
] });
};
// src/components/AttachmentButton.tsx
var import_react2 = require("react");
// src/assets/svg/AttachmentIcon.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var AttachmentIcon = (props) => {
const isDarkMode = false;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"svg",
{
...props,
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { clipPath: "url(#clip0_2243_69634)", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M15.3218 5.82717C15.0607 5.56751 14.6386 5.56866 14.379 5.8297L6.36476 13.8872C5.32502 14.927 3.63632 14.927 2.59464 13.8858C1.55374 12.8444 1.55374 11.1557 2.59477 10.1147L10.8462 1.81992C11.4953 1.17081 12.5507 1.17081 13.2017 1.82132C13.8525 2.47215 13.8525 3.5274 13.2015 4.17841L6.36601 11.0139C6.36558 11.0143 6.3652 11.0148 6.36476 11.0153C6.10435 11.2742 5.6835 11.2739 5.42362 11.014C5.1633 10.7537 5.1633 10.3318 5.42362 10.0715L8.72307 6.77132C8.98339 6.51093 8.98335 6.0888 8.72297 5.82848C8.46259 5.56816 8.04046 5.56819 7.78014 5.82857L4.48072 9.12865C3.69973 9.90964 3.69973 11.1758 4.48078 11.9568C5.2618 12.7378 6.52795 12.7378 7.309 11.9568C7.30991 11.9559 7.31063 11.9549 7.3115 11.954L14.1444 5.12118C15.3161 3.94947 15.3161 2.04999 14.1444 0.878271C12.9725 -0.292757 11.0731 -0.292757 9.90209 0.878271L1.65068 9.17309C0.0902098 10.7336 0.0902097 13.2663 1.65181 14.8287C3.21444 16.3905 5.74719 16.3905 7.30888 14.8288L15.3243 6.77C15.584 6.50893 15.5828 6.08683 15.3218 5.82717Z",
fill: isDarkMode ? "#CECFD2" : "#344054"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: "clip0_2243_69634", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"rect",
{
width: "16",
height: "16",
fill: "white"
}
) }) })
]
}
);
};
var AttachmentIcon_default = AttachmentIcon;
// src/components/AttachmentButton.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var AttachmentButton = ({
setAttachments,
icon,
isMulti = true
}) => {
const ref = (0, import_react2.useRef)(null);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: " flex items-center px-2 h-[30px]", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"button",
{
type: "button",
onClick: () => {
var _a;
return (_a = ref.current) == null ? void 0 : _a.click();
},
className: " w-full ",
children: icon || /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AttachmentIcon_default, {})
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"input",
{
hidden: true,
type: "file",
multiple: isMulti,
ref,
onChange: (e) => {
const files = e.target.files ? Array.from(e.target.files) : [];
if (isMulti) {
setAttachments((prev) => [...prev, ...files]);
} else {
setAttachments(files);
}
}
}
)
] });
};
// src/components/Button.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Button = ({
className = "",
children,
...props
}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"button",
{
className: `px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition ${className}`,
...props,
children
}
);
// src/components/ButtonDatePicker.tsx
var import_react3 = require("react");
// src/components/CustomSpinner.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var CustomSpinner = () => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-center items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"svg",
{
"aria-hidden": "true",
className: "w-[30px] h-[25px] flex items-center justify-center text-gray-200 animate-spin dark:text-gray-600 fill-blue-600",
viewBox: "0 0 100 101",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"path",
{
d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
fill: "currentColor"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"path",
{
d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
fill: "currentFill"
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Loading..." })
] });
};
// src/enums/ButtonTypes.ts
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
ButtonType2["PRIMARY"] = "primary";
ButtonType2["SECONDARY"] = "secondary";
ButtonType2["SUCCESS"] = "success";
ButtonType2["DANGER"] = "danger";
ButtonType2["LIGHT"] = "light";
ButtonType2["OUTLINED"] = "outlined";
ButtonType2["GRADIENT"] = "gradient";
return ButtonType2;
})(ButtonType || {});
var ButtonTypes_default = ButtonType;
// src/components/commonButtons/commonButton/CommonButton.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var CommonButton = (props) => {
const {
buttonText,
loading,
disabled,
showIcon,
width,
height,
variant = ButtonTypes_default.PRIMARY,
className,
icon,
secondIcon,
type,
...rest
} = props;
let buttonClassName;
switch (variant) {
case ButtonTypes_default.DANGER:
buttonClassName = `${className} focus:ring-4 focus:ring-red-300 h-[40px] px-[10px] py-[7px] hover:bg-red-600 ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-red-500"} rounded-lg text-white flex items-center border border-red-500 justify-center text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.SECONDARY:
buttonClassName = `${className} w-[160px] h-[40px] px-[14px] py-[7px] ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-[#FFFFFF]"} rounded-lg text-black flex items-center border border-gray-200 justify-center hover:text-hoverBlue text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.PRIMARY:
buttonClassName = `${className} focus:ring-4 focus:ring-blue-300 h-[40px] px-[10px] py-[7px] hover:bg-blue-700 ${disabled ? "bg-white dark:bg-secondaryBorderDark hover:bg-white dark:hover:bg-secondaryBorderDark !text-gray-400 hover:text-gray-400 cursor-not-allowed dark:border-primaryBorderDark" : "bg-[#3772FF]"} rounded-lg text-white flex items-center border border-[#3772ff] justify-center text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.LIGHT:
buttonClassName = `${className} focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:focus:ring-secondaryBorderDark gap-1 h-[41px] px-[14px] py-[7px] hover:bg-gray-100 ${disabled ? "bg-white dark:bg-secondaryBorderDark hover:bg-white dark:hover:bg-secondaryBorderDark !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-[#FFFFFF] dark:bg-secondaryBgDark"} rounded-lg text-black dark:text-secondaryTextDark flex items-center text-BlackRiver border border-LightGray dark:border-primaryBorderDark justify-center text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.OUTLINED:
buttonClassName = `${className} focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 gap-1 h-[41px] px-[14px] py-[7px] hover:bg-gray-100 ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-white"} border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-secondaryBgDark dark:text-secondaryTextDark dark:border-primaryBorderDark dark:hover:bg-primaryBorderDark dark:hover:border-gray-600 dark:focus:ring-gray-700`;
break;
case ButtonTypes_default.GRADIENT:
buttonClassName = `${className} flex items-center gap-[6px] px-5 py-[10px] bg-gradient-to-r from-[#F97794] via-[#6200FF] to-[#3498DB] text-white font-semibold rounded-xl shadow-lg `;
break;
default:
buttonClassName = `${className} w-[160px] h-[47px] px-[14px] py-[8px] font-Inter font-semibold text-sm ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-yellowColor"} rounded-full text-black font-medium text-center flex items-center justify-center`;
break;
}
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"button",
{
"data-testid": `unique-button-${buttonText}`,
disabled: disabled || loading,
style: { width, height },
...rest,
className: buttonClassName,
role: "button",
type: type || "button",
children: [
icon,
loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomSpinner, {}) : buttonText,
secondIcon
]
}
);
};
var CommonButton_default = CommonButton;
// src/assets/svg/CalendarViewIcon.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var CalendarViewIcon = (props) => {
const theme = "light";
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M13.75 3.125H6.25V1.875C6.25 1.53 5.97 1.25 5.625 1.25C5.28 1.25 5 1.53 5 1.875V3.125H3.75C3.2525 3.125 2.77562 3.3225 2.42437 3.67437C2.0725 4.02562 1.875 4.5025 1.875 5V15C1.875 15.4975 2.0725 15.9744 2.42437 16.3256C2.77562 16.6775 3.2525 16.875 3.75 16.875H16.25C16.7475 16.875 17.2244 16.6775 17.5756 16.3256C17.9275 15.9744 18.125 15.4975 18.125 15V5C18.125 4.5025 17.9275 4.02562 17.5756 3.67437C17.2244 3.3225 16.7475 3.125 16.25 3.125H15V1.875C15 1.53 14.72 1.25 14.375 1.25C14.03 1.25 13.75 1.53 13.75 1.875V3.125ZM16.875 8.125V15C16.875 15.1656 16.8094 15.325 16.6919 15.4419C16.575 15.5594 16.4156 15.625 16.25 15.625H3.75C3.58438 15.625 3.425 15.5594 3.30812 15.4419C3.19062 15.325 3.125 15.1656 3.125 15V8.125H16.875ZM5 4.375H3.75C3.58438 4.375 3.425 4.44062 3.30812 4.55812C3.19062 4.675 3.125 4.83437 3.125 5V6.875H16.875V5C16.875 4.83437 16.8094 4.675 16.6919 4.55812C16.575 4.44062 16.4156 4.375 16.25 4.375H15V5C15 5.345 14.72 5.625 14.375 5.625C14.03 5.625 13.75 5.345 13.75 5V4.375H6.25V5C6.25 5.345 5.97 5.625 5.625 5.625C5.28 5.625 5 5.345 5 5V4.375Z",
fill: theme === "dark" ? "#CECFD2" : "#344054"
}
)
}
);
};
var CalendarViewIcon_default = CalendarViewIcon;
// src/components/ButtonDatePicker.tsx
var import_react_multi_date_picker = __toESM(require("react-multi-date-picker"));
var import_jsx_runtime9 = require("react/jsx-runtime");
var ButtonDatePicker = ({
buttonText,
className,
buttonclassName,
allowDateRange,
onChangeCallbackProps
}) => {
const datePickerRef = (0, import_react3.useRef)(null);
const currentDate = /* @__PURE__ */ new Date();
const handleShowDatePicker = () => {
var _a;
(_a = datePickerRef.current) == null ? void 0 : _a.openCalendar();
};
const handleClickOutside = (event) => {
if (datePickerRef.current && !datePickerRef.current.contains(event.target)) {
datePickerRef.current.closeCalendar();
}
};
(0, import_react3.useEffect)(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `w-full lg:w-[150px] md:w-[30%] ${className}`, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
CommonButton_default,
{
buttonText,
variant: ButtonTypes_default.LIGHT,
icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CalendarViewIcon_default, {}),
onClick: handleShowDatePicker,
className: `w-full ${buttonclassName} `
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_react_multi_date_picker.default,
{
ref: datePickerRef,
range: true,
containerStyle: { display: "block" },
className: "dark:bg-secondaryBgDark",
onChange: onChangeCallbackProps,
maxDate: allowDateRange ? currentDate : void 0
}
)
] }) });
};
// src/components/CommonCheckBox.tsx
var import_error_message = require("@hookform/error-message");
var import_react_hook_form = require("react-hook-form");
var import_jsx_runtime10 = require("react/jsx-runtime");
var CommonCheckBox = ({
name,
control,
errors,
labelText,
labelDescription,
defaultValue,
className,
isMulti,
checkBoxList,
loginCheckBox,
...rest
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: " ", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_react_hook_form.Controller,
{
name,
defaultValue,
control,
render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"div",
{
className: `grid ${loginCheckBox ? "" : "md:grid-cols-2"} cursor-pointer gap-4 ${className}`,
children: isMulti ? checkBoxList == null ? void 0 : checkBoxList.map((checkBox, index) => {
var _a, _b, _c;
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
"label",
{
className: `${((_a = field.value) == null ? void 0 : _a.includes(checkBox.value)) ? "bg-LightBlue items-center p-4 w-[100%] rounded-xl border border-RoyalBlueLight flex-col justify-center cursor-pointer text-RoyalBlueLight text-[16px] font-semibold" : "bg-white dark:bg-secondaryBgDark items-center p-4 rounded-xl w-[100%] border border-CyanBlueLight dark:border-primaryBorderDark flex-col justify-center cursor-pointer text-[#050606] text-[16px] font-semibold"} ${className || ""}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex custom-checkbox gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"input",
{
...field,
...rest,
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
value: checkBox.value,
checked: ((_b = field.value) == null ? void 0 : _b.includes(checkBox.value)) || false,
onChange: (e) => {
const isChecked = e.target.checked;
let newValue;
if (isChecked) {
newValue = [...field.value || [], checkBox.value];
} else {
newValue = (field.value || []).filter(
(item) => item !== checkBox.value
);
}
field.onChange(newValue);
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dark:text-RoyalBlueLight", children: checkBox.label })
] }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pl-6", children: checkBox.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"span",
{
className: `text-sm font-normal ${((_c = field.value) == null ? void 0 : _c.includes(checkBox.value)) ? "text-RoyalBlueLight" : "text-gray-500 dark:text-lightTextDark"}`,
children: checkBox.description
}
) })
]
},
index
);
}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
"label",
{
className: `${field.value ? " items-center w-[100%] pb-4 font-semibold rounded-xl flex-col justify-center cursor-pointer text-sm " : " items-center pb-4 rounded-xl w-[100%] flex-col justify-center cursor-pointer text-[#050606] text-sm"} ${className || ""}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex custom-checkbox gap-2 ", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"input",
{
...field,
...rest,
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
checked: field.value
}
),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pt-1 dark:text-secondaryTextDark", children: labelText })
] }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pl-6", children: labelDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"span",
{
className: `text-sm font-normal ${field.value ? "text-RoyalBlueLight" : "text-gray-500 dark:text-lightTextDark"}`,
children: labelDescription
}
) })
]
}
)
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_error_message.ErrorMessage,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-red-500 text-[12px]", children: message })
}
)
] });
};
// src/components/CommonColorField.tsx
var import_react4 = require("react");
var import_error_message2 = require("@hookform/error-message");
var import_react_hook_form2 = require("react-hook-form");
var import_react_i18next = require("react-i18next");
var import_jsx_runtime11 = require("react/jsx-runtime");
var CommonColorField = ({
name = "",
control,
errors,
labelText,
onClick = void 0,
labelClass = "",
placeholder,
className = "",
required,
disabled,
translation,
icon,
beforeOnchange,
iconPosition = "left",
...restProps
}) => {
const { t } = (0, import_react_i18next.useTranslation)(translation && translation);
const [selectedColor, setSelectedColor] = (0, import_react4.useState)("#ffffff");
const inputRef = (0, import_react4.useRef)(null);
const handleInputClick = () => {
var _a;
(_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
};
return control ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
"div",
{
className: `relative w-full pb-5 ${className}`,
onClick,
children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
import_react_hook_form2.Controller,
{
name,
control,
render: ({ field: { value, ...restVal } }) => {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
"label",
{
className: `block text-BlackRiver dark:text-secondaryTextDark text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("em", { className: "relative text-[1px] inline-block w-1 h-1 not-italic -top-2 rounded-lg bg-[#E34B2A] left-1 rtl:left-auto rtl:right-1 ", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex gap-2 items-center w-full border rounded-lg", children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-10 w-[40px] flex justify-center items-center bg-white cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 ", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"input",
{
ref: inputRef,
type: "color",
value,
onChange: (e) => restVal.onChange(e.target.value),
disabled,
id: "hs-color-input",
className: `h-10 pl-1 ${className} ${disabled ? "cursor-not-allowed" : ""} `,
placeholder
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: value }),
icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center pointer`,
onClick: () => handleInputClick(),
children: icon
}
)
] })
] });
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
import_error_message2.ErrorMessage,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-red-500 text-[12px] absolute left-0 bottom-0 rtl:left-auto rtl:right-0", children: t(message) })
}
)
]
}
) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
"label",
{
className: `block text-BlackRiver text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("em", { className: "relative text-[1px] inline-block w-1 h-1 not-italic -top-2 rounded-lg bg-[#E34B2A] left-1 rtl:left-auto rtl:right-1 ", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex gap-2 items-center w-full border rounded-lg", children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-10 w-[40px] flex justify-center items-center bg-white cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 ", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"input",
{
ref: inputRef,
type: "color",
disabled,
id: "hs-color-input",
className: `h-10 pl-1 ${className} ${disabled ? "cursor-not-allowed" : ""} `,
onChange: (e) => {
beforeOnchange && beforeOnchange(e.target);
setSelectedColor(e.target.value);
},
placeholder
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: selectedColor && selectedColor }),
icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center pointer`,
onClick: () => handleInputClick(),
children: icon
}
)
] })
] });
};
// src/components/CommonPasswordField.tsx
var import_react7 = require("react");
var import_error_message3 = require("@hookform/error-message");
// src/assets/svg/EyeIcon.tsx
var import_react5 = require("react");
var import_jsx_runtime12 = require("react/jsx-runtime");
var EyeIcon = ({ stroke = "#98A2B3", ...props }) => {
const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: { cursor: "pointer" },
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { id: "eye", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { id: "Icon", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"path",
{
d: "M1.61342 8.47513C1.52262 8.33137 1.47723 8.25949 1.45182 8.14862C1.43273 8.06534 1.43273 7.93401 1.45182 7.85073C1.47723 7.73986 1.52262 7.66798 1.61341 7.52422C2.36369 6.33623 4.59693 3.33301 8.00027 3.33301C11.4036 3.33301 13.6369 6.33623 14.3871 7.52422C14.4779 7.66798 14.5233 7.73986 14.5487 7.85073C14.5678 7.93401 14.5678 8.06534 14.5487 8.14862C14.5233 8.25949 14.4779 8.33137 14.3871 8.47513C13.6369 9.66311 11.4036 12.6663 8.00027 12.6663C4.59693 12.6663 2.36369 9.66311 1.61342 8.47513Z",
stroke: isHovered ? "#3772FF" : stroke,
strokeWidth: "1.33333",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"path",
{
d: "M8.00027 9.99967C9.10484 9.99967 10.0003 9.10424 10.0003 7.99967C10.0003 6.8951 9.10484 5.99967 8.00027 5.99967C6.8957 5.99967 6.00027 6.8951 6.00027 7.99967C6.00027 9.10424 6.8957 9.99967 8.00027 9.99967Z",
stroke: isHovered ? "#3772FF" : stroke,
strokeWidth: "1.33333",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
] }) })
}
);
};
var EyeIcon_default = EyeIcon;
// src/assets/svg/EyeOffIcon.tsx
var import_react6 = require("react");
var import_jsx_runtime13 = require("react/jsx-runtime");
var EyeOffIcon = (props) => {
const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: { cursor: "pointer" },
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("g", { id: "eye-off", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"path",
{
id: "Icon",
d: "M7.16172 3.39488C7.43266 3.35482 7.71216 3.33333 8.00003 3.33333C11.4034 3.33333 13.6366 6.33656 14.3869 7.52455C14.4777 7.66833 14.5231 7.74023 14.5485 7.85112C14.5676 7.93439 14.5676 8.06578 14.5485 8.14905C14.5231 8.25993 14.4773 8.3323 14.3859 8.47705C14.186 8.79343 13.8812 9.23807 13.4774 9.7203M4.48264 4.47669C3.04126 5.45447 2.06272 6.81292 1.61383 7.52352C1.52261 7.66791 1.47701 7.74011 1.45158 7.85099C1.43249 7.93426 1.43248 8.06563 1.45156 8.14891C1.47698 8.25979 1.52238 8.33168 1.61318 8.47545C2.36345 9.66344 4.5967 12.6667 8.00003 12.6667C9.37231 12.6667 10.5543 12.1784 11.5256 11.5177M2.00003 2L14 14M6.58582 6.58579C6.22389 6.94772 6.00003 7.44772 6.00003 8C6.00003 9.10457 6.89546 10 8.00003 10C8.55232 10 9.05232 9.77614 9.41425 9.41421",
stroke: isHovered ? "#3772FF" : "#98A2B3",
strokeWidth: "1.33333",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) })
}
);
};
var EyeOffIcon_default = EyeOffIcon;
// src/components/CommonPasswordField.tsx
var import_react_hook_form3 = require("react-hook-form");
var import_react_i18next2 = require("react-i18next");
var import_jsx_runtime14 = require("react/jsx-runtime");
var CommonPasswordField = ({
name,
control,
errors,
labelText,
className = "",
required,
disabled,
width,
labelClass = "",
placeholder,
translation,
limit
}) => {
const { t } = (0, import_react_i18next2.useTranslation)(translation && translation);
const [isNewPasswordVisible, setIsNewPasswordVisible] = (0, import_react7.useState)(false);
const showPassword = () => {
setIsNewPasswordVisible(!isNewPasswordVisible);
};
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${width || "w-full"} mb-2`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
import_react_hook_form3.Controller,
{
name,
control,
render: ({ field }) => {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
"label",
{
className: `block text-BlackRiver dark:text-secondaryTextDark text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: " pl-0.5 text-red-600", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"input",
{
disabled,
...field,
type: isNewPasswordVisible ? "text" : "password",
className: `${errors && errors[name] ? "border-red-500" : "border-LightGray dark:border-primaryBorderDark"} ${className} ${disabled ? "cursor-not-allowed" : ""} w-full rounded-lg border bg-white dark:bg-secondaryBgDark p-2.5 pr-10 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder: placeholder || "****",
maxLength: limit && limit
}
),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"p",
{
className: `absolute top-3 inset-y-0 right-3 rtl:right-auto rtl:left-3 flex items-center w-max h-max text-gray-600 cursor-pointer`,
onClick: showPassword,
children: isNewPasswordVisible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EyeOffIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EyeIcon_default, {})
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
import_error_message3.ErrorMessage,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-red-500 text-[12px] font-Inter", children: t(message) })
}
)
] });
}
}
) }) });
};
// src/components/CommonPinInput.tsx
var import_react8 = require("react");
var import_error_message4 = require("@hookform/error-message");
var import_react_hook_form4 = require("react-hook-form");
var import_react_i18next3 = require("react-i18next");
var import_jsx_runtime15 = require("react/jsx-runtime");
var CommonPinInput = (0, import_react8.forwardRef)(({
name = "",
control,
errors,
labelText,
onClick = void 0,
labelClass = "",
beforeOnchange,
placeholder,
className = "",
required,
disabled,
translation,
icon,
step,
iconPosition = "left",
discountValue,
inputRef,
// Add this ref prop
onKeyDown,
// Add onKeyDown handler
...restProps
}, ref) => {
const { t } = (0, import_react_i18next3.useTranslation)(translation && translation);
const handleInputChange = (e, onChange) => {
let value = e.target.value;
if (value.length > 1) {
value = value.slice(0, 1);
}
onChange(value);
beforeOnchange && beforeOnchange(e);
};
const discountPositionClass = iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3";
const actualRef = inputRef || ref;
return control ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
"div",
{
className: "relative w-full pb-5",
onClick,
children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_react_hook_form4.Controller,
{
name,
control,
render: ({ field: { value, onChange, ...restVal } }) => {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
"label",
{
className: `block text-BlackRiver text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("em", { className: "relative text-[1px] inline-block w-1 h-1 not-italic -top-2 rounded-lg bg-[#E34B2A] left-1 rtl:left-auto rtl:right-1 ", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative flex items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"input",
{
...restVal,
...restProps,
value,
onChange: (e) => handleInputChange(e, onChange),
disabled,
"data-testid": `pin-input-${name}`,
className: ` text-[50px] text-center inputpin text-DarkGrayishBlue font-semibold ${errors && errors[name] ? "border-red-500" : "border-LightGray dark:border-primaryBorderDark"} ${className} ${disabled ? "cursor-not-allowed" : ""} w-full rounded-lg border bg-white dark:bg-secondaryBgDark p-2.5 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder,
maxLength: 1,
ref: actualRef,
onKeyDown,
inputMode: "numeric",
pattern: "[0-9]*"
}
),
icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center cursor-pointer`,
children: icon
}
),
discountValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"span",
{
className: `absolute inset-y-0 ${discountPositionClass} flex items-center pointer-events-none text-sm text-gray-500`,
children: discountValue
}
)
] })
] });
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_error_message4.ErrorMessage,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-red-500 text-[12px] absolute left-0 bottom-0 rtl:left-auto rtl:right-0", children: t(message) })
}
)
]
}
) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative w-full z-40 ", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: `${labelClass}`, children: labelText }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative flex items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"input",
{
...restProps,
disabled,
className: `${icon && (iconPosition === "right" ? "pr-10" : "pl-10")} ${className} ${disabled ? "cursor-not-allowed" : ""} w-full rounded-lg border border-gray-300 dark:border-primaryBorderDark text-DeepNavyColor bg-white dark:bg-secondaryBgDark p-4 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder,
maxLength: 1,
ref: actualRef,
onKeyDown,
inputMode: "numeric",
pattern: "[0-9]*"
}
),
icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center cursor-pointer`,
children: icon
}
),
discountValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"span",
{
className: `absolute text-lg top-[6px] bottom-[2px] right-[2px] rounded-r-lg ${discountPositionClass} flex items-center pointer-events-none text-sm bg-white 2xl:pl-16 md:pl-4 xl:pl-8 pl-6 text-gray-500`,
children: discountValue
}
)
] })
] });
});
// src/components/CommonSimpleCheckBox.tsx
var import_jsx_runtime16 = require("react/jsx-runtime");
var CommonSimpleCheckBox = ({
name,
value,
labelText,
labelDescription,
className,
isMulti = false,
checkBoxList,
...rest
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: " ", children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"div",
{
className: `grid md:grid-cols-2 cursor-pointer gap-4 ${className}`,
children: checkBoxList == null ? void 0 : checkBoxList.map((checkBox, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
"label",
{
className: `bg-white items-center p-4 rounded-xl w-[100%] border border-CyanBlueLight flex-col justify-center cursor-pointer text-[#050606] dark:text-secondaryTextDark text-[16px] font-semibold ${className}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex", children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"input",
{
...rest,
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
name,
value: checkBox.value
}
),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "dark:text-secondaryTextDark", children: checkBox.label })
] }),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pl-6", children: checkBox.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[14px] font-normal text-gray-500 dark:text-lightTextDark", children: checkBox.description }) })
]
},
index
))
}
) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
"label",
{
className: `bg-white items-center pb-4 rounded-xl w-[100%] flex-col justify-center cursor-pointer text-[#050606] dark:text-secondaryTextDark text-[14px] ${className}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex ", children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"input",
{
...rest,
onChange: (e) => rest.onChange && rest.onChange(e),
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
name,
disabled: rest == null ? void 0 : rest.disabledCheckbox
}
),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pt-1", children: labelText })
] }),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pl-6", children: labelDescription && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[14px] font-normal text-gray-500 dark:text-lightTextDark", children: labelDescription }) })
]
}
) });
};
// src/components/CommonTextEditor.tsx
var import_react_hook_form5 = require("react-hook-form");
var import_react_quill = __toESM(require("react-quill"));
var import_quill_snow = require("react-quill/dist/quill.snow.css");
var import_jsx_runtime17 = require("react/jsx-runtime");
var CommonTextEditor = ({ name, control }) => {
const modules = {
toolbar: {
container: [
[{ header: [1, 2, 3, 4, false] }],
// heading levels
[{ size: ["small", false, "large", "huge"] }],
// font size options
[{ font: [] }],
// font family options
["bold", "italic", "underline", "strike", "blockquote"],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" }
],
["link", "image"],
[{ align: [] }],
// text alignment options
[{ color: [] }, { background: [] }],
// text and background colors
["clean"]
// remove formatting button
]
}
};
const validateEditorContent = (value) => {
const strippedValue = value.replace(/<(.|\n)*?>/g, "").trim();
if (!strippedValue) {
return "Content cannot be empty";
}
return true;
};
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_react_hook_form5.Controller,
{
name,
control,
rules: {
validate: {
notEmptyContent: validateEditorContent
}
},
render: ({ field: { onChange, value }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_react_quill.default,
{
modules,
value,
onChange: (content) => {
const isValid = validateEditorContent(content);
if (isValid !== true) {
onChange("");
} else {
onChange(content);
}
}
}
),
error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-500 mt-2", children: error.message })
] })
}
);
};
// src/components/CommonTextField.tsx
var import_error_message5 = require("@hookform/error-message");
var import_react_hook_form6 = require("react-hook-form");
var import_react_i18next4 = require("react-i18next");
var import_jsx_runtime18 = require("react/jsx-runtime");
var CommonTextField = ({
name = "",
control,
errors,
labelText,
onClick = void 0,
labelClass = "",
beforeOnchange,
placeholder,
className = "",
required,
disabled,
translation,
icon,
step,
iconPosition = "left",
discountValue,
onlyAlphabet = false,
wrapperClassName = "",
...restProps
}) => {
const { t } = (0, import_react_i18next4.useTranslation)(translation && translation);
const defaultStep = step != null ? step : restProps.type === "number" ? "1" : void 0;
const handleInputChange = (e, onChange) => {
let value = e.target.value;
if (onlyAlphabet) {
value = value.replace(/[^a-zA-Z\s]/g, "");
} else if (defaultStep === "0.01") {
const regexTwoDecimals = /^\d*\.?\d{0,2}$/;
if (!regexTwoDecimals.test(value)) {
return;
}
} else {
const regexNoDecimals = /^\d*$/;
if (restProps.type === "number