@macive/ui 0.0.13 → 0.0.15

package/dist/src/components/Upload/components/UploaderInput/FileUploadInput.js

@@ -7,13 +7,17 @@ exports.PendingUploadFileList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../../utils");
+const Button_1 = require("../../../Button");
+const Icons_1 = require("../../../Icons");
 const utils_2 = require("../../utils");
 const FileViewer_1 = require("../FileViewer");
 const Thumbanail_1 = __importDefault(require("../Thumbnail/Thumbanail"));
 const UploadProvider_1 = require("../UploadProvider");
+const FileUploadInput_classnames_1 = __importDefault(require("./FileUploadInput.classnames"));
 function FileUploadInput({ acceptFileTypes, updateUploadsList }) {
     const { error, files, setFiles, removeFile, progress } = (0, UploadProvider_1.useUpload)();
-    const inputRef = (0, react_1.useRef)();
+    const inputRef = (0, react_1.useRef)(null);
+    const [dragging, setDragging] = (0, react_1.useState)(false);
     const acceptFilesLike = (0, utils_2.getAceptedFileTypesValues)(acceptFileTypes);
     const initiateUpload = async (file) => {
         const newAttachments = await setFiles(file);
@@ -21,7 +25,6 @@ function FileUploadInput({ acceptFileTypes, updateUploadsList }) {
             updateUploadsList === null || updateUploadsList === void 0 ? void 0 : updateUploadsList(newAttachments);
         }
     };
-    const [dragging, setDragging] = (0, react_1.useState)(false);
     const handleDragStart = (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -35,30 +38,19 @@ function FileUploadInput({ acceptFileTypes, updateUploadsList }) {
         e.stopPropagation();
         e.preventDefault();
         setDragging(false);
+        initiateUpload(e);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'relative flex items-center justify-self-center', children: (0, jsx_runtime_1.jsxs)("div", { className: 'relative w-full', onDragStart: handleDragStart, onDragEnter: handleDragStart, onDragOver: handleDragOver, onDrop: (e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        handleDrop(e);
-                        initiateUpload(e);
-                    }, children: [(0, jsx_runtime_1.jsx)(Thumbanail_1.default, { acceptFileTypes: acceptFileTypes, thumbnailSize: 'normal', hasDragAndDrop: true, dragging: dragging }), (0, jsx_runtime_1.jsx)("input", { accept: acceptFilesLike, type: 'file', multiple: true, className: 'absolute inset-0 z-50  m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none', title: '', onChange: (e) => {
-                                initiateUpload(e);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.fileUploadInput__container, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(FileUploadInput_classnames_1.default.fileUploadInput__dropzone, dragging && FileUploadInput_classnames_1.default['fileUploadInput__dropzone--dragging']), style: { borderRadius: 'var(--p-border-radius-3)' }, onDragEnter: handleDragStart, onDragOver: handleDragOver, onDrop: handleDrop, children: [(0, jsx_runtime_1.jsx)(Thumbanail_1.default, { acceptFileTypes: acceptFileTypes, thumbnailSize: 'normal', hasDragAndDrop: true, dragging: dragging }), (0, jsx_runtime_1.jsx)("input", { accept: acceptFilesLike, type: 'file', multiple: true, className: FileUploadInput_classnames_1.default.fileUploadInput__input, title: 'input', onChange: (e) => {
+                                if (e.target.files)
+                                    initiateUpload(e);
                             }, ref: inputRef })] }) }), (0, jsx_runtime_1.jsx)(exports.PendingUploadFileList, { files: files, removeFile: removeFile, progress: progress, error: error })] }));
 }
 exports.default = FileUploadInput;
 const PendingUploadFileList = ({ files, removeFile, progress, error, }) => {
-    return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: files === null || files === void 0 ? void 0 : files.map((file, idx) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: ' relative flex cursor-move select-none flex-col items-center overflow-hidden rounded border bg-gray-100  text-center dark:bg-gray-600', style: { paddingTop: '100%' }, children: [(0, jsx_runtime_1.jsx)("button", { className: 'bg-skin-primary absolute top-0 right-0 z-50 rounded-bl p-1 focus:outline-none', type: 'button', onClick: () => removeFile(file.name) }), (0, jsx_runtime_1.jsx)("div", { className: 'preview dh-full dw-full absolute inset-0 z-0  border-4 border-white object-cover dark:border-gray-600', children: (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: {
-                                ...file,
-                                src: URL.createObjectURL(file),
-                                type: (0, utils_2.getFileTypeCategory)(file === null || file === void 0 ? void 0 : file.type) || 'image',
-                            } }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'bg-skin-primary absolute bottom-0 left-0 right-0 flex flex-col bg-opacity-50 p-2 text-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'hi w-full truncate font-bold text-gray-900', children: file === null || file === void 0 ? void 0 : file.name }), (0, jsx_runtime_1.jsxs)("span", { className: 'text-xs text-gray-900', children: [file === null || file === void 0 ? void 0 : file.size, " ..."] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-0 z-40 transition-colors duration-300' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute bottom-0 w-full rounded-full bg-gray-200 dark:bg-gray-700', children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(' rounded-fulld line-clamp-1 rounded-r-full p-[1px] text-center text-xs font-medium leading-none text-blue-100', error
-                                ? '!w-full bg-red-500'
-                                : progress === 100
-                                    ? '!rounded-none bg-green-600'
-                                    : 'bg-blue-600'), style: { width: `${progress}%` }, children: error ? error : `${progress}%` }) })] }, idx));
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: files === null || files === void 0 ? void 0 : files.map((file, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__item, children: [(0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__deleteButton, role: 'button', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaTrash, destructive: true, onClick: () => removeFile(file.name) }) }), (0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__preview, children: (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: {
+                            ...file,
+                            src: URL.createObjectURL(file),
+                            type: (0, utils_2.getFileTypeCategory)(file === null || file === void 0 ? void 0 : file.type) || 'image',
+                        } }) }), (0, jsx_runtime_1.jsxs)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__fileInfo, children: [(0, jsx_runtime_1.jsx)("span", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__fileName, children: file === null || file === void 0 ? void 0 : file.name }), (0, jsx_runtime_1.jsxs)("span", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__fileSize, children: [file === null || file === void 0 ? void 0 : file.size, " ..."] })] }), (0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__progressBar, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(FileUploadInput_classnames_1.default.pendingUploadFileList__progress, error && FileUploadInput_classnames_1.default['pendingUploadFileList__progress--error'], progress === 100 && FileUploadInput_classnames_1.default['pendingUploadFileList__progress--complete'], !error && progress < 100 && FileUploadInput_classnames_1.default['pendingUploadFileList__progress--loading']), style: { width: `${error ? 100 : progress}%` }, children: error ? error === null || error === void 0 ? void 0 : error.slice(0, 15) : `${progress}%` }) })] }, idx))) }));
 };
 exports.PendingUploadFileList = PendingUploadFileList;

