tp-react-elements 1.3.20 → 2.0.1

package/README.md

@@ -2,6 +2,26 @@
 
 A comprehensive React form library built with Material-UI and React Hook Form, designed for enterprise applications.
 
+## 🆕 What's New
+
+> Quick-glance log of notable fixes and changes. Newest entries first.
+> Each entry should also be reflected in the affected component's
+> Storybook docs (`*.stories.tsx` → `meta.parameters.docs.description`)
+> so consumers see the same explanation in both places.
+
+- **`SingleSelectSearchApi`** — Fixed a `Tooltip`/Popper mis-anchoring bug where
+  the selected-value tooltip rendered pinned to the viewport's top-left corner
+  (0,0) instead of near the input when the field sat inside an
+  `overflow: hidden` ancestor (e.g. a table cell in `material-react-table` /
+  `GenericPaginatedGrid`). The `Tooltip` is **retained** (not removed) and now
+  uses `placement="top-start"`, `arrow`, `disableInteractive`, and a
+  `slotProps.popper` block with Popper.js modifiers (`offset`,
+  `preventOverflow` with `boundary: 'clippingParents'`, `flip`) so it
+  portal-renders to `document.body` and stays correctly anchored. See the
+  **"Tooltip inside a clipped container"** story in
+  `SingleSelectSearchApi.stories.tsx` for a live repro, and the component's
+  JSDoc for implementation notes.
+
 ## 🚀 Features
 
 - **🔄 Seamless Integration** - Built on React Hook Form for performance and flexibility

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var InputRangeField = {};
 
