@jars-labs/jars-components 1.0.3 → 1.0.4

package/dist/index.js

@@ -1167,6 +1167,50 @@ var IncrementNumber = function (props) {
                     } }) }))] }));
 };
 
+var EyeHide = function (props) {
+    return (jsxRuntime.jsx(Icon, __assign({}, props, { children: jsxRuntime.jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16 25.333c-1.123 0-2.247-.237-3.339-.66M16 25.333c4.66 0 9.32-4.044 11.843-8.709.209-.388.209-.859 0-1.247a20.174 20.174 0 00-2.404-3.482M6.667 25.333L25.333 6.667M13.031 18.969a4.2 4.2 0 015.94-5.94m3.754-3.754C20.663 7.679 18.331 6.667 16 6.667c-4.66 0-9.32 4.044-11.843 8.71-.209.388-.209.859 0 1.247 1.262 2.332 3.056 4.508 5.118 6.103" }) })));
+};
+
+var EyeShow = function (props) {
+    return (jsxRuntime.jsxs(Icon, __assign({}, props, { children: [jsxRuntime.jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M18.83 13.173a4.005 4.005 0 010 5.66 4.005 4.005 0 01-5.66 0 4.005 4.005 0 010-5.66 4 4 0 015.66 0z", clipRule: "evenodd" }), jsxRuntime.jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4 16c0-.879.203-1.748.595-2.55C6.615 9.322 11.079 6.668 16 6.668c4.921 0 9.385 2.654 11.405 6.784.392.801.595 1.67.595 2.549s-.203 1.748-.595 2.55c-2.02 4.129-6.484 6.783-11.405 6.783-4.921 0-9.385-2.654-11.405-6.784A5.795 5.795 0 014 16z", clipRule: "evenodd" })] })));
+};
+
+/**
+ * PasswordInput component
+ * It allows toggling visibility of the password.
+ * It extends the Input component.
+ *
+ * @param {string} name - The name of the input password field.
+ * @param {string} label - The label for the input password field.
+ * @param {string} placeholder - The placeholder text for the input password field.
+ * @param {string} value - The value of the input password field.
+ * @param {function} onChange - The function to call when the input password value changes.
+ * @param {function} onBlur - The function to call when the input password loses focus.
+ * @param {string} error - The error message to display.
+ *
+ * @return Attaches PasswordInput to target element and displays options
+ *
+ * @example
+ * <PasswordInput
+ *   name="password"
+ *   label="Password"
+ *   placeholder="Password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   onBlur={() => console.log('Password blurred')}
+ *   error="Password is required"
+ * />
+ *
+ */
+var PasswordInput = function (_a) {
+    var name = _a.name, label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error;
+    var _b = t.useState(false), showPassword = _b[0], setShowPassword = _b[1];
+    var togglePasswordVisibility = function () {
+        setShowPassword(function (prevShowPassword) { return !prevShowPassword; });
+    };
+    return (jsxRuntime.jsx(Input, { "data-testid": name, name: name, label: label, placeholder: placeholder, type: showPassword ? 'text' : 'password', value: value, onChange: onChange, onBlur: onBlur, error: error, rightSection: jsxRuntime.jsx(core.Flex, { onClick: togglePasswordVisibility, align: 'center', style: { cursor: 'pointer' }, children: showPassword ? (jsxRuntime.jsx(EyeShow, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) : (jsxRuntime.jsx(EyeHide, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) }) }));
+};
+
 const link = "mc234e3a09_link";
 const s = "mc234e3a09_s";
 const m$1 = "mc234e3a09_m";
@@ -1774,14 +1818,6 @@ var Dog = function (props) {
     return (jsxRuntime.jsxs(Icon, __assign({}, props, { children: [jsxRuntime.jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M15.642 18.223v0a.66.66 0 01-.652-.667v0a.22.22 0 01.218-.222h.87c.12 0 .216.1.216.222v0a.66.66 0 01-.652.667z", clipRule: "evenodd" }), jsxRuntime.jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M23.467 17.334c0 .737.584 1.334 1.304 1.334v0c1.44 0 2.608-1.195 2.608-2.668v-4.002c0-2.21-1.752-4.001-3.912-4.001h-.544M10.493 23.798l-1.371 4.207M20.792 23.798l1.37 4.207M8.362 7.997h-.544c-2.16 0-3.912 1.791-3.912 4.001V16c0 1.473 1.167 2.668 2.608 2.668v0c.72 0 1.304-.597 1.304-1.334M18.25 23.775v.895c0 1.105-.875 2.001-1.956 2.001H14.99c-1.08 0-1.956-.896-1.956-2v-.896" }), jsxRuntime.jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M15.642 18.223v1.779c0 2.21-1.751 4.001-3.912 4.001v0c-2.16 0-3.912-1.791-3.912-4.001v-9.338c0-3.683 2.92-6.669 6.52-6.669h2.609c3.6 0 6.52 2.986 6.52 6.67v9.337c0 2.21-1.752 4.001-3.912 4.001v0c-2.161 0-3.913-1.791-3.913-4.001v-1.779z", clipRule: "evenodd" }), jsxRuntime.jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M18.577 12.666a.33.33 0 01-.327.333.33.33 0 01-.326-.334.33.33 0 01.326-.333c.087 0 .17.035.231.098a.337.337 0 01.096.236M13.36 12.666a.33.33 0 01-.326.333.33.33 0 01-.326-.334.33.33 0 01.326-.333c.086 0 .17.035.23.098a.337.337 0 01.096.236" })] })));
 };
 
