jattac.libs.web.zest-textbox 0.1.0

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.
Files changed (9) hide show
  1. package/README.md +133 -0
  2. package/dist/IconEyeOpen.d.ts +2 -0
  3. package/dist/IconEyeSlashed.d.ts +2 -0
  4. package/dist/index.d.ts +3 -0
  5. package/dist/index.esm.js +138 -0
  6. package/dist/index.esm.js.map +1 -0
  7. package/dist/index.js +142 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +62 -0
package/README.md ADDED
@@ -0,0 +1,133 @@
1
+ # @jattac/zest-textbox
2
+
3
+ A delightful, feature-rich, and highly customizable React textbox component. Built with accessibility and developer experience in mind.
4
+
5
+ `ZestTextbox` is a standalone component that extends the standard HTML `<input>` and `<textarea>` elements with a touch of zest, providing a polished, professional, and playful user experience.
6
+
7
+ ## Table of Contents
8
+
9
+ - [Features](#features)
10
+ - [Installation](#installation)
11
+ - [Basic Usage](#basic-usage)
12
+ - [Props API](#props-api)
13
+ - [Feature Examples](#feature-examples)
14
+ - [Password Input](#password-input)
15
+ - [Character Counter & Progress Bar](#character-counter--progress-bar)
16
+ - [Sizing](#sizing)
17
+ - [Theming](#theming)
18
+ - [Contributing](#contributing)
19
+ - [License](#license)
20
+
21
+ ## Features
22
+
23
+ - **Responsive and Mobile-First:** Designed to look great on any screen size.
24
+ - **Light & Dark Mode:** Automatically adapts to the user's system theme, or can be forced into a specific mode.
25
+ - **Password Visibility Toggle:** A common-sense feature for all password inputs.
26
+ - **Character Counter:** Provides clear feedback on input length.
27
+ - **Engaging Animations:** Subtle, delightful animations on focus and interaction.
28
+ - **Progress Bar:** A visual indicator of the user's progress towards the `maxLength`.
29
+ - **Accessible:** Uses `rem` units for scalability and follows accessibility best practices.
30
+
31
+ ## Installation
32
+
33
+ To install the component, run the following command in your project directory:
34
+
35
+ ```bash
36
+ npm install @jattac/zest-textbox
37
+ ```
38
+
39
+ ## Basic Usage
40
+
41
+ Here's a simple example of how to use the `ZestTextbox` in your React application:
42
+
43
+ ```jsx
44
+ import React from 'react';
45
+ import { ZestTextbox } from '@jattac/zest-textbox';
46
+
47
+ const App = () => {
48
+ return (
49
+ <div style={{ padding: '2rem' }}>
50
+ <ZestTextbox placeholder="Enter your name" />
51
+ </div>
52
+ );
53
+ };
54
+
55
+ export default App;
56
+ ```
57
+
58
+ ## Props API
59
+
60
+ The `ZestTextbox` component accepts all standard props for `<input>` and `<textarea>` elements, in addition to the following custom props:
61
+
62
+ | Prop | Type | Default | Description |
63
+ | ----------------- | ---------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
64
+ | `isMultiline` | `boolean` | `false` | If `true`, the component will render as a `<textarea>`. |
65
+ | `zSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Sets the size of the textbox (padding and font size). |
66
+ | `stretch` | `boolean` | `false` | If `true`, the component will stretch to the full width of its container. |
67
+ | `maxLength` | `number` | `undefined` | The maximum number of characters allowed. Enables the character counter. |
68
+ | `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Controls the component's theme. `'system'` automatically detects the OS/browser preference. |
69
+ | `animatedCounter` | `boolean` | `false` | If `true`, the character counter will change color as it approaches the `maxLength`. Requires `maxLength` to be set. |
70
+ | `showProgressBar` | `boolean` | `false` | If `true`, a progress bar will be displayed at the bottom of the textbox. Requires `maxLength` to be set. |
71
+
72
+ ## Feature Examples
73
+
74
+ ### Password Input
75
+
76
+ To create a password input with a visibility toggle, simply set the `type` prop to `"password"`.
77
+
78
+ ```jsx
79
+ <ZestTextbox type="password" placeholder="Enter your password" />
80
+ ```
81
+
82
+ ### Character Counter & Progress Bar
83
+
84
+ Enable the character counter by setting the `maxLength` prop. You can also enable the progress bar and animated counter for a more engaging experience.
85
+
86
+ ```jsx
87
+ <ZestTextbox
88
+ isMultiline
89
+ maxLength={280}
90
+ placeholder="What's on your mind?"
91
+ showProgressBar
92
+ animatedCounter
93
+ />
94
+ ```
95
+
96
+ ### Sizing
97
+
98
+ The `zSize` prop allows you to control the size of the textbox.
99
+
100
+ ```jsx
101
+ <ZestTextbox zSize="sm" placeholder="Small" />
102
+ <ZestTextbox zSize="md" placeholder="Medium (default)" />
103
+ <ZestTextbox zSize="lg" placeholder="Large" />
104
+ ```
105
+
106
+ ### Theming
107
+
108
+ Force the component into a specific theme using the `theme` prop.
109
+
110
+ ```jsx
111
+ // Force light mode
112
+ <ZestTextbox theme="light" placeholder="Light Mode" />
113
+
114
+ // Force dark mode
115
+ <ZestTextbox theme="dark" placeholder="Dark Mode" />
116
+
117
+ // Automatically adapt to system theme (default)
118
+ <ZestTextbox theme="system" placeholder="System Theme" />
119
+ ```
120
+
121
+ ## Contributing
122
+
123
+ Contributions are welcome! If you have a feature request, bug report, or pull request, please feel free to open an issue or submit a PR.
124
+
125
+ ### Development Setup
126
+
127
+ 1. Clone the repository.
128
+ 2. Install dependencies with `npm install`.
129
+ 3. Run the build with `npm run build`.
130
+
131
+ ## License
132
+
133
+ This project is licensed under the ISC License.
package/dist/IconEyeOpen.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const IconEyeOpen: React.FC<React.SVGProps<SVGSVGElement>>;
package/dist/IconEyeSlashed.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const IconEyeSlashed: React.FC<React.SVGProps<SVGSVGElement>>;
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './ZestTextbox';
2
+ export * from './IconEyeOpen';
3
+ export * from './IconEyeSlashed';
package/dist/index.esm.js ADDED
@@ -0,0 +1,138 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { useState, useEffect } from 'react';
3
+
4
+ /******************************************************************************
5
+ Copyright (c) Microsoft Corporation.
6
+
7
+ Permission to use, copy, modify, and/or distribute this software for any
8
+ purpose with or without fee is hereby granted.
9
+
10
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
11
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
12
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
13
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
14
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
15
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
16
+ PERFORMANCE OF THIS SOFTWARE.
17
+ ***************************************************************************** */
18
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
19
+
20
+
21
+ var __assign = function() {
22
+ __assign = Object.assign || function __assign(t) {
23
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
24
+ s = arguments[i];
25
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
26
+ }
27
+ return t;
28
+ };
29
+ return __assign.apply(this, arguments);
30
+ };
31
+
32
+ function __rest(s, e) {
33
+ var t = {};
34
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
35
+ t[p] = s[p];
36
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
37
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
38
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
39
+ t[p[i]] = s[p[i]];
40
+ }
41
+ return t;
42
+ }
43
+
44
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
45
+ var e = new Error(message);
46
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
47
+ };
48
+
49
+ function styleInject(css, ref) {
50
+ if ( ref === void 0 ) ref = {};
51
+ var insertAt = ref.insertAt;
52
+
53
+ if (typeof document === 'undefined') { return; }
54
+
55
+ var head = document.head || document.getElementsByTagName('head')[0];
56
+ var style = document.createElement('style');
57
+ style.type = 'text/css';
58
+
59
+ if (insertAt === 'top') {
60
+ if (head.firstChild) {
61
+ head.insertBefore(style, head.firstChild);
62
+ } else {
63
+ head.appendChild(style);
64
+ }
65
+ } else {
66
+ head.appendChild(style);
67
+ }
68
+
69
+ if (style.styleSheet) {
70
+ style.styleSheet.cssText = css;
71
+ } else {
72
+ style.appendChild(document.createTextNode(css));
73
+ }
74
+ }
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: 1.5rem; /* 24px */\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
+ 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
+ styleInject(css_248z);
79
+
80
+ var IconEyeOpen = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" }), jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" })] }))); };
81
+
82
+ var IconEyeSlashed = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" }), jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822zm-2.943-1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822z" }), jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.88 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 6.854-12-12 .708-.708 12 12-.708.708z" })] }))); };
83
+
84
+ var ZestTextbox = function (props) {
85
+ var _a = props.zSize, zSize = _a === void 0 ? "md" : _a, _b = props.stretch, fullWidth = _b === void 0 ? false : _b, _c = props.className, className = _c === void 0 ? "" : _c, maxLength = props.maxLength, onChange = props.onChange, type = props.type, _d = props.showProgressBar, showProgressBar = _d === void 0 ? false : _d, _e = props.animatedCounter, animatedCounter = _e === void 0 ? false : _e, _f = props.theme, theme = _f === void 0 ? "system" : _f, rest = __rest(props, ["zSize", "stretch", "className", "maxLength", "onChange", "type", "showProgressBar", "animatedCounter", "theme"]);
86
+ var _g = useState(""), value = _g[0], setValue = _g[1];
87
+ var _h = useState(false), isDark = _h[0], setIsDark = _h[1];
88
+ var _j = useState(false), isPasswordVisible = _j[0], setIsPasswordVisible = _j[1];
89
+ // === Advanced Theme Control ===
90
+ useEffect(function () {
91
+ if (theme === "dark") {
92
+ setIsDark(true);
93
+ return;
94
+ }
95
+ if (theme === "light") {
96
+ setIsDark(false);
97
+ return;
98
+ }
99
+ // System theme
100
+ var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
101
+ var handleChange = function () { return setIsDark(mediaQuery.matches); };
102
+ handleChange(); // Set initial theme
103
+ mediaQuery.addEventListener("change", handleChange);
104
+ return function () { return mediaQuery.removeEventListener("change", handleChange); };
105
+ }, [theme]);
106
+ var classList = [
107
+ styles.textbox,
108
+ styles[zSize],
109
+ fullWidth ? styles.fullWidth : "",
110
+ className,
111
+ isDark ? styles.dark : "",
112
+ ]
113
+ .filter(Boolean)
114
+ .join(" ");
115
+ var handleInputChange = function (e) {
116
+ if (maxLength !== undefined && e.target.value.length > maxLength)
117
+ return;
118
+ setValue(e.target.value);
119
+ if (onChange)
120
+ onChange(e); // cast because it could be input or textarea
121
+ };
122
+ var isPassword = type === "password";
123
+ var inputType = isPassword && isPasswordVisible ? "text" : type;
124
+ var commonProps = __assign({ className: classList, maxLength: maxLength, onChange: handleInputChange, value: value, type: inputType }, rest);
125
+ var showCounter = typeof maxLength === "number";
126
+ var charPercentage = showCounter ? (value.length / maxLength) * 100 : 0;
127
+ var counterColorClass = animatedCounter
128
+ ? charPercentage > 90
129
+ ? styles.counterOrange
130
+ : charPercentage > 70
131
+ ? styles.counterYellow
132
+ : ""
133
+ : "";
134
+ return (jsxs("div", { className: styles.wrapper, children: ["isMultiline" in props && props.isMultiline ? (jsx("textarea", __assign({}, commonProps))) : (jsx("input", __assign({}, commonProps))), showCounter && (jsxs("div", { className: "".concat(styles.counter, " ").concat(counterColorClass), children: [value.length, " / ", maxLength] })), isPassword && (jsxs("div", { className: styles.passwordToggle, onClick: function () { return setIsPasswordVisible(!isPasswordVisible); }, children: [jsx("div", { className: styles.tooltip, children: isPasswordVisible ? "Hide password" : "Show password" }), isPasswordVisible ? (jsx(IconEyeOpen, { className: "".concat(styles.eyeIcon, " ").concat(isPasswordVisible ? styles.rotate : "") })) : (jsx(IconEyeSlashed, { className: "".concat(styles.eyeIcon, " ").concat(!isPasswordVisible ? styles.rotate : "") }))] })), showProgressBar && showCounter && (jsx("div", { className: styles.progressBarContainer, children: jsx("div", { className: "".concat(styles.progressBar, " ").concat(counterColorClass), style: { width: "".concat(charPercentage, "%") } }) }))] }));
135
+ };
136
+
137
+ export { IconEyeOpen, IconEyeSlashed, ZestTextbox };
138
+ //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.esm.js","sources":["../node_modules/tslib/tslib.es6.js","../node_modules/style-inject/dist/style-inject.es.js","../UI/IconEyeOpen.tsx","../UI/IconEyeSlashed.tsx","../UI/ZestTextbox.tsx"],"sourcesContent":["/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n var _, done = false;\r\n for (var i = decorators.length - 1; i >= 0; i--) {\r\n var context = {};\r\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n if (kind === \"accessor\") {\r\n if (result === void 0) continue;\r\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n if (_ = accept(result.get)) descriptor.get = _;\r\n if (_ = accept(result.set)) descriptor.set = _;\r\n if (_ = accept(result.init)) initializers.unshift(_);\r\n }\r\n else if (_ = accept(result)) {\r\n if (kind === \"field\") initializers.unshift(_);\r\n else descriptor[key] = _;\r\n }\r\n }\r\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n var useValue = arguments.length > 2;\r\n for (var i = 0; i < initializers.length; i++) {\r\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n }\r\n return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n var desc = Object.getOwnPropertyDescriptor(m, k);\r\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n desc = { enumerable: true, get: function() { return m[k]; } };\r\n }\r\n Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n ownKeys = Object.getOwnPropertyNames || function (o) {\r\n var ar = [];\r\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n return ar;\r\n };\r\n return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n if (value !== null && value !== void 0) {\r\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n var dispose, inner;\r\n if (async) {\r\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n dispose = value[Symbol.asyncDispose];\r\n }\r\n if (dispose === void 0) {\r\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n dispose = value[Symbol.dispose];\r\n if (async) inner = dispose;\r\n }\r\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n env.stack.push({ value: value, dispose: dispose, async: async });\r\n }\r\n else if (async) {\r\n env.stack.push({ async: true });\r\n }\r\n return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n var e = new Error(message);\r\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n function fail(e) {\r\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n env.hasError = true;\r\n }\r\n var r, s = 0;\r\n function next() {\r\n while (r = env.stack.pop()) {\r\n try {\r\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n if (r.dispose) {\r\n var result = r.dispose.call(r.value);\r\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n }\r\n else s |= 1;\r\n }\r\n catch (e) {\r\n fail(e);\r\n }\r\n }\r\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n if (env.hasError) throw env.error;\r\n }\r\n return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n });\r\n }\r\n return path;\r\n}\r\n\r\nexport default {\r\n __extends: __extends,\r\n __assign: __assign,\r\n __rest: __rest,\r\n __decorate: __decorate,\r\n __param: __param,\r\n __esDecorate: __esDecorate,\r\n __runInitializers: __runInitializers,\r\n __propKey: __propKey,\r\n __setFunctionName: __setFunctionName,\r\n __metadata: __metadata,\r\n __awaiter: __awaiter,\r\n __generator: __generator,\r\n __createBinding: __createBinding,\r\n __exportStar: __exportStar,\r\n __values: __values,\r\n __read: __read,\r\n __spread: __spread,\r\n __spreadArrays: __spreadArrays,\r\n __spreadArray: __spreadArray,\r\n __await: __await,\r\n __asyncGenerator: __asyncGenerator,\r\n __asyncDelegator: __asyncDelegator,\r\n __asyncValues: __asyncValues,\r\n __makeTemplateObject: __makeTemplateObject,\r\n __importStar: __importStar,\r\n __importDefault: __importDefault,\r\n __classPrivateFieldGet: __classPrivateFieldGet,\r\n __classPrivateFieldSet: __classPrivateFieldSet,\r\n __classPrivateFieldIn: __classPrivateFieldIn,\r\n __addDisposableResource: __addDisposableResource,\r\n __disposeResources: __disposeResources,\r\n __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\n\nexport const IconEyeOpen: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" {...props}>\n <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z\"/>\n <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0\"/>\n </svg>\n);\n","import React from 'react';\n\nexport const IconEyeSlashed: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" {...props}>\n <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z\"/>\n <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822zm-2.943-1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822z\"/>\n <path d=\"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.88 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 6.854-12-12 .708-.708 12 12-.708.708z\"/>\n </svg>\n);\n","import React, { useState, useEffect } from \"react\";\nimport styles from \"../Styles/ZestTextbox.module.css\";\nimport { IconEyeOpen } from \"./IconEyeOpen\";\nimport { IconEyeSlashed } from \"./IconEyeSlashed\";\n\nexport type ZestTextboxSize = \"sm\" | \"md\" | \"lg\";\n\ntype SharedProps = {\n zSize?: ZestTextboxSize;\n stretch?: boolean;\n className?: string;\n maxLength?: number;\n showProgressBar?: boolean;\n animatedCounter?: boolean;\n theme?: \"light\" | \"dark\" | \"system\";\n type?:\n | \"text\"\n | \"email\"\n | \"password\"\n | \"number\"\n | \"tel\"\n | \"url\"\n | \"search\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"month\"\n | \"time\"\n | \"week\";\n};\n\ntype InputOnlyProps = SharedProps &\n Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> & {\n isMultiline?: false;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n };\n\ntype TextareaOnlyProps = SharedProps &\n Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"onChange\"> & {\n isMultiline: true;\n onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;\n };\n\ntype ZestTextboxProps = InputOnlyProps | TextareaOnlyProps;\n\nexport const ZestTextbox: React.FC<ZestTextboxProps> = (props) => {\n const {\n zSize = \"md\",\n stretch: fullWidth = false,\n className = \"\",\n maxLength,\n onChange,\n type,\n showProgressBar = false,\n animatedCounter = false,\n theme = \"system\",\n ...rest\n } = props;\n\n const [value, setValue] = useState(\"\");\n const [isDark, setIsDark] = useState(false);\n const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n // === Advanced Theme Control ===\n useEffect(() => {\n if (theme === \"dark\") {\n setIsDark(true);\n return;\n }\n if (theme === \"light\") {\n setIsDark(false);\n return;\n }\n\n // System theme\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setIsDark(mediaQuery.matches);\n\n handleChange(); // Set initial theme\n mediaQuery.addEventListener(\"change\", handleChange);\n\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, [theme]);\n\n const classList = [\n styles.textbox,\n styles[zSize],\n fullWidth ? styles.fullWidth : \"\",\n className,\n isDark ? styles.dark : \"\",\n ]\n .filter(Boolean)\n .join(\" \");\n\n const handleInputChange = (\n e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n ) => {\n if (maxLength !== undefined && e.target.value.length > maxLength) return;\n\n setValue(e.target.value);\n\n if (onChange) onChange(e as never); // cast because it could be input or textarea\n };\n\n const isPassword = type === \"password\";\n const inputType = isPassword && isPasswordVisible ? \"text\" : type;\n\n const commonProps = {\n className: classList,\n maxLength,\n onChange: handleInputChange,\n value,\n type: inputType,\n ...rest,\n };\n\n const showCounter = typeof maxLength === \"number\";\n const charPercentage = showCounter ? (value.length / maxLength) * 100 : 0;\n\n const counterColorClass = animatedCounter\n ? charPercentage > 90\n ? styles.counterOrange\n : charPercentage > 70\n ? styles.counterYellow\n : \"\"\n : \"\";\n\n return (\n <div className={styles.wrapper}>\n {\"isMultiline\" in props && props.isMultiline ? (\n <textarea\n {...(commonProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}\n />\n ) : (\n <input\n {...(commonProps as React.InputHTMLAttributes<HTMLInputElement>)}\n />\n )}\n\n {showCounter && (\n <div className={`${styles.counter} ${counterColorClass}`}>\n {value.length} / {maxLength}\n </div>\n )}\n\n {isPassword && (\n <div\n className={styles.passwordToggle}\n onClick={() => setIsPasswordVisible(!isPasswordVisible)}\n >\n <div className={styles.tooltip}>\n {isPasswordVisible ? \"Hide password\" : \"Show password\"}\n </div>\n {isPasswordVisible ? (\n <IconEyeOpen\n className={`${styles.eyeIcon} ${isPasswordVisible ? styles.rotate : \"\"}`}\n />\n ) : (\n <IconEyeSlashed\n className={`${styles.eyeIcon} ${!isPasswordVisible ? styles.rotate : \"\"}`}\n />\n )}\n </div>\n )}\n\n {showProgressBar && showCounter && (\n <div className={styles.progressBarContainer}>\n <div\n className={`${styles.progressBar} ${counterColorClass}`}\n style={{ width: `${charPercentage}%` }}\n />\n </div>\n )}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0,1]}
package/dist/index.js ADDED
@@ -0,0 +1,142 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+
6
+ /******************************************************************************
7
+ Copyright (c) Microsoft Corporation.
8
+
9
+ Permission to use, copy, modify, and/or distribute this software for any
10
+ purpose with or without fee is hereby granted.
11
+
12
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
13
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
14
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
15
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
16
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
17
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
18
+ PERFORMANCE OF THIS SOFTWARE.
19
+ ***************************************************************************** */
20
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
21
+
22
+
23
+ var __assign = function() {
24
+ __assign = Object.assign || function __assign(t) {
25
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
26
+ s = arguments[i];
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
28
+ }
29
+ return t;
30
+ };
31
+ return __assign.apply(this, arguments);
32
+ };
33
+
34
+ function __rest(s, e) {
35
+ var t = {};
36
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
37
+ t[p] = s[p];
38
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
39
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
40
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
41
+ t[p[i]] = s[p[i]];
42
+ }
43
+ return t;
44
+ }
45
+
46
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
47
+ var e = new Error(message);
48
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
49
+ };
50
+
51
+ function styleInject(css, ref) {
52
+ if ( ref === void 0 ) ref = {};
53
+ var insertAt = ref.insertAt;
54
+
55
+ if (typeof document === 'undefined') { return; }
56
+
57
+ var head = document.head || document.getElementsByTagName('head')[0];
58
+ var style = document.createElement('style');
59
+ style.type = 'text/css';
60
+
61
+ if (insertAt === 'top') {
62
+ if (head.firstChild) {
63
+ head.insertBefore(style, head.firstChild);
64
+ } else {
65
+ head.appendChild(style);
66
+ }
67
+ } else {
68
+ head.appendChild(style);
69
+ }
70
+
71
+ if (style.styleSheet) {
72
+ style.styleSheet.cssText = css;
73
+ } else {
74
+ style.appendChild(document.createTextNode(css));
75
+ }
76
+ }
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: 1.5rem; /* 24px */\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
+ 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
+ styleInject(css_248z);
81
+
82
+ var IconEyeOpen = function (props) { return (jsxRuntime.jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsxRuntime.jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" }), jsxRuntime.jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" })] }))); };
83
+
84
+ var IconEyeSlashed = function (props) { return (jsxRuntime.jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsxRuntime.jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" }), jsxRuntime.jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822zm-2.943-1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822z" }), jsxRuntime.jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.88 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 6.854-12-12 .708-.708 12 12-.708.708z" })] }))); };
85
+
86
+ var ZestTextbox = function (props) {
87
+ var _a = props.zSize, zSize = _a === void 0 ? "md" : _a, _b = props.stretch, fullWidth = _b === void 0 ? false : _b, _c = props.className, className = _c === void 0 ? "" : _c, maxLength = props.maxLength, onChange = props.onChange, type = props.type, _d = props.showProgressBar, showProgressBar = _d === void 0 ? false : _d, _e = props.animatedCounter, animatedCounter = _e === void 0 ? false : _e, _f = props.theme, theme = _f === void 0 ? "system" : _f, rest = __rest(props, ["zSize", "stretch", "className", "maxLength", "onChange", "type", "showProgressBar", "animatedCounter", "theme"]);
88
+ var _g = react.useState(""), value = _g[0], setValue = _g[1];
89
+ var _h = react.useState(false), isDark = _h[0], setIsDark = _h[1];
90
+ var _j = react.useState(false), isPasswordVisible = _j[0], setIsPasswordVisible = _j[1];
91
+ // === Advanced Theme Control ===
92
+ react.useEffect(function () {
93
+ if (theme === "dark") {
94
+ setIsDark(true);
95
+ return;
96
+ }
97
+ if (theme === "light") {
98
+ setIsDark(false);
99
+ return;
100
+ }
101
+ // System theme
102
+ var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
103
+ var handleChange = function () { return setIsDark(mediaQuery.matches); };
104
+ handleChange(); // Set initial theme
105
+ mediaQuery.addEventListener("change", handleChange);
106
+ return function () { return mediaQuery.removeEventListener("change", handleChange); };
107
+ }, [theme]);
108
+ var classList = [
109
+ styles.textbox,
110
+ styles[zSize],
111
+ fullWidth ? styles.fullWidth : "",
112
+ className,
113
+ isDark ? styles.dark : "",
114
+ ]
115
+ .filter(Boolean)
116
+ .join(" ");
117
+ var handleInputChange = function (e) {
118
+ if (maxLength !== undefined && e.target.value.length > maxLength)
119
+ return;
120
+ setValue(e.target.value);
121
+ if (onChange)
122
+ onChange(e); // cast because it could be input or textarea
123
+ };
124
+ var isPassword = type === "password";
125
+ var inputType = isPassword && isPasswordVisible ? "text" : type;
126
+ var commonProps = __assign({ className: classList, maxLength: maxLength, onChange: handleInputChange, value: value, type: inputType }, rest);
127
+ var showCounter = typeof maxLength === "number";
128
+ var charPercentage = showCounter ? (value.length / maxLength) * 100 : 0;
129
+ var counterColorClass = animatedCounter
130
+ ? charPercentage > 90
131
+ ? styles.counterOrange
132
+ : charPercentage > 70
133
+ ? styles.counterYellow
134
+ : ""
135
+ : "";
136
+ return (jsxRuntime.jsxs("div", { className: styles.wrapper, children: ["isMultiline" in props && props.isMultiline ? (jsxRuntime.jsx("textarea", __assign({}, commonProps))) : (jsxRuntime.jsx("input", __assign({}, commonProps))), showCounter && (jsxRuntime.jsxs("div", { className: "".concat(styles.counter, " ").concat(counterColorClass), children: [value.length, " / ", maxLength] })), isPassword && (jsxRuntime.jsxs("div", { className: styles.passwordToggle, onClick: function () { return setIsPasswordVisible(!isPasswordVisible); }, children: [jsxRuntime.jsx("div", { className: styles.tooltip, children: isPasswordVisible ? "Hide password" : "Show password" }), isPasswordVisible ? (jsxRuntime.jsx(IconEyeOpen, { className: "".concat(styles.eyeIcon, " ").concat(isPasswordVisible ? styles.rotate : "") })) : (jsxRuntime.jsx(IconEyeSlashed, { className: "".concat(styles.eyeIcon, " ").concat(!isPasswordVisible ? styles.rotate : "") }))] })), showProgressBar && showCounter && (jsxRuntime.jsx("div", { className: styles.progressBarContainer, children: jsxRuntime.jsx("div", { className: "".concat(styles.progressBar, " ").concat(counterColorClass), style: { width: "".concat(charPercentage, "%") } }) }))] }));
137
+ };
138
+
139
+ exports.IconEyeOpen = IconEyeOpen;
140
+ exports.IconEyeSlashed = IconEyeSlashed;
141
+ exports.ZestTextbox = ZestTextbox;
142
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../node_modules/tslib/tslib.es6.js","../node_modules/style-inject/dist/style-inject.es.js","../UI/IconEyeOpen.tsx","../UI/IconEyeSlashed.tsx","../UI/ZestTextbox.tsx"],"sourcesContent":["/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n var _, done = false;\r\n for (var i = decorators.length - 1; i >= 0; i--) {\r\n var context = {};\r\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n if (kind === \"accessor\") {\r\n if (result === void 0) continue;\r\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n if (_ = accept(result.get)) descriptor.get = _;\r\n if (_ = accept(result.set)) descriptor.set = _;\r\n if (_ = accept(result.init)) initializers.unshift(_);\r\n }\r\n else if (_ = accept(result)) {\r\n if (kind === \"field\") initializers.unshift(_);\r\n else descriptor[key] = _;\r\n }\r\n }\r\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n var useValue = arguments.length > 2;\r\n for (var i = 0; i < initializers.length; i++) {\r\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n }\r\n return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n var desc = Object.getOwnPropertyDescriptor(m, k);\r\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n desc = { enumerable: true, get: function() { return m[k]; } };\r\n }\r\n Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n ownKeys = Object.getOwnPropertyNames || function (o) {\r\n var ar = [];\r\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n return ar;\r\n };\r\n return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n if (value !== null && value !== void 0) {\r\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n var dispose, inner;\r\n if (async) {\r\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n dispose = value[Symbol.asyncDispose];\r\n }\r\n if (dispose === void 0) {\r\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n dispose = value[Symbol.dispose];\r\n if (async) inner = dispose;\r\n }\r\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n env.stack.push({ value: value, dispose: dispose, async: async });\r\n }\r\n else if (async) {\r\n env.stack.push({ async: true });\r\n }\r\n return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n var e = new Error(message);\r\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n function fail(e) {\r\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n env.hasError = true;\r\n }\r\n var r, s = 0;\r\n function next() {\r\n while (r = env.stack.pop()) {\r\n try {\r\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n if (r.dispose) {\r\n var result = r.dispose.call(r.value);\r\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n }\r\n else s |= 1;\r\n }\r\n catch (e) {\r\n fail(e);\r\n }\r\n }\r\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n if (env.hasError) throw env.error;\r\n }\r\n return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n });\r\n }\r\n return path;\r\n}\r\n\r\nexport default {\r\n __extends: __extends,\r\n __assign: __assign,\r\n __rest: __rest,\r\n __decorate: __decorate,\r\n __param: __param,\r\n __esDecorate: __esDecorate,\r\n __runInitializers: __runInitializers,\r\n __propKey: __propKey,\r\n __setFunctionName: __setFunctionName,\r\n __metadata: __metadata,\r\n __awaiter: __awaiter,\r\n __generator: __generator,\r\n __createBinding: __createBinding,\r\n __exportStar: __exportStar,\r\n __values: __values,\r\n __read: __read,\r\n __spread: __spread,\r\n __spreadArrays: __spreadArrays,\r\n __spreadArray: __spreadArray,\r\n __await: __await,\r\n __asyncGenerator: __asyncGenerator,\r\n __asyncDelegator: __asyncDelegator,\r\n __asyncValues: __asyncValues,\r\n __makeTemplateObject: __makeTemplateObject,\r\n __importStar: __importStar,\r\n __importDefault: __importDefault,\r\n __classPrivateFieldGet: __classPrivateFieldGet,\r\n __classPrivateFieldSet: __classPrivateFieldSet,\r\n __classPrivateFieldIn: __classPrivateFieldIn,\r\n __addDisposableResource: __addDisposableResource,\r\n __disposeResources: __disposeResources,\r\n __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\n\nexport const IconEyeOpen: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" {...props}>\n <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z\"/>\n <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0\"/>\n </svg>\n);\n","import React from 'react';\n\nexport const IconEyeSlashed: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" {...props}>\n <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z\"/>\n <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822zm-2.943-1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822z\"/>\n <path d=\"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.88 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 6.854-12-12 .708-.708 12 12-.708.708z\"/>\n </svg>\n);\n","import React, { useState, useEffect } from \"react\";\nimport styles from \"../Styles/ZestTextbox.module.css\";\nimport { IconEyeOpen } from \"./IconEyeOpen\";\nimport { IconEyeSlashed } from \"./IconEyeSlashed\";\n\nexport type ZestTextboxSize = \"sm\" | \"md\" | \"lg\";\n\ntype SharedProps = {\n zSize?: ZestTextboxSize;\n stretch?: boolean;\n className?: string;\n maxLength?: number;\n showProgressBar?: boolean;\n animatedCounter?: boolean;\n theme?: \"light\" | \"dark\" | \"system\";\n type?:\n | \"text\"\n | \"email\"\n | \"password\"\n | \"number\"\n | \"tel\"\n | \"url\"\n | \"search\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"month\"\n | \"time\"\n | \"week\";\n};\n\ntype InputOnlyProps = SharedProps &\n Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> & {\n isMultiline?: false;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n };\n\ntype TextareaOnlyProps = SharedProps &\n Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"onChange\"> & {\n isMultiline: true;\n onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;\n };\n\ntype ZestTextboxProps = InputOnlyProps | TextareaOnlyProps;\n\nexport const ZestTextbox: React.FC<ZestTextboxProps> = (props) => {\n const {\n zSize = \"md\",\n stretch: fullWidth = false,\n className = \"\",\n maxLength,\n onChange,\n type,\n showProgressBar = false,\n animatedCounter = false,\n theme = \"system\",\n ...rest\n } = props;\n\n const [value, setValue] = useState(\"\");\n const [isDark, setIsDark] = useState(false);\n const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n // === Advanced Theme Control ===\n useEffect(() => {\n if (theme === \"dark\") {\n setIsDark(true);\n return;\n }\n if (theme === \"light\") {\n setIsDark(false);\n return;\n }\n\n // System theme\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setIsDark(mediaQuery.matches);\n\n handleChange(); // Set initial theme\n mediaQuery.addEventListener(\"change\", handleChange);\n\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, [theme]);\n\n const classList = [\n styles.textbox,\n styles[zSize],\n fullWidth ? styles.fullWidth : \"\",\n className,\n isDark ? styles.dark : \"\",\n ]\n .filter(Boolean)\n .join(\" \");\n\n const handleInputChange = (\n e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n ) => {\n if (maxLength !== undefined && e.target.value.length > maxLength) return;\n\n setValue(e.target.value);\n\n if (onChange) onChange(e as never); // cast because it could be input or textarea\n };\n\n const isPassword = type === \"password\";\n const inputType = isPassword && isPasswordVisible ? \"text\" : type;\n\n const commonProps = {\n className: classList,\n maxLength,\n onChange: handleInputChange,\n value,\n type: inputType,\n ...rest,\n };\n\n const showCounter = typeof maxLength === \"number\";\n const charPercentage = showCounter ? (value.length / maxLength) * 100 : 0;\n\n const counterColorClass = animatedCounter\n ? charPercentage > 90\n ? styles.counterOrange\n : charPercentage > 70\n ? styles.counterYellow\n : \"\"\n : \"\";\n\n return (\n <div className={styles.wrapper}>\n {\"isMultiline\" in props && props.isMultiline ? (\n <textarea\n {...(commonProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}\n />\n ) : (\n <input\n {...(commonProps as React.InputHTMLAttributes<HTMLInputElement>)}\n />\n )}\n\n {showCounter && (\n <div className={`${styles.counter} ${counterColorClass}`}>\n {value.length} / {maxLength}\n </div>\n )}\n\n {isPassword && (\n <div\n className={styles.passwordToggle}\n onClick={() => setIsPasswordVisible(!isPasswordVisible)}\n >\n <div className={styles.tooltip}>\n {isPasswordVisible ? \"Hide password\" : \"Show password\"}\n </div>\n {isPasswordVisible ? (\n <IconEyeOpen\n className={`${styles.eyeIcon} ${isPasswordVisible ? styles.rotate : \"\"}`}\n />\n ) : (\n <IconEyeSlashed\n className={`${styles.eyeIcon} ${!isPasswordVisible ? styles.rotate : \"\"}`}\n />\n )}\n </div>\n )}\n\n {showProgressBar && showCounter && (\n <div className={styles.progressBarContainer}>\n <div\n className={`${styles.progressBar} ${counterColorClass}`}\n style={{ width: `${charPercentage}%` }}\n />\n </div>\n )}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","useState","useEffect"],"mappings":"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","x_google_ignoreList":[0,1]}
package/package.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "name": "jattac.libs.web.zest-textbox",
3
+ "version": "0.1.0",
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
+ "main": "dist/index.js",
6
+ "module": "dist/index.esm.js",
7
+ "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/index.esm.js",
11
+ "require": "./dist/index.js"
12
+ }
13
+ },
14
+ "scripts": {
15
+ "build": "rollup -c",
16
+ "postbuild": "rimraf dist/ZestTextbox.d.ts",
17
+ "test": "echo \"Error: no test specified\" && exit 1"
18
+ },
19
+ "keywords": [
20
+ "react",
21
+ "component",
22
+ "textbox",
23
+ "input",
24
+ "textarea",
25
+ "ui",
26
+ "form",
27
+ "zest",
28
+ "jattac"
29
+ ],
30
+ "author": "Nyingi Maina",
31
+ "license": "ISC",
32
+ "homepage": "https://github.com/nyingimaina/-jattac-zest-textbox",
33
+ "repository": {
34
+ "type": "git",
35
+ "url": "https://github.com/nyingimaina/-jattac-zest-textbox.git"
36
+ },
37
+ "bugs": {
38
+ "url": "https://github.com/nyingimaina/-jattac-zest-textbox/issues"
39
+ },
40
+ "type": "module",
41
+ "sideEffects": false,
42
+ "peerDependencies": {
43
+ "react": "^18.0.0",
44
+ "react-dom": "^18.0.0"
45
+ },
46
+ "files": [
47
+ "dist"
48
+ ],
49
+ "devDependencies": {
50
+ "@rollup/plugin-typescript": "^11.1.6",
51
+ "@types/react": "^18.2.0",
52
+ "@types/react-dom": "^18.2.0",
53
+ "postcss": "^8.4.38",
54
+ "rimraf": "^6.0.1",
55
+ "rollup": "^4.13.0",
56
+ "rollup-plugin-postcss": "^4.0.2",
57
+ "typescript": "^5.4.2"
58
+ },
59
+ "dependencies": {
60
+ "tslib": "^2.8.1"
61
+ }
62
+ }