esewa-ui-library 1.0.1 → 1.0.2
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/README.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
# esewa-ui-library
|
|
2
2
|
> UI Library for eSewa Mini App
|
|
3
|
+
|
|
3
4
|
[](https://www.npmjs.com/package/esewa-ui-library) [](https://standardjs.com)
|
|
4
5
|
|
|
5
6
|
## Install
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface InputFieldProps {
|
|
3
3
|
id?: string;
|
|
4
|
-
type?: 'text' | 'password' | 'number'
|
|
4
|
+
type?: 'text' | 'password' | 'number';
|
|
5
5
|
name?: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
placeholder?: string;
|
package/dist/index.js
CHANGED
|
@@ -86,7 +86,7 @@ var ESewaCard = function ESewaCard(_ref) {
|
|
|
86
86
|
};
|
|
87
87
|
|
|
88
88
|
var _templateObject$2;
|
|
89
|
-
var StyledAlert = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .alert-card {\n display: flex;\n flex-direction: column;\n gap: var(--values-value-8);\n\n &--header {\n display: flex;\n align-items: center;\n gap: var(--values-value-10);\n &--icon{\n font-size: 28px;\n }\n &--title {\n flex: 1;\n }\n &--dismiss-icon {\n cursor: pointer;\n font-size: 16px;\n }\n }\n\n &.success {\n background-color: var(--success-bg-light);\n\n * {\n color: var(--primary);\n }\n }\n\n &.warning {\n background-color: var(--warning-bg-light);\n\n * {\n color: var(--warning);\n }\n }\n\n &.error {\n background-color: var(--danger-bg-light);\n\n * {\n color: var(--danger);\n }\n }\n\n &.info {\n background-color: var(--info-bg-light);\n * {\n color: var(--info);\n }\n }\n }\n"])));
|
|
89
|
+
var StyledAlert = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .alert-card {\n display: flex;\n flex-direction: column;\n gap: var(--values-value-8);\n border-radius: var(--values-value-8);\n\n &--header {\n display: flex;\n align-items: center;\n gap: var(--values-value-10);\n &--icon{\n display: flex;\n font-size: 28px;\n }\n &--title {\n flex: 1;\n }\n &--dismiss-icon {\n display: flex;\n cursor: pointer;\n font-size: 16px;\n line-height: 16px;\n }\n }\n\n &.success {\n background-color: var(--success-bg-light);\n\n * {\n color: var(--primary);\n }\n }\n\n &.warning {\n background-color: var(--warning-bg-light);\n\n * {\n color: var(--warning);\n }\n }\n\n &.error {\n background-color: var(--danger-bg-light);\n\n * {\n color: var(--danger);\n }\n }\n\n &.info {\n background-color: var(--info-bg-light);\n * {\n color: var(--info);\n }\n }\n }\n"])));
|
|
90
90
|
var ESewaAlertCard = function ESewaAlertCard(_ref) {
|
|
91
91
|
var alertCardClass = _ref.alertCardClass,
|
|
92
92
|
_ref$variant = _ref.variant,
|
|
@@ -568,7 +568,7 @@ var ESewaImage = function ESewaImage(_ref2) {
|
|
|
568
568
|
|
|
569
569
|
var _excluded$2 = ["type", "name", "label", "placeholder", "value", "checked", "min", "max", "step", "required", "readOnly", "disabled", "className", "onChange", "validationMessage", "autoFocus"];
|
|
570
570
|
var _templateObject$a;
|
|
571
|
-
var StyledInput = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n .flex-auto {\n flex: 1 1 auto !important;\n }\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: ", ";\n }\n\n input {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n padding: var(--values-value-
|
|
571
|
+
var StyledInput = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n .flex-auto {\n flex: 1 1 auto !important;\n }\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: ", ";\n }\n\n input {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n padding: var(--values-value-10) var(--values-value-12);\n color: var(--text-dark);\n background: var(--input-bg);\n transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n box-shadow 0.2s;\n appearance: none;\n outline-color: transparent;\n height: 48px;\n border: 1px solid var(--default-input-border);\n box-sizing: border-box;\n\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: 0.5px;\n font-weight: 400;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger-border);\n outline: none;\n }\n\n ::-ms-input-placeholder {\n color: var(--input-placeholder);\n font-weight: 400;\n letter-spacing: 0.5px;\n font-size: 16px;\n line-height: 20px;\n }\n }\n\n .validationMessage {\n color: var(--danger-text);\n }\n"])), function (props) {
|
|
572
572
|
return props.theme['text-dark'];
|
|
573
573
|
});
|
|
574
574
|
var ESewaInputField = React.forwardRef(function (_ref, ref) {
|
|
@@ -621,8 +621,8 @@ var ESewaInputField = React.forwardRef(function (_ref, ref) {
|
|
|
621
621
|
|
|
622
622
|
var _excluded$3 = ["name", "label", "placeholder", "value", "maxLength", "rows", "required", "readOnly", "disabled", "className", "onChange", "validationMessage"];
|
|
623
623
|
var _templateObject$b;
|
|
624
|
-
var StyledTextArea = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n .text-area {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n }\n\n .validationMessage {\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n letter-spacing: 0.4px;\n color: var(--danger-text);\n }\n\n textarea {\n flex-grow: 1;\n border-radius:
|
|
625
|
-
var ESewaInputFeildTextArea = function
|
|
624
|
+
var StyledTextArea = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n .text-area {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n }\n\n .validationMessage {\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n letter-spacing: 0.4px;\n color: var(--danger-text);\n }\n\n textarea {\n flex-grow: 1;\n border-radius: var(--values-value-8);\n padding: var(--values-value-10) var(--values-value-12);\n color: var(--text-dark);\n background: var(--input-bg);\n transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n box-shadow 0.2s;\n appearance: none;\n outline-color: transparent;\n border: 1px solid var(--default-input-border);\n box-sizing: border-box;\n font-family: \"Source Sans Pro\", sans-serif;\n\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: 0.5px;\n font-weight: 500;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger);\n outline: none;\n }\n\n ::-ms-input-placeholder {\n color: var(--input-placeholder);\n font-weight: 400;\n letter-spacing: 0.5px;\n font-size: 16px;\n line-height: 20px;\n }\n }\n }\n"])));
|
|
625
|
+
var ESewaInputFeildTextArea = React.forwardRef(function (_ref, ref) {
|
|
626
626
|
var name = _ref.name,
|
|
627
627
|
label = _ref.label,
|
|
628
628
|
placeholder = _ref.placeholder,
|
|
@@ -646,6 +646,7 @@ var ESewaInputFeildTextArea = function ESewaInputFeildTextArea(_ref) {
|
|
|
646
646
|
}, " *")), React__default.createElement("div", {
|
|
647
647
|
className: 'flex-auto full-width'
|
|
648
648
|
}, React__default.createElement("textarea", Object.assign({
|
|
649
|
+
ref: ref,
|
|
649
650
|
className: "body1 " + (validationMessage ? 'error' : ''),
|
|
650
651
|
value: value,
|
|
651
652
|
rows: rows,
|
|
@@ -658,10 +659,10 @@ var ESewaInputFeildTextArea = function ESewaInputFeildTextArea(_ref) {
|
|
|
658
659
|
}, rest))), validationMessage && React__default.createElement("div", {
|
|
659
660
|
className: 'caption validationMessage'
|
|
660
661
|
}, " ", validationMessage)));
|
|
661
|
-
};
|
|
662
|
+
});
|
|
662
663
|
|
|
663
664
|
var _templateObject$c;
|
|
664
|
-
var StyledMultiSelect = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n .multi-select {\n position: relative;\n width: auto;\n\n &__toggle {\n border: 1px solid var(--default-input-border);\n padding:
|
|
665
|
+
var StyledMultiSelect = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n .multi-select {\n position: relative;\n width: auto;\n\n &__toggle {\n border: 1px solid var(--default-input-border);\n padding: var(--values-value-10) var(--values-value-12);\n cursor: pointer;\n border-radius: 8px;\n background-color: var(--input-bg);\n transition: border-color 0.2s;\n user-select: none;\n color: var(--input-placeholder);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n height: 48px;\n display: flex;\n align-items: center;\n &:hover {\n border-color: var(--input-bg);\n }\n }\n\n &__dropdown {\n position: absolute;\n top: 52px;\n left: 0;\n right: 0;\n border-radius: 8px;\n background-color: var(--card-bg);\n max-height: 200px;\n overflow-y: auto;\n z-index: 1000;\n box-shadow: var(--shadow--2--umbra);\n border: 1px solid var(--default-input-border);\n padding: 8px 0;\n animation: fadeIn 0.2s ease-in-out;\n min-width: 100%;\n }\n\n &__dropdown-inner {\n padding: 8px;\n width: 100%;\n box-sizing: border-box;\n }\n\n &__search {\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n margin-bottom: 5px;\n border: 1px solid var(--default-input-border);\n background-color: var(--input-bg);\n transition: border-color 0.2s;\n user-select: none;\n color: var(--input-placeholder);\n box-sizing: border-box;\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: -0.5px;\n font-weight: 500;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger);\n outline: none;\n }\n }\n\n &__option {\n display: flex;\n align-items: center;\n padding: 8px 0;\n cursor: pointer;\n\n &:hover {\n background-color: var(--success-bg-light);\n }\n\n input {\n position: relative;\n margin-right: 8px;\n\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background-color: var(--default-input-border);\n border: 2px solid var(--default-input-border);\n transition: background-color 0.3s ease, border-color 0.3s ease;\n }\n\n input:checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n\n input:checked::after {\n content: '\u2714';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 10px;\n color: white;\n }\n }\n\n &__no-options {\n padding: 10px;\n color: #999;\n text-align: center;\n }\n }\n"])));
|
|
665
666
|
var ESewaMultiSelect = function ESewaMultiSelect(_ref) {
|
|
666
667
|
var options = _ref.options,
|
|
667
668
|
onChange = _ref.onChange,
|
|
@@ -7129,7 +7130,7 @@ var ESIcon = function ESIcon(_ref) {
|
|
|
7129
7130
|
};
|
|
7130
7131
|
|
|
7131
7132
|
var _templateObject$n;
|
|
7132
|
-
var StylesSelect = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n .select-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n\n .required {\n color: var(--primary);\n }\n }\n\n select {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n font-size: 16px;\n color:
|
|
7133
|
+
var StylesSelect = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n .select-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n\n .required {\n color: var(--primary);\n }\n }\n\n select {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n font-size: 16px;\n color: var(--text-dark);\n padding: var(--values-value-10) var(--values-value-12);\n background: rgba(28, 37, 46, 0.03);\n transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n box-shadow 0.2s;\n appearance: none;\n letter-spacing: 0.5px;\n line-height: 22px;\n outline-color: transparent;\n border: 1px solid var(--default-input-border);\n height: 48px;\n box-sizing: border-box;\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n\n ::placeholder {\n color: var(--input-placeholder);\n letter-spacing: 0.5px;\n font-weight: 500;\n opacity: 1;\n }\n\n ::-ms-input-placeholder {\n color: var(--input-placeholder);\n font-weight: 500;\n letter-spacing: 0.5px;\n }\n }\n\n .validationMessage {\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n letter-spacing: 0.4px;\n color: var(--danger-text);\n }\n }\n"])));
|
|
7133
7134
|
var ESewaSelectNative = function ESewaSelectNative(_ref) {
|
|
7134
7135
|
var placeholder = _ref.placeholder,
|
|
7135
7136
|
_ref$options = _ref.options,
|