elseware-ui 2.20.2 → 2.20.4

package/README.md

@@ -1,74 +1,74 @@
-# elseware UI
-
-## Folder Hierarchy
-- components: Base UI primitives (buttons, inputs, modals, etc.)
-- compositions: Composite reusable structures built from primitives
-- data: Metadata used on the components/compositions
-- layouts: Page layouts that can be used to quickly structure the page formats
-- styles: Tailwind/CSS stylings
-- types: Custom react types
-- utils: Reusable utility functions and hooks
-
-## Setup
-
-Install the dependendecies via `npm i`.
-
-## Run Storybook 
-
-To test the components and its features start storybook using `npm run dev`.
-
-## Build
-
-Run `npm run build` to build the UI framework.
-
-## Publishing to npm
-
-### Publishing a New Version
-
-1. **Update the version number**:
-   - Before publishing a new version, update the version in `package.json` following [semantic versioning](https://semver.org/).
-   - Example:
-     ```json
-     {
-       "name": "elseware-ui",
-       "version": "1.0.1",
-       ...
-     }
-     ```
-
-2. **Build the UI Framework**:
-   - Run the following command to ensure your changes are built and ready to be published:
-     ```bash
-     npm run build
-     ```
-
-3. **Login to npm**:
-   - If you're not already logged in to npm, log in using:
-     ```bash
-     npm login
-     ```
-
-4. **Publish the package**:
-   - To publish the package, run the following command:
-     ```bash
-     npm publish --access public
-     ```
-   - Make sure the package name in `package.json` is unique and does not conflict with other packages on npm.
-
-### Unpublishing an Older Version
-
-If you need to unpublish a specific version of the package:
-
-1. **Unpublish a specific version**:
-   - To unpublish a specific version of your package (e.g., `1.0.0`), run:
-     ```bash
-     npm unpublish elseware-ui@1.0.0
-     ```
-
-2. **Unpublish the entire package**:
-   - If you need to unpublish the entire package, you can run the following command (not recommended for public packages):
-     ```bash
-     npm unpublish elseware-ui --force
-     ```
-
-   **Note:** Be cautious when using `--force` as npm restricts package unpublishing for packages that are older than 72 hours to avoid breaking dependencies.
+# elseware UI
+
+## Folder Hierarchy
+- components: Base UI primitives (buttons, inputs, modals, etc.)
+- compositions: Composite reusable structures built from primitives
+- data: Metadata used on the components/compositions
+- layouts: Page layouts that can be used to quickly structure the page formats
+- styles: Tailwind/CSS stylings
+- types: Custom react types
+- utils: Reusable utility functions and hooks
+
+## Setup
+
+Install the dependendecies via `npm i`.
+
+## Run Storybook 
+
+To test the components and its features start storybook using `npm run dev`.
+
+## Build
+
+Run `npm run build` to build the UI framework.
+
+## Publishing to npm
+
+### Publishing a New Version
+
+1. **Update the version number**:
+   - Before publishing a new version, update the version in `package.json` following [semantic versioning](https://semver.org/).
+   - Example:
+     ```json
+     {
+       "name": "elseware-ui",
+       "version": "1.0.1",
+       ...
+     }
+     ```
+
+2. **Build the UI Framework**:
+   - Run the following command to ensure your changes are built and ready to be published:
+     ```bash
+     npm run build
+     ```
+
+3. **Login to npm**:
+   - If you're not already logged in to npm, log in using:
+     ```bash
+     npm login
+     ```
+
+4. **Publish the package**:
+   - To publish the package, run the following command:
+     ```bash
+     npm publish --access public
+     ```
+   - Make sure the package name in `package.json` is unique and does not conflict with other packages on npm.
+
+### Unpublishing an Older Version
+
+If you need to unpublish a specific version of the package:
+
+1. **Unpublish a specific version**:
+   - To unpublish a specific version of your package (e.g., `1.0.0`), run:
+     ```bash
+     npm unpublish elseware-ui@1.0.0
+     ```
+
+2. **Unpublish the entire package**:
+   - If you need to unpublish the entire package, you can run the following command (not recommended for public packages):
+     ```bash
+     npm unpublish elseware-ui --force
+     ```
+
+   **Note:** Be cautious when using `--force` as npm restricts package unpublishing for packages that are older than 72 hours to avoid breaking dependencies.

package/build/components/data-entry/form/DirtyObserver.d.ts

@@ -0,0 +1,7 @@
+import { FormikProps } from "formik";
+interface Props {
+    formik: FormikProps<any>;
+    onDirtyChange?: (dirty: boolean) => void;
+}
+declare const DirtyObserver: ({ formik, onDirtyChange }: Props) => null;
+export default DirtyObserver;

package/build/components/data-entry/form/Form.d.ts

@@ -9,5 +9,7 @@ export interface FormProps {
     onChange?: (values: Record<string, any>, meta?: {
         changed: Record<string, any>;
     }) => void;
+    warnOnUnsavedChanges?: boolean;
+    onDirtyChange?: (dirty: boolean) => void;
 }
-export declare const Form: ({ initialValues, validationSchema, enableReinitialize, children, styles, onSubmit, onChange, }: FormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: ({ initialValues, validationSchema, enableReinitialize, children, styles, onSubmit, onChange, warnOnUnsavedChanges, onDirtyChange, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/data-entry/form/UnsavedChangesGuard.d.ts

@@ -0,0 +1,7 @@
+import { FormikProps } from "formik";
+interface Props {
+    formik: FormikProps<any>;
+    enabled?: boolean;
+}
+declare const UnsavedChangesGuard: ({ formik, enabled }: Props) => null;
+export default UnsavedChangesGuard;

package/build/index.es.js

@@ -21023,8 +21023,20 @@ new Transform$1(1, 0, 0);
 Transform$1.prototype;
 
 var createForceLayout = function (nodes, edges, width, height) {
-    // Convert app edges -> D3 compatible edges
-    var d3Links = edges.map(function (e) { return ({
+    // Build fast lookup map
+    var nodeMap = new Map(nodes.map(function (n) { return [n.id, n]; }));
+    // Filter + convert edges safely
+    var d3Links = edges
+        .filter(function (e) {
+        var fromId = typeof e.from === "string" ? e.from : e.from.id;
+        var toId = typeof e.to === "string" ? e.to : e.to.id;
+        var valid = nodeMap.has(fromId) && nodeMap.has(toId);
+        if (!valid) {
+            console.warn("Invalid edge skipped:", e);
+        }
+        return valid;
+    })
+        .map(function (e) { return ({
         source: typeof e.from === "string" ? e.from : e.from.id,
         target: typeof e.to === "string" ? e.to : e.to.id,
         weight: e.weight,
@@ -21034,7 +21046,7 @@ var createForceLayout = function (nodes, edges, width, height) {
         .id(function (d) { return d.id; })
         .distance(120)
         .strength(0.7))
-        .force("charge", manyBody().strength(-300))
+        .force("charge", manyBody().strength(-280))
         .force("center", center(width / 2, height / 2))
         .force("collision", collide().radius(35));
 };
@@ -39379,9 +39391,38 @@ var FormObserver = function (_a) {
     return null;
 };
 
+var DirtyObserver = function (_a) {
+    var formik = _a.formik, onDirtyChange = _a.onDirtyChange;
+    useEffect(function () {
+        if (onDirtyChange) {
+            onDirtyChange(formik.dirty);
+        }
+    }, [formik.dirty, onDirtyChange]);
+    return null;
+};
+
+var UnsavedChangesGuard = function (_a) {
+    var formik = _a.formik, enabled = _a.enabled;
+    useEffect(function () {
+        if (!enabled)
+            return;
+        var handleBeforeUnload = function (e) {
+            if (!formik.dirty)
+                return;
+            e.preventDefault();
+            e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return function () {
+            window.removeEventListener("beforeunload", handleBeforeUnload);
+        };
+    }, [formik.dirty, enabled]);
+    return null;
+};
+
 var Form = function (_a) {
-    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange;
-    return (jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxs(Form$1, { children: [jsx(FormObserver, { formik: formik, onChange: onChange }), jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
+    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange, _c = _a.warnOnUnsavedChanges, warnOnUnsavedChanges = _c === void 0 ? false : _c, onDirtyChange = _a.onDirtyChange;
+    return (jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxs(Form$1, { children: [jsx(UnsavedChangesGuard, { formik: formik, enabled: warnOnUnsavedChanges }), jsx(DirtyObserver, { formik: formik, onDirtyChange: onDirtyChange }), jsx(FormObserver, { formik: formik, onChange: onChange }), jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
 };
 
 var Backdrop = function (_a) {
@@ -69181,7 +69222,7 @@ var ShapeSwitch = function () {
         var shape = e.target.value;
         setConfig(function (prev) { return (__assign$1(__assign$1({}, prev), { global: __assign$1(__assign$1({}, prev.global), { shape: shape }) })); });
     };
-    return (jsx("div", __assign$1({ className: "flex flex-col gap-1 w-fit" }, { children: jsx("select", __assign$1({ value: currentShape, onChange: handleChange, className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        " }, { children: Object.keys(Shape).map(function (shape) { return (jsx("option", __assign$1({ value: shape }, { children: shape }), shape)); }) })) })));
+    return (jsx("div", __assign$1({ className: "flex flex-col gap-1 w-fit" }, { children: jsx("select", __assign$1({ value: currentShape, onChange: handleChange, className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        " }, { children: Object.keys(Shape).map(function (shape) { return (jsx("option", __assign$1({ value: shape }, { children: shape }), shape)); }) })) })));
 };
 
 // useCurrentTheme.ts
@@ -69335,7 +69376,7 @@ var Button$2 = function (_a) {
             _b["hover:cursor-pointer"] = !loading && !disabled,
             _b["transition-all ease-in-out"] = true,
             _b["".concat(styles)] = styles,
-            _b)) }, { children: [jsx("span", { className: "\n          pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100\n          transition-opacity duration-300\n        ", style: {
+            _b)) }, { children: [jsx("span", { className: "\r\n          pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100\r\n          transition-opacity duration-300\r\n        ", style: {
                     background: "\n            radial-gradient(\n              200px circle at var(--glow-x) var(--glow-y),\n              rgba(200,200,200,0.2),\n              transparent 50%\n            )\n          ",
                 } }), loading && jsx(AiOutlineLoading, { className: "animate-spin z-10" }), icon && jsx("div", __assign$1({ className: "z-10" }, { children: icon })), text && jsx("div", __assign$1({ className: "z-10" }, { children: text })), children && jsx("div", __assign$1({ className: "z-10" }, { children: children }))] })));
 };
@@ -142059,7 +142100,7 @@ var GlowWrapper = function (_a) {
         // provide an initial --glow-bg so there's always a valid CSS var
         _b["--glow-bg"] = "radial-gradient(".concat(glowSize, "px circle at -999px -999px, ").concat(glowColor, ", transparent 60%)"),
         _b);
-    return (jsxs("div", __assign$1({ ref: ref, onMouseMove: handleMove, onMouseLeave: handleLeave, className: "relative overflow-hidden group ".concat(className), style: initialStyle }, { children: [jsx("span", { className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ", 
+    return (jsxs("div", __assign$1({ ref: ref, onMouseMove: handleMove, onMouseLeave: handleLeave, className: "relative overflow-hidden group ".concat(className), style: initialStyle }, { children: [jsx("span", { className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ", 
                 // use the CSS variable we update on mouse move
                 style: { background: "var(--glow-bg)" } }), jsx("div", __assign$1({ className: "relative z-10" }, { children: children }))] })));
 };

package/build/index.js

@@ -21050,8 +21050,20 @@ new Transform$1(1, 0, 0);
 Transform$1.prototype;
 
 var createForceLayout = function (nodes, edges, width, height) {
-    // Convert app edges -> D3 compatible edges
-    var d3Links = edges.map(function (e) { return ({
+    // Build fast lookup map
+    var nodeMap = new Map(nodes.map(function (n) { return [n.id, n]; }));
+    // Filter + convert edges safely
+    var d3Links = edges
+        .filter(function (e) {
+        var fromId = typeof e.from === "string" ? e.from : e.from.id;
+        var toId = typeof e.to === "string" ? e.to : e.to.id;
+        var valid = nodeMap.has(fromId) && nodeMap.has(toId);
+        if (!valid) {
+            console.warn("Invalid edge skipped:", e);
+        }
+        return valid;
+    })
+        .map(function (e) { return ({
         source: typeof e.from === "string" ? e.from : e.from.id,
         target: typeof e.to === "string" ? e.to : e.to.id,
         weight: e.weight,
@@ -21061,7 +21073,7 @@ var createForceLayout = function (nodes, edges, width, height) {
         .id(function (d) { return d.id; })
         .distance(120)
         .strength(0.7))
-        .force("charge", manyBody().strength(-300))
+        .force("charge", manyBody().strength(-280))
         .force("center", center(width / 2, height / 2))
         .force("collision", collide().radius(35));
 };
@@ -39406,9 +39418,38 @@ var FormObserver = function (_a) {
     return null;
 };
 
+var DirtyObserver = function (_a) {
+    var formik = _a.formik, onDirtyChange = _a.onDirtyChange;
+    React.useEffect(function () {
+        if (onDirtyChange) {
+            onDirtyChange(formik.dirty);
+        }
+    }, [formik.dirty, onDirtyChange]);
+    return null;
+};
+
+var UnsavedChangesGuard = function (_a) {
+    var formik = _a.formik, enabled = _a.enabled;
+    React.useEffect(function () {
+        if (!enabled)
+            return;
+        var handleBeforeUnload = function (e) {
+            if (!formik.dirty)
+                return;
+            e.preventDefault();
+            e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return function () {
+            window.removeEventListener("beforeunload", handleBeforeUnload);
+        };
+    }, [formik.dirty, enabled]);
+    return null;
+};
+
 var Form = function (_a) {
-    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange;
-    return (jsxRuntime.jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxRuntime.jsxs(Form$1, { children: [jsxRuntime.jsx(FormObserver, { formik: formik, onChange: onChange }), jsxRuntime.jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
+    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange, _c = _a.warnOnUnsavedChanges, warnOnUnsavedChanges = _c === void 0 ? false : _c, onDirtyChange = _a.onDirtyChange;
+    return (jsxRuntime.jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxRuntime.jsxs(Form$1, { children: [jsxRuntime.jsx(UnsavedChangesGuard, { formik: formik, enabled: warnOnUnsavedChanges }), jsxRuntime.jsx(DirtyObserver, { formik: formik, onDirtyChange: onDirtyChange }), jsxRuntime.jsx(FormObserver, { formik: formik, onChange: onChange }), jsxRuntime.jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
 };
 
 var Backdrop = function (_a) {
@@ -69208,7 +69249,7 @@ var ShapeSwitch = function () {
         var shape = e.target.value;
         setConfig(function (prev) { return (__assign$1(__assign$1({}, prev), { global: __assign$1(__assign$1({}, prev.global), { shape: shape }) })); });
     };
-    return (jsxRuntime.jsx("div", __assign$1({ className: "flex flex-col gap-1 w-fit" }, { children: jsxRuntime.jsx("select", __assign$1({ value: currentShape, onChange: handleChange, className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        " }, { children: Object.keys(Shape).map(function (shape) { return (jsxRuntime.jsx("option", __assign$1({ value: shape }, { children: shape }), shape)); }) })) })));
+    return (jsxRuntime.jsx("div", __assign$1({ className: "flex flex-col gap-1 w-fit" }, { children: jsxRuntime.jsx("select", __assign$1({ value: currentShape, onChange: handleChange, className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        " }, { children: Object.keys(Shape).map(function (shape) { return (jsxRuntime.jsx("option", __assign$1({ value: shape }, { children: shape }), shape)); }) })) })));
 };
 
 // useCurrentTheme.ts
@@ -69362,7 +69403,7 @@ var Button$2 = function (_a) {
             _b["hover:cursor-pointer"] = !loading && !disabled,
             _b["transition-all ease-in-out"] = true,
             _b["".concat(styles)] = styles,
-            _b)) }, { children: [jsxRuntime.jsx("span", { className: "\n          pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100\n          transition-opacity duration-300\n        ", style: {
+            _b)) }, { children: [jsxRuntime.jsx("span", { className: "\r\n          pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100\r\n          transition-opacity duration-300\r\n        ", style: {
                     background: "\n            radial-gradient(\n              200px circle at var(--glow-x) var(--glow-y),\n              rgba(200,200,200,0.2),\n              transparent 50%\n            )\n          ",
                 } }), loading && jsxRuntime.jsx(AiOutlineLoading, { className: "animate-spin z-10" }), icon && jsxRuntime.jsx("div", __assign$1({ className: "z-10" }, { children: icon })), text && jsxRuntime.jsx("div", __assign$1({ className: "z-10" }, { children: text })), children && jsxRuntime.jsx("div", __assign$1({ className: "z-10" }, { children: children }))] })));
 };
@@ -142086,7 +142127,7 @@ var GlowWrapper = function (_a) {
         // provide an initial --glow-bg so there's always a valid CSS var
         _b["--glow-bg"] = "radial-gradient(".concat(glowSize, "px circle at -999px -999px, ").concat(glowColor, ", transparent 60%)"),
         _b);
-    return (jsxRuntime.jsxs("div", __assign$1({ ref: ref, onMouseMove: handleMove, onMouseLeave: handleLeave, className: "relative overflow-hidden group ".concat(className), style: initialStyle }, { children: [jsxRuntime.jsx("span", { className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ", 
+    return (jsxRuntime.jsxs("div", __assign$1({ ref: ref, onMouseMove: handleMove, onMouseLeave: handleLeave, className: "relative overflow-hidden group ".concat(className), style: initialStyle }, { children: [jsxRuntime.jsx("span", { className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ", 
                 // use the CSS variable we update on mouse move
                 style: { background: "var(--glow-bg)" } }), jsxRuntime.jsx("div", __assign$1({ className: "relative z-10" }, { children: children }))] })));
 };

package/package.json

@@ -1,125 +1,125 @@
-{
-  "name": "elseware-ui",
-  "version": "2.20.2",
-  "private": false,
-  "description": "A modern and customizable React UI component library by elseware Technology.",
-  "keywords": [
-    "react",
-    "ui-library",
-    "component-library",
-    "tailwind",
-    "design-system",
-    "elseware"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/elsewaretechnologies/elseware-ui.git"
-  },
-  "author": "elseware Technology <elsewaretechnology@gmail.com>",
-  "license": "MIT",
-  "main": "./build/index.js",
-  "module": "./build/index.es.js",
-  "types": "./build/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./build/index.es.js",
-      "require": "./build/index.js",
-      "types": "./build/index.d.ts"
-    }
-  },
-  "files": [
-    "build"
-  ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "rollup -c",
-    "build:storybook": "storybook build",
-    "clean": "rm -rf build dist node_modules/.cache",
-    "prepare": "npm run build",
-    "release": "npm publish --access public"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "tailwindcss": ">=3.0.0"
-  },
-  "dependencies": {
-    "@headlessui/react": "^2.1.8",
-    "@mdxeditor/editor": "^3.36.0",
-    "chart.js": "^4.4.4",
-    "classnames": "^2.5.1",
-    "cloudinary-react": "^1.8.1",
-    "d3": "^7.9.0",
-    "d3-force": "^3.0.0",
-    "emoji-flags": "^1.3.0",
-    "formik": "^2.4.5",
-    "framer-motion": "^12.23.24",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-chartjs-2": "^5.2.0",
-    "react-icons": "^4.12.0",
-    "react-simple-maps": "^3.0.0",
-    "react-toastify": "^10.0.5",
-    "react-world-flags": "^1.6.0",
-    "yup": "^1.3.3"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/addon-onboarding": "^8.5.0",
-    "@storybook/blocks": "^8.5.0",
-    "@storybook/preset-create-react-app": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-webpack5": "^8.5.0",
-    "@storybook/test": "^8.5.0",
-    "@types/d3": "^7.4.3",
-    "@types/d3-force": "^3.0.10",
-    "@types/emoji-flags": "^1.3.3",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^24.0.3",
-    "@types/react": "^19.0.10",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-chartjs-2": "^2.5.7",
-    "@types/react-dom": "^19.0.4",
-    "@types/react-simple-maps": "^3.0.6",
-    "@types/react-world-flags": "^1.6.0",
-    "autoprefixer": "^10.4.16",
-    "cssnano": "^6.0.3",
-    "eslint-plugin-storybook": "^0.11.2",
-    "postcss": "^8.4.33",
-    "prop-types": "^15.8.1",
-    "react-scripts": "5.0.1",
-    "rollup": "^2.79.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "storybook": "^8.5.0",
-    "tailwindcss": "^3.4.1",
-    "tslib": "^2.6.2",
-    "typescript": "^4.9.5"
-  }
-}
+{
+  "name": "elseware-ui",
+  "version": "2.20.4",
+  "private": false,
+  "description": "A modern and customizable React UI component library by elseware Technology.",
+  "keywords": [
+    "react",
+    "ui-library",
+    "component-library",
+    "tailwind",
+    "design-system",
+    "elseware"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elsewaretechnologies/elseware-ui.git"
+  },
+  "author": "elseware Technology <elsewaretechnology@gmail.com>",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "module": "./build/index.es.js",
+  "types": "./build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.es.js",
+      "require": "./build/index.js",
+      "types": "./build/index.d.ts"
+    }
+  },
+  "files": [
+    "build"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "rollup -c",
+    "build:storybook": "storybook build",
+    "clean": "rm -rf build dist node_modules/.cache",
+    "prepare": "npm run build",
+    "release": "npm publish --access public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=3.0.0"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.1.8",
+    "@mdxeditor/editor": "^3.36.0",
+    "chart.js": "^4.4.4",
+    "classnames": "^2.5.1",
+    "cloudinary-react": "^1.8.1",
+    "d3": "^7.9.0",
+    "d3-force": "^3.0.0",
+    "emoji-flags": "^1.3.0",
+    "formik": "^2.4.5",
+    "framer-motion": "^12.23.24",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-icons": "^4.12.0",
+    "react-simple-maps": "^3.0.0",
+    "react-toastify": "^10.0.5",
+    "react-world-flags": "^1.6.0",
+    "yup": "^1.3.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/addon-onboarding": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/preset-create-react-app": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-webpack5": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@types/d3": "^7.4.3",
+    "@types/d3-force": "^3.0.10",
+    "@types/emoji-flags": "^1.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.0.10",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-chartjs-2": "^2.5.7",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-simple-maps": "^3.0.6",
+    "@types/react-world-flags": "^1.6.0",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.3",
+    "eslint-plugin-storybook": "^0.11.2",
+    "postcss": "^8.4.33",
+    "prop-types": "^15.8.1",
+    "react-scripts": "5.0.1",
+    "rollup": "^2.79.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^8.5.0",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^4.9.5"
+  }
+}