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.esm.js
CHANGED
|
@@ -9408,7 +9408,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
9408
9408
|
React__default.createElement("div", { className: "resendText" }, resendText)))))));
|
|
9409
9409
|
};
|
|
9410
9410
|
|
|
9411
|
-
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:
|
|
9411
|
+
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}";
|
|
9412
9412
|
n(css$d,{});
|
|
9413
9413
|
|
|
9414
9414
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
|
|
@@ -9521,7 +9521,7 @@ const Modal = ({ isOpen, onClose, title, children, crossIcon, className }) => {
|
|
|
9521
9521
|
React__default.createElement("button", { className: "modal-close", onClick: onClose }, crossIcon))));
|
|
9522
9522
|
};
|
|
9523
9523
|
|
|
9524
|
-
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 #
|
|
9524
|
+
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}";
|
|
9525
9525
|
n(css$b,{});
|
|
9526
9526
|
|
|
9527
9527
|
const Accordion = ({ icon, title, description, children, border = false, upArrowIcon, downArrowIcon, openByDefault, borderBottom = false, className }) => {
|
|
@@ -9545,7 +9545,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9545
9545
|
isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
|
|
9546
9546
|
};
|
|
9547
9547
|
|
|
9548
|
-
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}";
|
|
9548
|
+
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}";
|
|
9549
9549
|
n(css$a,{});
|
|
9550
9550
|
|
|
9551
9551
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
@@ -9570,7 +9570,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
|
9570
9570
|
};
|
|
9571
9571
|
return (React__default.createElement("div", { className: "main" },
|
|
9572
9572
|
React__default.createElement("div", { className: "tabs" }, tabs?.map((tab) => (React__default.createElement(React__default.Fragment, null,
|
|
9573
|
-
React__default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : ""}`, onClick: () => handleTabClick(tab) },
|
|
9573
|
+
React__default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : "inActive"}`, onClick: () => handleTabClick(tab) },
|
|
9574
9574
|
tab?.name,
|
|
9575
9575
|
dot && haveDots.includes(tab.value.toLowerCase()) && (React__default.createElement("span", { className: "dot" })))))))));
|
|
9576
9576
|
};
|