package/dist/src/components/VerticalStack/VerticalStack.js

@@ -7,7 +7,7 @@ exports.VerticalStack = void 0;
 const react_1 = __importDefault(require("react"));
 const css_1 = require("../../utilities/css");
 const VerticalStack_classnames_1 = __importDefault(require("./VerticalStack.classnames"));
-const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, height, width, reverseOrder = false, ...restProps }) => {
+const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, height, width, reverseOrder = false, spacer, ...restProps }) => {
     const heightClasses = {
         auto: 'h-auto',
         full: 'h-full',
@@ -20,7 +20,7 @@ const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, heig
         max: 'w-max',
         none: '',
     }[width !== null && width !== void 0 ? width : 'none'];
-    const className = (0, css_1.classNames)(VerticalStack_classnames_1.default.VerticalStack, (as === 'ul' || as === 'ol') && VerticalStack_classnames_1.default.listReset, as === 'fieldset' && VerticalStack_classnames_1.default.fieldsetReset, heightClasses, widthClasses);
+    const className = (0, css_1.classNames)(VerticalStack_classnames_1.default.VerticalStack, (as === 'ul' || as === 'ol') && VerticalStack_classnames_1.default.listReset, as === 'fieldset' && VerticalStack_classnames_1.default.fieldsetReset, heightClasses, widthClasses, spacer && '');
     const style = {
         '--pc-vertical-stack-align': align ? `${align}` : '',
         '--pc-vertical-stack-inline-align': inlineAlign ? `${inlineAlign}` : '',

package/dist/src/components/index.js

@@ -14,6 +14,7 @@ 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 });
+exports.Card = void 0;
 __exportStar(require("./ActionMenu"), exports);
 __exportStar(require("./AppProvider"), exports);
 __exportStar(require("./Autocomplete"), exports);
