dhre-component-lib 0.3.9 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +4 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/theme/colors/colors.scss +1 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -9431,7 +9431,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
9431
9431
|
React__namespace.default.createElement("div", { className: "resendText" }, resendText)))))));
|
|
9432
9432
|
};
|
|
9433
9433
|
|
|
9434
|
-
var css$d = ".search-field-container {\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius: 10px;\n background-color: #ffffff;\n transition: border-color 0.3s ease;\n}\n.search-field-container.default-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.typing-border {\n border: 1px solid #ffffff;\n}\n.search-field-container.typing-dark-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.stopped-border {\n border: 1px solid #00b578;\n}\n.search-field-container.disabled-border {\n border: 1px solid #4f4f4f;\n background-color: #e1e1e1;\n}\n\n.search-icon {\n margin-right: 8px;\n}\n\n.search-input {\n flex: 1;\n border: none;\n background-color: transparent;\n outline: none;\n}\n\n.cross-icon {\n margin-left: 8px;\n cursor: pointer;\n}\n\n.suggestions-dropdown {\n border: 1px solid #ccc;\n background-color: white;\n position: absolute;\n width: 600px;\n z-index: 10;\n top:
|
|
9434
|
+
var css$d = ".search-field-container {\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius: 10px;\n background-color: #ffffff;\n transition: border-color 0.3s ease;\n}\n.search-field-container.default-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.typing-border {\n border: 1px solid #ffffff;\n}\n.search-field-container.typing-dark-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.stopped-border {\n border: 1px solid #00b578;\n}\n.search-field-container.disabled-border {\n border: 1px solid #4f4f4f;\n background-color: #e1e1e1;\n}\n\n.search-icon {\n margin-right: 8px;\n}\n\n.search-input {\n flex: 1;\n border: none;\n background-color: transparent;\n outline: none;\n}\n\n.cross-icon {\n margin-left: 8px;\n cursor: pointer;\n}\n\n.suggestions-dropdown {\n border: 1px solid #ccc;\n background-color: white;\n position: absolute;\n width: 600px;\n z-index: 10;\n top: 70%;\n border-radius: 10px;\n}\n@media (max-width: 767px) {\n .suggestions-dropdown {\n width: 84%;\n top: 75%;\n }\n}\n\n.suggestion-item {\n padding: 16px 8px 16px 8px;\n cursor: pointer;\n text-align: left;\n}\n\n.underline {\n height: 1px;\n background-color: #cecece;\n margin-left: 24px;\n margin-right: 24px;\n}\n\n.suggestion-item:hover {\n background-color: none;\n}\n\n.row {\n flex-direction: row;\n display: flex;\n background: none;\n border: none;\n align-items: center;\n padding-left: 10px;\n}\n\n.no-suggestions {\n padding: 20px;\n}";
|
|
9435
9435
|
n(css$d,{});
|
|
9436
9436
|
|
|
9437
9437
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
|
|
@@ -9544,7 +9544,7 @@ const Modal = ({ isOpen, onClose, title, children, crossIcon, className }) => {
|
|
|
9544
9544
|
React__namespace.default.createElement("button", { className: "modal-close", onClick: onClose }, crossIcon))));
|
|
9545
9545
|
};
|
|
9546
9546
|
|
|
9547
|
-
var css$b = ".accordion {\n padding: 10px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n}\n.accordion.with-border {\n border: 1px solid #cecece;\n padding: 24px 16px 24px 16px;\n border-radius: 16px;\n}\n.accordion.without-border {\n border-bottom: 1px solid #
|
|
9547
|
+
var css$b = ".accordion {\n padding: 10px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n}\n.accordion.with-border {\n border: 1px solid #cecece;\n padding: 24px 16px 24px 16px;\n border-radius: 16px;\n}\n.accordion.without-border {\n border-bottom: 1px solid #f5f5f5;\n padding: 16px 0px 16px 0px;\n}\n.accordion.without-border-bottom {\n margin-top: 5px;\n}\n.accordion.without-border-bottom {\n margin-top: 5px;\n}\n.accordion .accordion-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.accordion .accordion-header .accordion-icon {\n margin-right: 10px;\n}\n.accordion .accordion-header .accordion-text {\n display: flex;\n flex-direction: column;\n}\n.accordion .accordion-header .accordian-arrow {\n display: flex;\n justify-content: flex-end;\n}\n.accordion .accordion-content {\n padding: 16px 4px 16px 4px;\n}";
|
|
9548
9548
|
n(css$b,{});
|
|
9549
9549
|
|
|
9550
9550
|
const Accordion = ({ icon, title, description, children, border = false, upArrowIcon, downArrowIcon, openByDefault, borderBottom = false, className }) => {
|
|
@@ -9568,7 +9568,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9568
9568
|
isOpen && (React__namespace.default.createElement("div", { className: "accordion-content" }, children))));
|
|
9569
9569
|
};
|
|
9570
9570
|
|
|
9571
|
-
var css$a = ".tabs {\n display: flex;\n gap: 12px;\n}\n\n.tab {\n padding: 12px;\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #a7a7a7;\n border-bottom: 2px solid transparent;\n transition: border-bottom 0.3s ease;\n font-size: 18px;\n display: flex;\n align-items: center;\n}\n\n.tab.active {\n border-bottom: 2px solid #000000;\n color: #000000;\n}\n\n.tab:hover {\n color: #000000;\n}\n\n@media (max-width: 767px) {\n .tab {\n font-size: 14px;\n }\n .main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .main::-webkit-scrollbar {\n display: none;\n }\n}\n.dot {\n display: inline-block !important;\n width: 8px !important;\n height: 8px !important;\n background-color: red !important;\n border-radius: 50% !important;\n margin-left: 5px !important;\n}";
|
|
9571
|
+
var css$a = ".tabs {\n display: flex;\n gap: 12px;\n}\n\n.tab {\n padding: 12px;\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #a7a7a7;\n border-bottom: 2px solid transparent;\n transition: border-bottom 0.3s ease;\n font-size: 18px;\n display: flex;\n align-items: center;\n}\n\n.tab.active {\n border-bottom: 2px solid #000000;\n color: #000000;\n}\n\n.tab.inActive {\n border-bottom: 1px solid #e1e1e1;\n}\n\n.tab:hover {\n color: #000000;\n}\n\n@media (max-width: 767px) {\n .tab {\n font-size: 14px;\n }\n .main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .main::-webkit-scrollbar {\n display: none;\n }\n}\n.dot {\n display: inline-block !important;\n width: 8px !important;\n height: 8px !important;\n background-color: red !important;\n border-radius: 50% !important;\n margin-left: 5px !important;\n}";
|
|
9572
9572
|
n(css$a,{});
|
|
9573
9573
|
|
|
9574
9574
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
@@ -9593,7 +9593,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
|
9593
9593
|
};
|
|
9594
9594
|
return (React__namespace.default.createElement("div", { className: "main" },
|
|
9595
9595
|
React__namespace.default.createElement("div", { className: "tabs" }, tabs?.map((tab) => (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
9596
|
-
React__namespace.default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : ""}`, onClick: () => handleTabClick(tab) },
|
|
9596
|
+
React__namespace.default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : "inActive"}`, onClick: () => handleTabClick(tab) },
|
|
9597
9597
|
tab?.name,
|
|
9598
9598
|
dot && haveDots.includes(tab.value.toLowerCase()) && (React__namespace.default.createElement("span", { className: "dot" })))))))));
|
|
9599
9599
|
};
|