-var EyeHide = function (props) {
-    return (jsxRuntime.jsx(Icon, __assign({}, props, { children: jsxRuntime.jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16 25.333c-1.123 0-2.247-.237-3.339-.66M16 25.333c4.66 0 9.32-4.044 11.843-8.709.209-.388.209-.859 0-1.247a20.174 20.174 0 00-2.404-3.482M6.667 25.333L25.333 6.667M13.031 18.969a4.2 4.2 0 015.94-5.94m3.754-3.754C20.663 7.679 18.331 6.667 16 6.667c-4.66 0-9.32 4.044-11.843 8.71-.209.388-.209.859 0 1.247 1.262 2.332 3.056 4.508 5.118 6.103" }) })));
-};
-
-var EyeShow = function (props) {
-    return (jsxRuntime.jsxs(Icon, __assign({}, props, { children: [jsxRuntime.jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M18.83 13.173a4.005 4.005 0 010 5.66 4.005 4.005 0 01-5.66 0 4.005 4.005 0 010-5.66 4 4 0 015.66 0z", clipRule: "evenodd" }), jsxRuntime.jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4 16c0-.879.203-1.748.595-2.55C6.615 9.322 11.079 6.668 16 6.668c4.921 0 9.385 2.654 11.405 6.784.392.801.595 1.67.595 2.549s-.203 1.748-.595 2.55c-2.02 4.129-6.484 6.783-11.405 6.783-4.921 0-9.385-2.654-11.405-6.784A5.795 5.795 0 014 16z", clipRule: "evenodd" })] })));
-};
-
 var Fingerprint = function (_a) {
     var _b = _a.width, width = _b === void 0 ? '32px' : _b, _c = _a.height, height = _c === void 0 ? '32px' : _c, _d = _a.viewBox, viewBox = _d === void 0 ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === void 0 ? 'currentColor' : _e, _f = _a.fill, fill = _f === void 0 ? 'none' : _f;
     return (jsxRuntime.jsxs(Icon, { width: width, height: height, viewBox: viewBox, fill: fill, children: [jsxRuntime.jsx("path", { stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M10.272 23.728l.452-.452A3.22 3.22 0 0113 22.333v0c.854 0 1.672.34 2.276.943l.452.452A4.342 4.342 0 0018.798 25h.526a4.343 4.343 0 004.343-4.343v0a4.343 4.343 0 00-1.934-3.613v0a10.638 10.638 0 01-3.31-3.527l-1.226-2.122A4.793 4.793 0 0013.047 9v0a4.793 4.793 0 00-4.11 2.327l-1.373 2.288a10.637 10.637 0 01-3.22 3.378l-.077.051a4.343 4.343 0 00-1.934 3.613v0A4.343 4.343 0 006.676 25H7.2a4.343 4.343 0 003.07-1.272v0z", clipRule: "evenodd" }), jsxRuntime.jsx("circle", { cx: "3", cy: "9.667", r: "2", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), jsxRuntime.jsx("circle", { cx: "23", cy: "9.667", r: "2", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), jsxRuntime.jsx("ellipse", { cx: "8.714", cy: "3", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", rx: "2", ry: "2" }), jsxRuntime.jsx("circle", { cx: "17.286", cy: "3", r: "2", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" })] }));
@@ -22041,6 +22077,7 @@ exports.NavBar = NavBar;
 exports.Notification = Notification;
 exports.Open = Open;
 exports.Pagination = Pagination;
+exports.PasswordInput = PasswordInput;
 exports.Pets = Pets;
 exports.Phone = Phone;
 exports.Plaid = Plaid;