jattac.libs.web.zest-textbox 0.1.1 → 0.1.3
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.d.ts +25 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +5 -3
- package/dist/IconEyeOpen.d.ts +0 -2
- package/dist/IconEyeSlashed.d.ts +0 -2
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type ZestTextboxSize = "sm" | "md" | "lg";
|
|
4
|
+
type SharedProps = {
|
|
5
|
+
zSize?: ZestTextboxSize;
|
|
6
|
+
stretch?: boolean;
|
|
7
|
+
className?: string;
|
|
8
|
+
maxLength?: number;
|
|
9
|
+
showProgressBar?: boolean;
|
|
10
|
+
animatedCounter?: boolean;
|
|
11
|
+
theme?: "light" | "dark" | "system";
|
|
12
|
+
type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "color" | "date" | "datetime-local" | "month" | "time" | "week";
|
|
13
|
+
};
|
|
14
|
+
type InputOnlyProps = SharedProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & {
|
|
15
|
+
isMultiline?: false;
|
|
16
|
+
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
17
|
+
};
|
|
18
|
+
type TextareaOnlyProps = SharedProps & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
|
|
19
|
+
isMultiline: true;
|
|
20
|
+
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
21
|
+
};
|
|
22
|
+
type ZestTextboxProps = InputOnlyProps | TextareaOnlyProps;
|
|
23
|
+
declare const ZestTextbox: React.FC<ZestTextboxProps>;
|
|
24
|
+
|
|
25
|
+
export { ZestTextbox as default };
|
package/dist/index.esm.js
CHANGED
|
@@ -73,7 +73,7 @@ function styleInject(css, ref) {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
var css_248z = "/* === Base Textbox Styles (input & textarea) === */\n.ZestTextbox-module_textbox__0M5Wq {\n font-family: \"Segoe UI\", Roboto, sans-serif;\n font-weight: 500;\n line-height: 1.25;\n border: 1px solid #ccc;\n border-radius: 0.5rem; /* 8px */\n color: #111827;\n background-color: #ffffff;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n display: inline-block;\n width: auto;\n box-sizing: border-box;\n resize: none;\n font-size: 1rem; /* 16px */\n padding-bottom:
|
|
76
|
+
var css_248z = "/* === Base Textbox Styles (input & textarea) === */\n.ZestTextbox-module_textbox__0M5Wq {\n font-family: \"Segoe UI\", Roboto, sans-serif;\n font-weight: 500;\n line-height: 1.25;\n border: 1px solid #ccc;\n border-radius: 0.5rem; /* 8px */\n color: #111827;\n background-color: #ffffff;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n display: inline-block;\n width: auto;\n box-sizing: border-box;\n resize: none;\n font-size: 1rem; /* 16px */\n padding-bottom: 2rem; /* 32px */\n}\n\n.ZestTextbox-module_textbox__0M5Wq:focus {\n outline: none;\n border-color: #8B5CF6;\n box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n animation: ZestTextbox-module_pulse-light__CKfhA 0.5s 1;\n}\n\n/* === Sizes === */\n.ZestTextbox-module_sm__yyxXO {\n padding: 0.5rem 0.75rem; /* 8px 12px */\n font-size: 0.875rem; /* 14px */\n}\n\n.ZestTextbox-module_md__fvL10 {\n padding: 0.625rem 0.875rem; /* 10px 14px */\n font-size: 1rem; /* 16px */\n}\n\n.ZestTextbox-module_lg__fU93- {\n padding: 0.75rem 1rem; /* 12px 16px */\n font-size: 1.125rem; /* 18px */\n}\n\n/* === Full Width === */\n.ZestTextbox-module_fullWidth__xn4fT {\n width: 100%;\n}\n\n/* === Disabled State === */\n.ZestTextbox-module_textbox__0M5Wq:disabled {\n background-color: #f3f4f6;\n color: #9ca3af;\n cursor: not-allowed;\n pointer-events: none;\n border-color: #d1d5db;\n}\n\n/* === Multiline (textarea) specific enhancements === */\ntextarea.ZestTextbox-module_textbox__0M5Wq {\n min-height: 6.25rem; /* 100px */\n line-height: 1.5;\n resize: vertical;\n}\n\n.ZestTextbox-module_wrapper__0ok2A {\n position: relative;\n display: inline-block;\n}\n\n.ZestTextbox-module_counter__waqIT {\n position: absolute;\n right: 0.625rem; /* 10px */\n bottom: 0.375rem; /* 6px */\n font-size: 0.75rem;\n color: #6b7280;\n pointer-events: none;\n user-select: none;\n}\n\n/* === Dark Mode Support === */\n.dark .ZestTextbox-module_textbox__0M5Wq {\n background-color: #1f2937;\n border-color: #374151;\n color: #f3f4f6;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:focus {\n border-color: #A78BFA;\n box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n animation: ZestTextbox-module_pulse-dark__L9PYJ 0.5s 1;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:disabled {\n background-color: #374151;\n color: #9ca3af;\n border-color: #4b5563;\n}\n\n.dark .ZestTextbox-module_counter__waqIT {\n color: #9ca3af;\n}\n\n/* === Password Toggle === */\n.ZestTextbox-module_passwordToggle__I2s4O {\n position: absolute;\n right: 0.625rem; /* 10px */\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #6b7280;\n}\n\n.ZestTextbox-module_eyeIcon__rKiBL {\n width: 1.25em;\n height: 1.25em;\n transition: transform 0.2s ease-in-out;\n}\n\n.ZestTextbox-module_rotate__Ajx19 {\n transform: rotate(180deg);\n}\n\n.ZestTextbox-module_tooltip__etRdj {\n position: absolute;\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n background-color: #333;\n color: #fff;\n padding: 0.25rem 0.5rem; /* 4px 8px */\n border-radius: 0.25rem; /* 4px */\n font-size: 0.75rem;\n white-space: nowrap;\n margin-right: 0.5rem; /* 8px */\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n}\n\n.ZestTextbox-module_passwordToggle__I2s4O:hover .ZestTextbox-module_tooltip__etRdj {\n opacity: 1;\n visibility: visible;\n}\n\n.dark .ZestTextbox-module_passwordToggle__I2s4O {\n color: #9ca3af;\n}\n\n.dark .ZestTextbox-module_tooltip__etRdj {\n background-color: #4b5563;\n color: #f3f4f6;\n}\n\n/* === Progress Bar === */\n.ZestTextbox-module_progressBarContainer__0qFKf {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.1875rem; /* 3px */\n background-color: #e5e7eb;\n border-bottom-left-radius: 0.5rem; /* 8px */\n border-bottom-right-radius: 0.5rem; /* 8px */\n overflow: hidden;\n}\n\n.ZestTextbox-module_progressBar__vwttj {\n height: 100%;\n background-color: #8B5CF6;\n transition: width 0.2s ease, background-color 0.3s ease;\n}\n\n/* === Animated Counter Colors === */\n.ZestTextbox-module_counterYellow__uYGfs {\n color: #A78BFA;\n}\n\n.ZestTextbox-module_counterOrange__b9baX {\n color: #8B5CF6;\n}\n\n.dark .ZestTextbox-module_progressBarContainer__0qFKf {\n background-color: #374151;\n}\n\n.dark .ZestTextbox-module_progressBar__vwttj {\n background-color: #A78BFA;\n}\n\n.dark .ZestTextbox-module_counterYellow__uYGfs {\n color: #C4B5FD;\n}\n\n.dark .ZestTextbox-module_counterOrange__b9baX {\n color: #A78BFA;\n}\n\n@keyframes ZestTextbox-module_pulse-light__CKfhA {\n 0% {\n box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n }\n 50% {\n box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.35); /* 4px */\n }\n 100% {\n box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n }\n}\n\n@keyframes ZestTextbox-module_pulse-dark__L9PYJ {\n 0% {\n box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n }\n 50% {\n box-shadow: 0 0 0 0.25rem rgba(167, 139, 250, 0.45); /* 4px */\n }\n 100% {\n box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n }\n}\n\n/* === Media Queries for Responsive Design === */\n@media (min-width: 48rem) { /* 768px */\n /* Tablet */\n .ZestTextbox-module_sm__yyxXO {\n font-size: 0.875rem; /* 14px */\n }\n .ZestTextbox-module_md__fvL10 {\n font-size: 1rem; /* 16px */\n }\n .ZestTextbox-module_lg__fU93- {\n font-size: 1.125rem; /* 18px */\n }\n}\n\n@media (min-width: 64rem) { /* 1024px */\n /* Desktop */\n .ZestTextbox-module_sm__yyxXO {\n padding: 0.375rem 0.625rem; /* 6px 10px */\n font-size: 0.875rem; /* 14px */\n }\n .ZestTextbox-module_md__fvL10 {\n padding: 0.625rem 0.875rem; /* 10px 14px */\n font-size: 1rem; /* 16px */\n }\n .ZestTextbox-module_lg__fU93- {\n padding: 0.75rem 1rem; /* 12px 16px */\n font-size: 1.125rem; /* 18px */\n }\n}\n";
|
|
77
77
|
var styles = {"textbox":"ZestTextbox-module_textbox__0M5Wq","pulse-light":"ZestTextbox-module_pulse-light__CKfhA","sm":"ZestTextbox-module_sm__yyxXO","md":"ZestTextbox-module_md__fvL10","lg":"ZestTextbox-module_lg__fU93-","fullWidth":"ZestTextbox-module_fullWidth__xn4fT","wrapper":"ZestTextbox-module_wrapper__0ok2A","counter":"ZestTextbox-module_counter__waqIT","pulse-dark":"ZestTextbox-module_pulse-dark__L9PYJ","passwordToggle":"ZestTextbox-module_passwordToggle__I2s4O","eyeIcon":"ZestTextbox-module_eyeIcon__rKiBL","rotate":"ZestTextbox-module_rotate__Ajx19","tooltip":"ZestTextbox-module_tooltip__etRdj","progressBarContainer":"ZestTextbox-module_progressBarContainer__0qFKf","progressBar":"ZestTextbox-module_progressBar__vwttj","counterYellow":"ZestTextbox-module_counterYellow__uYGfs","counterOrange":"ZestTextbox-module_counterOrange__b9baX"};
|
|
78
78
|
styleInject(css_248z);
|
|
79
79
|
|
package/dist/index.js
CHANGED
|
@@ -75,7 +75,7 @@ function styleInject(css, ref) {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
var css_248z = "/* === Base Textbox Styles (input & textarea) === */\n.ZestTextbox-module_textbox__0M5Wq {\n font-family: \"Segoe UI\", Roboto, sans-serif;\n font-weight: 500;\n line-height: 1.25;\n border: 1px solid #ccc;\n border-radius: 0.5rem; /* 8px */\n color: #111827;\n background-color: #ffffff;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n display: inline-block;\n width: auto;\n box-sizing: border-box;\n resize: none;\n font-size: 1rem; /* 16px */\n padding-bottom:
|
|
78
|
+
var css_248z = "/* === Base Textbox Styles (input & textarea) === */\n.ZestTextbox-module_textbox__0M5Wq {\n font-family: \"Segoe UI\", Roboto, sans-serif;\n font-weight: 500;\n line-height: 1.25;\n border: 1px solid #ccc;\n border-radius: 0.5rem; /* 8px */\n color: #111827;\n background-color: #ffffff;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n display: inline-block;\n width: auto;\n box-sizing: border-box;\n resize: none;\n font-size: 1rem; /* 16px */\n padding-bottom: 2rem; /* 32px */\n}\n\n.ZestTextbox-module_textbox__0M5Wq:focus {\n outline: none;\n border-color: #8B5CF6;\n box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n animation: ZestTextbox-module_pulse-light__CKfhA 0.5s 1;\n}\n\n/* === Sizes === */\n.ZestTextbox-module_sm__yyxXO {\n padding: 0.5rem 0.75rem; /* 8px 12px */\n font-size: 0.875rem; /* 14px */\n}\n\n.ZestTextbox-module_md__fvL10 {\n padding: 0.625rem 0.875rem; /* 10px 14px */\n font-size: 1rem; /* 16px */\n}\n\n.ZestTextbox-module_lg__fU93- {\n padding: 0.75rem 1rem; /* 12px 16px */\n font-size: 1.125rem; /* 18px */\n}\n\n/* === Full Width === */\n.ZestTextbox-module_fullWidth__xn4fT {\n width: 100%;\n}\n\n/* === Disabled State === */\n.ZestTextbox-module_textbox__0M5Wq:disabled {\n background-color: #f3f4f6;\n color: #9ca3af;\n cursor: not-allowed;\n pointer-events: none;\n border-color: #d1d5db;\n}\n\n/* === Multiline (textarea) specific enhancements === */\ntextarea.ZestTextbox-module_textbox__0M5Wq {\n min-height: 6.25rem; /* 100px */\n line-height: 1.5;\n resize: vertical;\n}\n\n.ZestTextbox-module_wrapper__0ok2A {\n position: relative;\n display: inline-block;\n}\n\n.ZestTextbox-module_counter__waqIT {\n position: absolute;\n right: 0.625rem; /* 10px */\n bottom: 0.375rem; /* 6px */\n font-size: 0.75rem;\n color: #6b7280;\n pointer-events: none;\n user-select: none;\n}\n\n/* === Dark Mode Support === */\n.dark .ZestTextbox-module_textbox__0M5Wq {\n background-color: #1f2937;\n border-color: #374151;\n color: #f3f4f6;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:focus {\n border-color: #A78BFA;\n box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n animation: ZestTextbox-module_pulse-dark__L9PYJ 0.5s 1;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:disabled {\n background-color: #374151;\n color: #9ca3af;\n border-color: #4b5563;\n}\n\n.dark .ZestTextbox-module_counter__waqIT {\n color: #9ca3af;\n}\n\n/* === Password Toggle === */\n.ZestTextbox-module_passwordToggle__I2s4O {\n position: absolute;\n right: 0.625rem; /* 10px */\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #6b7280;\n}\n\n.ZestTextbox-module_eyeIcon__rKiBL {\n width: 1.25em;\n height: 1.25em;\n transition: transform 0.2s ease-in-out;\n}\n\n.ZestTextbox-module_rotate__Ajx19 {\n transform: rotate(180deg);\n}\n\n.ZestTextbox-module_tooltip__etRdj {\n position: absolute;\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n background-color: #333;\n color: #fff;\n padding: 0.25rem 0.5rem; /* 4px 8px */\n border-radius: 0.25rem; /* 4px */\n font-size: 0.75rem;\n white-space: nowrap;\n margin-right: 0.5rem; /* 8px */\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n}\n\n.ZestTextbox-module_passwordToggle__I2s4O:hover .ZestTextbox-module_tooltip__etRdj {\n opacity: 1;\n visibility: visible;\n}\n\n.dark .ZestTextbox-module_passwordToggle__I2s4O {\n color: #9ca3af;\n}\n\n.dark .ZestTextbox-module_tooltip__etRdj {\n background-color: #4b5563;\n color: #f3f4f6;\n}\n\n/* === Progress Bar === */\n.ZestTextbox-module_progressBarContainer__0qFKf {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.1875rem; /* 3px */\n background-color: #e5e7eb;\n border-bottom-left-radius: 0.5rem; /* 8px */\n border-bottom-right-radius: 0.5rem; /* 8px */\n overflow: hidden;\n}\n\n.ZestTextbox-module_progressBar__vwttj {\n height: 100%;\n background-color: #8B5CF6;\n transition: width 0.2s ease, background-color 0.3s ease;\n}\n\n/* === Animated Counter Colors === */\n.ZestTextbox-module_counterYellow__uYGfs {\n color: #A78BFA;\n}\n\n.ZestTextbox-module_counterOrange__b9baX {\n color: #8B5CF6;\n}\n\n.dark .ZestTextbox-module_progressBarContainer__0qFKf {\n background-color: #374151;\n}\n\n.dark .ZestTextbox-module_progressBar__vwttj {\n background-color: #A78BFA;\n}\n\n.dark .ZestTextbox-module_counterYellow__uYGfs {\n color: #C4B5FD;\n}\n\n.dark .ZestTextbox-module_counterOrange__b9baX {\n color: #A78BFA;\n}\n\n@keyframes ZestTextbox-module_pulse-light__CKfhA {\n 0% {\n box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n }\n 50% {\n box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.35); /* 4px */\n }\n 100% {\n box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n }\n}\n\n@keyframes ZestTextbox-module_pulse-dark__L9PYJ {\n 0% {\n box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n }\n 50% {\n box-shadow: 0 0 0 0.25rem rgba(167, 139, 250, 0.45); /* 4px */\n }\n 100% {\n box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n }\n}\n\n/* === Media Queries for Responsive Design === */\n@media (min-width: 48rem) { /* 768px */\n /* Tablet */\n .ZestTextbox-module_sm__yyxXO {\n font-size: 0.875rem; /* 14px */\n }\n .ZestTextbox-module_md__fvL10 {\n font-size: 1rem; /* 16px */\n }\n .ZestTextbox-module_lg__fU93- {\n font-size: 1.125rem; /* 18px */\n }\n}\n\n@media (min-width: 64rem) { /* 1024px */\n /* Desktop */\n .ZestTextbox-module_sm__yyxXO {\n padding: 0.375rem 0.625rem; /* 6px 10px */\n font-size: 0.875rem; /* 14px */\n }\n .ZestTextbox-module_md__fvL10 {\n padding: 0.625rem 0.875rem; /* 10px 14px */\n font-size: 1rem; /* 16px */\n }\n .ZestTextbox-module_lg__fU93- {\n padding: 0.75rem 1rem; /* 12px 16px */\n font-size: 1.125rem; /* 18px */\n }\n}\n";
|
|
79
79
|
var styles = {"textbox":"ZestTextbox-module_textbox__0M5Wq","pulse-light":"ZestTextbox-module_pulse-light__CKfhA","sm":"ZestTextbox-module_sm__yyxXO","md":"ZestTextbox-module_md__fvL10","lg":"ZestTextbox-module_lg__fU93-","fullWidth":"ZestTextbox-module_fullWidth__xn4fT","wrapper":"ZestTextbox-module_wrapper__0ok2A","counter":"ZestTextbox-module_counter__waqIT","pulse-dark":"ZestTextbox-module_pulse-dark__L9PYJ","passwordToggle":"ZestTextbox-module_passwordToggle__I2s4O","eyeIcon":"ZestTextbox-module_eyeIcon__rKiBL","rotate":"ZestTextbox-module_rotate__Ajx19","tooltip":"ZestTextbox-module_tooltip__etRdj","progressBarContainer":"ZestTextbox-module_progressBarContainer__0qFKf","progressBar":"ZestTextbox-module_progressBar__vwttj","counterYellow":"ZestTextbox-module_counterYellow__uYGfs","counterOrange":"ZestTextbox-module_counterOrange__b9baX"};
|
|
80
80
|
styleInject(css_248z);
|
|
81
81
|
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jattac.libs.web.zest-textbox",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "A delightful, feature-rich, and highly customizable React textbox component. Packed with features like automatic theme detection, password visibility toggle, character counters, and engaging animations.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
10
11
|
"import": "./dist/index.esm.js",
|
|
11
12
|
"require": "./dist/index.js"
|
|
12
13
|
}
|
|
13
14
|
},
|
|
14
15
|
"scripts": {
|
|
15
|
-
"build": "rollup -c",
|
|
16
|
-
"postbuild": "rimraf dist/ZestTextbox.d.ts",
|
|
16
|
+
"build": "rollup -c && rollup -c rollup.config.dts.js",
|
|
17
|
+
"postbuild": "rimraf dist/ZestTextbox.d.ts dist/IconEyeOpen.d.ts dist/IconEyeSlashed.d.ts",
|
|
17
18
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
18
19
|
},
|
|
19
20
|
"keywords": [
|
|
@@ -53,6 +54,7 @@
|
|
|
53
54
|
"postcss": "^8.4.38",
|
|
54
55
|
"rimraf": "^6.0.1",
|
|
55
56
|
"rollup": "^4.13.0",
|
|
57
|
+
"rollup-plugin-dts": "^6.2.3",
|
|
56
58
|
"rollup-plugin-postcss": "^4.0.2",
|
|
57
59
|
"typescript": "^5.4.2"
|
|
58
60
|
},
|
package/dist/IconEyeOpen.d.ts
DELETED
package/dist/IconEyeSlashed.d.ts
DELETED