-export { DateInput as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var DateInput = {};
 
-export { InputRangeField as __exports };
+export { DateInput as __exports };

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DefinedRange = {};
 
-export { Calendar as __exports };
+export { DefinedRange as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DefinedRange = {};
+var DateRange = {};
 
-export { DefinedRange as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var Calendar = {};
 
-export { DateRange as __exports };
+export { Calendar as __exports };

package/dist/components/Form/FormRender.esm.js

@@ -1,5 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { lazy, Suspense } from 'react';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -10,14 +18,6 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

package/dist/components/FormComponents/Select/SingleSelectSearchApi.d.ts

@@ -21,6 +21,23 @@ export interface SearchOption {
  * ### API call guard
  * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
  * debounce delay — preventing a request per keystroke.
+ *
+ * ### Selected-value tooltip & anchoring inside clipped containers
+ * The input is wrapped in a MUI `Tooltip` showing `resolvedValue.label` on
+ * hover (useful when a narrow column truncates the label). The `Tooltip` is
+ * configured with `placement="top-start"`, `arrow`, `disableInteractive`, and
+ * a `slotProps.popper` block carrying Popper.js modifiers — `offset`,
+ * `preventOverflow` (`boundary: 'clippingParents'`), and `flip`.
+ *
+ * This keeps the tooltip correctly anchored to the input even when the field
+ * sits inside an `overflow: hidden` ancestor (e.g. a table cell in
+ * `material-react-table` / `GenericPaginatedGrid`) — without this
+ * configuration, MUI's Popper can mis-anchor and pin the tooltip to the
+ * viewport's top-left corner (0,0) instead of near the input. The fix
+ * deliberately *keeps* the `Tooltip` (rather than removing it) by letting it
+ * portal-render to `document.body` and resolving its position against the
+ * clipping ancestor's boundary. See the "Tooltip inside a clipped container"
+ * Storybook story for a live repro.
  */
 declare const SingleSelectSearchApi: ({ props, variant, minSearchLength, debounceMs, fetchOptions, }: {
     props: FormRenderProps;

package/dist/components/FormComponents/Select/SingleSelectSearchApi.esm.js

@@ -49,6 +49,23 @@ function useDebounce(value, delayMs) {
  * ### API call guard
  * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
  * debounce delay — preventing a request per keystroke.
+ *
+ * ### Selected-value tooltip & anchoring inside clipped containers
+ * The input is wrapped in a MUI `Tooltip` showing `resolvedValue.label` on
+ * hover (useful when a narrow column truncates the label). The `Tooltip` is
+ * configured with `placement="top-start"`, `arrow`, `disableInteractive`, and
+ * a `slotProps.popper` block carrying Popper.js modifiers — `offset`,
+ * `preventOverflow` (`boundary: 'clippingParents'`), and `flip`.
+ *
+ * This keeps the tooltip correctly anchored to the input even when the field
+ * sits inside an `overflow: hidden` ancestor (e.g. a table cell in
+ * `material-react-table` / `GenericPaginatedGrid`) — without this
+ * configuration, MUI's Popper can mis-anchor and pin the tooltip to the
+ * viewport's top-left corner (0,0) instead of near the input. The fix
+ * deliberately *keeps* the `Tooltip` (rather than removing it) by letting it
+ * portal-render to `document.body` and resolving its position against the
+ * clipping ancestor's boundary. See the "Tooltip inside a clipped container"
+ * Storybook story for a live repro.
  */
 const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs = 300, fetchOptions, }) => {
     // ── Stable references from props ──────────────────────────────────────────
@@ -188,7 +205,53 @@ const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs
                     }, slotProps: {
                         popper: { sx: { zIndex: 20000 } },
                         listbox: { sx: { fontSize: '11px' } },
-                    }, PaperComponent: ({ children, ...paperProps }) => (jsx(Paper, { elevation: 4, ...paperProps, children: children })), renderInput: (params) => (jsx(Tooltip, { title: resolvedValue?.label ?? '', children: jsx(TextField, { ...params, error: isError && !formValue, label: variant !== 'standard'
+                    }, PaperComponent: ({ children, ...paperProps }) => (jsx(Paper, { elevation: 4, ...paperProps, children: children })), renderInput: (params) => (jsx(Tooltip, { title: resolvedValue?.label ?? '', placement: "top-start", arrow: true, disableInteractive: true, 
+                        // Fixes a Popper mis-anchoring bug where the tooltip rendered
+                        // pinned to the viewport's top-left corner when this field
+                        // sits inside an `overflow: hidden` ancestor (e.g. a table
+                        // cell in material-react-table / GenericPaginatedGrid).
+                        //
+                        // ROOT CAUSE: Popper.js ships a built-in `hide` modifier that
+                        // runs `detectOverflow` against the `clippingParents` boundary.
+                        // Because our reference element (the input) sits inside an
+                        // `overflow: hidden` table cell, Popper decides the reference
+                        // is "hidden" relative to that clipping boundary and collapses
+                        // the popper to `inset: 0 auto auto 0` (the body's top-left
+                        // origin) — regardless of `placement`/`offset`/`preventOverflow`
+                        // configuration. That's the (0,0) pin we were seeing.
+                        //
+                        // FIX: explicitly disable the `hide` modifier (we don't want
+                        // "hide when clipped" behaviour — we want the tooltip to
+                        // escape the clipping ancestor instead), and measure overflow
+                        // against the `viewport` (via `rootBoundary`) rather than the
+                        // clipping table cell, since the whole point is to stay
+                        // visible in the viewport even when the anchor is inside a
+                        // clipped container. `disablePortal: false` (the default)
+                        // portal-renders the tooltip to `document.body` so it can
+                        // visually escape the clipping ancestor.
+                        slotProps: {
+                            popper: {
+                                sx: { zIndex: 20001 },
+                                modifiers: [
+                                    { name: 'hide', enabled: false },
+                                    { name: 'offset', options: { offset: [0, 6] } },
+                                    {
+                                        name: 'preventOverflow',
+                                        options: {
+                                            boundary: 'clippingParents',
+                                            rootBoundary: 'viewport',
+                                            altAxis: true,
+                                            padding: 8,
+                                        },
+                                    },
+                                    {
+                                        name: 'flip',
+                                        enabled: true,
+                                        options: { rootBoundary: 'viewport', fallbackPlacements: ['bottom-start', 'top-start', 'right', 'left'] },
+                                    },
+                                ],
+                            },
+                        }, children: jsx(TextField, { ...params, error: isError && !formValue, label: variant !== 'standard'
                                 ? `${label}${required ? ' *' : ''}`
                                 : '', placeholder: placeholder, inputProps: {
                                 ...params.inputProps,

package/dist/components/FormComponents/index.esm.js

@@ -1,25 +1,39 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
+export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
 export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
 export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
-export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
-export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+import 'react/jsx-runtime';
+import '@mui/material';
+import 'react';
+import 'react-hook-form';
+import 'dayjs';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
+import '@mui/icons-material/PictureAsPdf';
+import '@mui/icons-material/TableChart';
+import '@mui/icons-material/Description';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as TimePicker } from './TimePicker/TimePicker.esm.js';

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm5.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/package.json

@@ -1,211 +1,211 @@
-{
-  "name": "tp-react-elements",
-  "version": "1.3.20",
-  "private": false,
-  "type": "module",
-  "description": "React form components library built with React Hook Form and Yup",
-  "main": "dist/index.esm.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./form": {
-      "import": "./dist/components/Form/index.esm.js",
-      "types": "./dist/components/Form/index.d.ts"
-    },
-    "./utils": {
-      "import": "./dist/utils/index.esm.js",
-      "types": "./dist/utils/index.d.ts"
-    },
-    "./validation": {
-      "import": "./dist/validation/index.esm.js",
-      "types": "./dist/validation/index.d.ts"
-    },
-    "./components/*": {
-      "import": "./dist/components/*/index.esm.js",
-      "types": "./dist/components/*/index.d.ts"
-    },
-    "./theme": {
-      "import": "./dist/theme/index.esm.js",
-      "types": "./dist/theme/index.d.ts"
-    },
-    "./package.json": "./package.json"
-  },
-  "bin": {
-    "install-tp-form-deps": "./scripts/install-deps.js"
-  },
-  "files": [
-    "dist",
-    "scripts"
-  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "preview": "vite preview",
-    "clean": "rimraf dist dist-dev",
-    "type-check": "tsc --noEmit",
-    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.json && echo \"✅ TypeScript declaration files generated successfully!\"",
-    "build:types:qa": "tsc --project tsconfig.build.qa.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.qa.json && echo \"✅ QA declaration files (with maps) generated!\"",
-    "build:esm": "npm run clean && rollup -c rollup.config.js",
-    "build:lib": "npm run clean && rollup -c rollup.config.js && npm run build:types && echo \"✅ Complete library build finished! ESM build completed successfully!\"",
-    "build:lib:qa": "npm run clean && rollup -c rollup.config.js && npm run build:types:qa && echo \"✅ QA build finished (includes .d.ts.map)\"",
-    "analyze": "npm run clean && cross-env BUNDLE_ANALYZE=true rollup -c rollup.config.js",
-    "analyze:dev": "cross-env ANALYZE_BUNDLE=true vite build",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --ext ts,tsx --fix",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
-    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "version:patch": "npm version patch",
-    "version:minor": "npm version minor",
-    "version:major": "npm version major",
-    "publish:prepare": "npm run build:lib && npm run type-check",
-    "publish:npm": "npm publish",
-    "publish:beta": "npm publish --tag beta",
-    "publish:patch": "npm version patch --no-git-tag-version && npm publish",
-    "publish:minor": "npm version minor --no-git-tag-version && npm publish",
-    "publish:major": "npm version major --no-git-tag-version && npm publish",
-    "publish:auto": "npm run publish:prepare && npm publish",
-    "install-peers": "install-tp-form-deps",
-    "package-build": "rollup -c --bundleConfigAsCjs",
-    "prepublishOnly": "npm run build:lib"
-  },
-  "peerDependencies": {
-    "@tanstack/react-query": ">=5.0.0 <6.0.0",
-    "@emotion/react": ">=11.14.0 <13.0.0",
-    "@emotion/styled": ">=11.14.1 <13.0.0",
-    "@hookform/error-message": ">=2.0.1 <3.0.0",
-    "@hookform/resolvers": ">=5.2.1 <6.0.0",
-    "@mui/icons-material": ">=7.3.1 <8.0.0",
-    "@mui/material": ">=7.3.1 <8.0.0",
-    "@mui/x-date-pickers": ">=8.10.2 <9.0.0",
-    "crypto-js": ">=4.2.0 <5.0.0",
-    "dayjs": ">=1.11.13 <2.0.0",
-    "file-saver": ">=2.0.5 <3.0.0",
-    "jodit": ">=4.6.2 <5.0.0",
-    "jodit-react": ">=5.2.19 <6.0.0",
-    "material-react-table": ">=3.0.0 <4.0.0",
-    "react": ">=18 <20",
-    "react-dom": ">=18 <20",
-    "react-hook-form": ">=7.62.0 <8.0.0",
-    "react-idle-timer": ">=5.7.2 <6.0.0",
-    "xlsx-js-style": ">=1.2.0 <2.0.0",
-    "yup": ">=1.7.0 <2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@tanstack/react-query": {
-      "optional": true
-    },
-    "react-idle-timer": {
-      "optional": true
-    },
-    "jodit": {
-      "optional": true
-    },
-    "jodit-react": {
-      "optional": true
-    },
-    "material-react-table": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@hookform/error-message": "^2.0.1",
-    "@hookform/resolvers": "^5.2.1",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@mui/x-date-pickers": "^8.10.2",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-links": "^9.1.2",
-    "@storybook/react-vite": "^9.1.2",
-    "@tanstack/react-query": "^5.100.14",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/crypto-js": "^4.2.2",
-    "@types/file-saver": "^2.0.7",
-    "@types/node": "^22.11.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@typescript-eslint/parser": "^8.8.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^3.0.0",
-    "@vitest/ui": "^3.0.0",
-    "cross-env": "^10.0.0",
-    "crypto-js": "^4.2.0",
-    "dayjs": "^1.11.13",
-    "eslint": "^9.12.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "eslint-plugin-storybook": "9.1.2",
-    "file-saver": "^2.0.5",
-    "glob": "^10.4.5",
-    "jodit": "^4.6.2",
-    "jodit-react": "^5.2.19",
-    "jsdom": "^25.0.0",
-    "material-react-table": "^3.2.1",
-    "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-hook-form": "^7.62.0",
-    "react-idle-timer": "^5.7.2",
-    "rimraf": "^5.0.7",
-    "rollup": "^4.22.4",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-bundle-size": "^1.0.3",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "sass-embedded": "^1.90.0",
-    "storybook": "^9.1.2",
-    "tsc-alias": "^1.8.16",
-    "typescript": "^5.5.4",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.0",
-    "xlsx-js-style": "^1.2.0",
-    "yup": "^1.7.0"
-  },
-  "keywords": [
-    "react",
-    "forms",
-    "components",
-    "react-hook-form",
-    "yup",
-    "typescript"
-  ],
-  "author": "Mohammad Asheesh",
-  "contributors": [
-    "Karthik Mayandi",
-    "Other Dev"
-  ],
-  "license": "MIT",
-  "engines": {
-    "node": ">=18.17.0 || >=20.11.0",
-    "npm": ">=10.9.0"
-  },
-  "dependencies": {
-    "@types/react-date-range": "^1.4.10",
-    "axios": "^1.13.2",
-    "date-fns": "^4.1.0",
-    "react-date-range": "^2.0.1"
-  }
-}
+{
+  "name": "tp-react-elements",
+  "version": "2.0.1",
+  "private": false,
+  "type": "module",
+  "description": "React form components library built with React Hook Form and Yup",
+  "main": "dist/index.esm.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./form": {
+      "import": "./dist/components/Form/index.esm.js",
+      "types": "./dist/components/Form/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils/index.esm.js",
+      "types": "./dist/utils/index.d.ts"
+    },
+    "./validation": {
+      "import": "./dist/validation/index.esm.js",
+      "types": "./dist/validation/index.d.ts"
+    },
+    "./components/*": {
+      "import": "./dist/components/*/index.esm.js",
+      "types": "./dist/components/*/index.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.esm.js",
+      "types": "./dist/theme/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "install-tp-form-deps": "./scripts/install-deps.js"
+  },
+  "files": [
+    "dist",
+    "scripts"
+  ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "clean": "rimraf dist dist-dev",
+    "type-check": "tsc --noEmit",
+    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.json && echo \"✅ TypeScript declaration files generated successfully!\"",
+    "build:types:qa": "tsc --project tsconfig.build.qa.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.qa.json && echo \"✅ QA declaration files (with maps) generated!\"",
+    "build:esm": "npm run clean && rollup -c rollup.config.js",
+    "build:lib": "npm run clean && rollup -c rollup.config.js && npm run build:types && echo \"✅ Complete library build finished! ESM build completed successfully!\"",
+    "build:lib:qa": "npm run clean && rollup -c rollup.config.js && npm run build:types:qa && echo \"✅ QA build finished (includes .d.ts.map)\"",
+    "analyze": "npm run clean && cross-env BUNDLE_ANALYZE=true rollup -c rollup.config.js",
+    "analyze:dev": "cross-env ANALYZE_BUNDLE=true vite build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "publish:prepare": "npm run build:lib && npm run type-check",
+    "publish:npm": "npm publish",
+    "publish:beta": "npm publish --tag beta",
+    "publish:patch": "npm version patch --no-git-tag-version && npm publish",
+    "publish:minor": "npm version minor --no-git-tag-version && npm publish",
+    "publish:major": "npm version major --no-git-tag-version && npm publish",
+    "publish:auto": "npm run publish:prepare && npm publish",
+    "install-peers": "install-tp-form-deps",
+    "package-build": "rollup -c --bundleConfigAsCjs",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0 <6.0.0",
+    "@emotion/react": ">=11.14.0 <13.0.0",
+    "@emotion/styled": ">=11.14.1 <13.0.0",
+    "@hookform/error-message": ">=2.0.1 <3.0.0",
+    "@hookform/resolvers": ">=5.2.1 <6.0.0",
+    "@mui/icons-material": ">=7.3.1 <8.0.0",
+    "@mui/material": ">=7.3.1 <8.0.0",
+    "@mui/x-date-pickers": ">=8.10.2 <9.0.0",
+    "crypto-js": ">=4.2.0 <5.0.0",
+    "dayjs": ">=1.11.13 <2.0.0",
+    "file-saver": ">=2.0.5 <3.0.0",
+    "jodit": ">=4.6.2 <5.0.0",
+    "jodit-react": ">=5.2.19 <6.0.0",
+    "material-react-table": ">=3.0.0 <4.0.0",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "react-hook-form": ">=7.62.0 <8.0.0",
+    "react-idle-timer": ">=5.7.2 <6.0.0",
+    "xlsx-js-style": ">=1.2.0 <2.0.0",
+    "yup": ">=1.7.0 <2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "react-idle-timer": {
+      "optional": true
+    },
+    "jodit": {
+      "optional": true
+    },
+    "jodit-react": {
+      "optional": true
+    },
+    "material-react-table": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^5.2.1",
+    "@mui/icons-material": "^7.3.1",
+    "@mui/material": "^7.3.1",
+    "@mui/x-date-pickers": "^8.10.2",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-links": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
+    "@tanstack/react-query": "^5.100.14",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/crypto-js": "^4.2.2",
+    "@types/file-saver": "^2.0.7",
+    "@types/node": "^22.11.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^3.0.0",
+    "@vitest/ui": "^3.0.0",
+    "cross-env": "^10.0.0",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
+    "eslint": "^9.12.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-storybook": "10.4.2",
+    "file-saver": "^2.0.5",
+    "glob": "^10.4.5",
+    "jodit": "^4.6.2",
+    "jodit-react": "^5.2.19",
+    "jsdom": "^25.0.0",
+    "material-react-table": "^3.2.1",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.62.0",
+    "react-idle-timer": "^5.7.2",
+    "rimraf": "^5.0.7",
+    "rollup": "^4.22.4",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-bundle-size": "^1.0.3",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sass-embedded": "^1.90.0",
+    "storybook": "^10.4.2",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.5.4",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0",
+    "xlsx-js-style": "^1.2.0",
+    "yup": "^1.7.0"
+  },
+  "keywords": [
+    "react",
+    "forms",
+    "components",
+    "react-hook-form",
+    "yup",
+    "typescript"
+  ],
+  "author": "Mohammad Asheesh",
+  "contributors": [
+    "Karthik Mayandi",
+    "Other Dev"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.17.0 || >=20.11.0",
+    "npm": ">=10.9.0"
+  },
+  "dependencies": {
+    "@types/react-date-range": "^1.4.10",
+    "axios": "^1.13.2",
+    "date-fns": "^4.1.0",
+    "react-date-range": "^2.0.1"
+  }
+}