@@ -45,6 +46,8 @@ __exportStar(require("./Image"), exports);
 __exportStar(require("./KeyboardKey"), exports);
 __exportStar(require("./Label"), exports);
 __exportStar(require("./LegacyCard"), exports);
+var LegacyCard_1 = require("./LegacyCard");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return LegacyCard_1.LegacyCard; } });
 __exportStar(require("./LegacyStack"), exports);
 __exportStar(require("./Link"), exports);
 __exportStar(require("./Listbox"), exports);

package/dist/src/index.js

@@ -15,13 +15,14 @@ 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 });
-exports.rgbString = exports.rgbaString = exports.hslToRgb = exports.hsbToRgb = exports.hsbToHex = exports.hexToRgb = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.Navigation = exports.isNavigationItemActive = exports.Loading = exports.Layout = exports.Input = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTree = exports.ButtonGroup = exports.CopyButton = exports.buttonsFrom = exports.buttonFrom = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.AlphaTabs = exports.ActionList = void 0;
-exports.useIndexResourceState = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = void 0;
+exports.hsbToHex = exports.hexToRgb = exports.capitalize = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.isNavigationItemActive = exports.Navigation = exports.Loading = exports.Layout = exports.Input = exports.InlineError = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DatePicker = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTree = exports.ButtonGroup = exports.buttonsFrom = exports.buttonFrom = exports.CopyButton = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.Tabs = exports.AlphaTabs = exports.ActionList = void 0;
+exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = void 0;
 __exportStar(require("./components"), exports);
 var ActionList_1 = require("./components/ActionList");
 Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });
 var AlphaTabs_1 = require("./components/AlphaTabs");
 Object.defineProperty(exports, "AlphaTabs", { enumerable: true, get: function () { return AlphaTabs_1.AlphaTabs; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return AlphaTabs_1.AlphaTabs; } });
 var Avatar_1 = require("./components/Avatar");
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
 var Badge_1 = require("./components/Badge");
@@ -30,9 +31,9 @@ Object.defineProperty(exports, "BadgeProgressValue", { enumerable: true, get: fu
 Object.defineProperty(exports, "BadgeStatusValue", { enumerable: true, get: function () { return Badge_1.StatusValue; } });
 var Button_1 = require("./components/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return Button_1.CopyButton; } });
 Object.defineProperty(exports, "buttonFrom", { enumerable: true, get: function () { return Button_1.buttonFrom; } });
 Object.defineProperty(exports, "buttonsFrom", { enumerable: true, get: function () { return Button_1.buttonsFrom; } });
-Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return Button_1.CopyButton; } });
 var ButtonGroup_1 = require("./components/ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
 var CheckboxTree_1 = require("./components/CheckboxTree");
@@ -43,6 +44,8 @@ var ContextualSaveBar_1 = require("./components/ContextualSaveBar");
 Object.defineProperty(exports, "ContextualSaveBar", { enumerable: true, get: function () { return ContextualSaveBar_1.ContextualSaveBar; } });
 var DataTable_1 = require("./components/DataTable");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return DataTable_1.DataTable; } });
+var DatePicker_1 = require("./components/DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 var FlexBox_1 = require("./components/FlexBox");
 Object.defineProperty(exports, "FlexBox", { enumerable: true, get: function () { return FlexBox_1.FlexBox; } });
 var IndexFilters_1 = require("./components/IndexFilters");
@@ -53,6 +56,8 @@ var IndexTable_1 = require("./components/IndexTable");
 Object.defineProperty(exports, "IndexTable", { enumerable: true, get: function () { return IndexTable_1.IndexTable; } });
 var Indicator_1 = require("./components/Indicator");
 Object.defineProperty(exports, "Indicator", { enumerable: true, get: function () { return Indicator_1.Indicator; } });
+var InlineError_1 = require("./components/InlineError");
+Object.defineProperty(exports, "InlineError", { enumerable: true, get: function () { return InlineError_1.InlineError; } });
 var Input_1 = require("./components/Input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
 var Layout_1 = require("./components/Layout");
@@ -60,8 +65,8 @@ Object.defineProperty(exports, "Layout", { enumerable: true, get: function () {
 var Loading_1 = require("./components/Loading");
 Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.Loading; } });
 var Navigation_1 = require("./components/Navigation");
-Object.defineProperty(exports, "isNavigationItemActive", { enumerable: true, get: function () { return Navigation_1.isNavigationItemActive; } });
 Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return Navigation_1.Navigation; } });
+Object.defineProperty(exports, "isNavigationItemActive", { enumerable: true, get: function () { return Navigation_1.isNavigationItemActive; } });
 var VerticalMenuContent_1 = require("./components/NavigationV1/VerticalMenuContent");
 Object.defineProperty(exports, "CollapsedMenuItemList", { enumerable: true, get: function () { return VerticalMenuContent_1.CollapsedMenuItemList; } });
 Object.defineProperty(exports, "VerticalCollapsedMenuItem", { enumerable: true, get: function () { return VerticalMenuContent_1.VerticalCollapsedMenuItem; } });
@@ -95,21 +100,25 @@ Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () {
 var Upload_1 = require("./components/Upload");
 Object.defineProperty(exports, "FileViewer", { enumerable: true, get: function () { return Upload_1.FileViewer; } });
 Object.defineProperty(exports, "Upload", { enumerable: true, get: function () { return Upload_1.Upload; } });
+var capitalize_1 = require("./utilities/capitalize");
+Object.defineProperty(exports, "capitalize", { enumerable: true, get: function () { return capitalize_1.capitalize; } });
 var color_transformers_1 = require("./utilities/color-transformers");
 Object.defineProperty(exports, "hexToRgb", { enumerable: true, get: function () { return color_transformers_1.hexToRgb; } });
 Object.defineProperty(exports, "hsbToHex", { enumerable: true, get: function () { return color_transformers_1.hsbToHex; } });
 Object.defineProperty(exports, "hsbToRgb", { enumerable: true, get: function () { return color_transformers_1.hsbToRgb; } });
 Object.defineProperty(exports, "hslToRgb", { enumerable: true, get: function () { return color_transformers_1.hslToRgb; } });
-Object.defineProperty(exports, "rgbaString", { enumerable: true, get: function () { return color_transformers_1.rgbaString; } });
 Object.defineProperty(exports, "rgbString", { enumerable: true, get: function () { return color_transformers_1.rgbString; } });
 Object.defineProperty(exports, "rgbToHex", { enumerable: true, get: function () { return color_transformers_1.rgbToHex; } });
 Object.defineProperty(exports, "rgbToHsb", { enumerable: true, get: function () { return color_transformers_1.rgbToHsb; } });
 Object.defineProperty(exports, "rgbToHsl", { enumerable: true, get: function () { return color_transformers_1.rgbToHsl; } });
+Object.defineProperty(exports, "rgbaString", { enumerable: true, get: function () { return color_transformers_1.rgbaString; } });
 var css_1 = require("./utilities/css");
 Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return css_1.classNames; } });
 var device_type_1 = require("./utilities/device-type");
 Object.defineProperty(exports, "useDeviceType", { enumerable: true, get: function () { return device_type_1.useDeviceType; } });
 var frame_1 = require("./utilities/frame");
 Object.defineProperty(exports, "useFrame", { enumerable: true, get: function () { return frame_1.useFrame; } });
+var renderSafeTemplate_1 = require("./utilities/renderSafeTemplate");
+Object.defineProperty(exports, "renderSafeTemplate", { enumerable: true, get: function () { return renderSafeTemplate_1.renderSafeTemplate; } });
 var use_index_resource_state_1 = require("./utilities/use-index-resource-state");
 Object.defineProperty(exports, "useIndexResourceState", { enumerable: true, get: function () { return use_index_resource_state_1.useIndexResourceState; } });

package/dist/src/utilities/capitalize.js

@@ -1,8 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.capitalize = void 0;
-function capitalize(word = '') {
-    const wordLower = word.toLowerCase();
-    return wordLower.charAt(0).toUpperCase() + wordLower.slice(1);
+/**
+ * Capitalizes the first letter of a string and makes the rest of the string lowercase.
+ * @param {string | null | undefined} str - The input string to be processed. Can be a string, null, or undefined.
+ * @returns {string} - The formatted string with the first letter capitalized and the rest lowercase.
+ *                     If the input is null or undefined, an empty string is returned.
+ * @example
+ * capitalizeFirstLetter("hello"); // Returns "Hello"
+ * capitalizeFirstLetter("HELLO"); // Returns "Hello"
+ * capitalizeFirstLetter(null);    // Returns ""
+ * capitalizeFirstLetter(undefined); // Returns ""
+ */
+function capitalize(str) {
+    // Ensure the input is treated as a string (convert null/undefined to an empty string)
+    const inputString = str || '';
+    // Return the formatted string
+    return inputString.charAt(0).toUpperCase() + inputString.slice(1).toLowerCase();
 }
 exports.capitalize = capitalize;

package/dist/src/utilities/renderSafeTemplate.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderSafeTemplate = void 0;
+/**
+ * Renders a template string by replacing placeholders with sanitized values.
+ * @param {string} template - The template string containing placeholders (e.g., `{{key}}`).
+ * @param {Record<ExtractPlaceholders<Template>, string>} values - An object containing key-value pairs for replacement.
+ * @returns {string} - The processed string with placeholders replaced and sanitized.
+ * @example
+ * // Scenario 1: Basic usage
+ * const template1 = "Hello, {{name}}! Welcome to {{app}}.";
+ * const values1 = { name: "John", app: "MyApp" };
+ * renderSafeTemplate(template1, values1); // Returns "Hello, John! Welcome to MyApp."
+ *
+ * @example
+ * // Scenario 2: Sanitization to prevent XSS
+ * const template2 = "Hello, {{name}}! Welcome to {{app}}.";
+ * const values2 = { name: "<script>alert('XSS')</script>John", app: "MyApp" };
+ * renderSafeTemplate(template2, values2); // Returns "Hello, &lt;script&gt;alert('XSS')&lt;/script&gt;John! Welcome to MyApp."
+ *
+ * @example
+ * // Scenario 3: Missing placeholder key
+ * const template3 = "Hello, {{name}}! Welcome to {{app}}.";
+ * const values3 = { name: "John" }; // `app` key is missing
+ * renderSafeTemplate(template3, values3); // Returns "Hello, John! Welcome to ."
+ *
+ * @example
+ * // Scenario 4: HTML link replacement
+ * const template4 = "Visit us at <a href='{{link}}'>{{link}}</a>.";
+ * const values4 = { link: "https://example.com" };
+ * renderSafeTemplate(template4, values4); // Returns "Visit us at <a href='https://example.com'>https://example.com</a>."
+ */
+function renderSafeTemplate(template, values) {
+    // Sanitize function to prevent XSS or unwanted HTML/script injection
+    const sanitize = (input) => {
+        return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    };
+    // Replace placeholders with sanitized values
+    return template.replace(/\{\{(\w+)\}\}/g, (_, key) => sanitize(values[key] || ''));
+}
+exports.renderSafeTemplate = renderSafeTemplate;