@jars-labs/jars-components 1.0.2 → 1.0.4

package/dist/index.js

@@ -377,6 +377,7 @@ const inputRightIcon = "mcfb7df269_inputRightIcon";
 const label$6 = "mcfb7df269_label";
 const labelFocused$1 = "mcfb7df269_labelFocused";
 const labelError$1 = "mcfb7df269_labelError";
+const labelDisabled$1 = "mcfb7df269_labelDisabled";
 const description$1 = "mcfb7df269_description";
 const error$1 = "mcfb7df269_error";
 const errorText$1 = "mcfb7df269_errorText";
@@ -391,6 +392,7 @@ inputRightIcon,
 label: label$6,
 labelFocused: labelFocused$1,
 labelError: labelError$1,
+labelDisabled: labelDisabled$1,
 description: description$1,
 error: error$1,
 errorText: errorText$1,
@@ -488,32 +490,81 @@ var elementType = {
     h4: 'h4',
 };
 var Text = t.forwardRef(function (props, ref) {
-    var children = props.children, variant = props.variant, weight = props.weight, color = props.color, style = props.style, className = props.className, rest = __rest(props, ["children", "variant", "weight", "color", "style", "className"]);
+    var as = props.as, children = props.children, className = props.className, color = props.color, style = props.style, variant = props.variant, weight = props.weight, rest = __rest(props, ["as", "children", "className", "color", "style", "variant", "weight"]);
     var combinedStyle = __assign(__assign({}, style), { color: color });
     var combinedClassName = classNames(className, styles$j['text'], styles$j[variant || ''], styles$j[weight || '']);
-    return t.createElement(props.as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
+    return t.createElement(as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function capitalizeFirstSentenceLetter(input) {
+    var str;
+    if (typeof input !== 'string') {
+        if (Array.isArray(input)) {
+            str = input.join(' ');
+        }
+        else {
+            return String(input);
+        }
+    }
+    else {
+        str = input;
+    }
+    var lowerCaseString = str.toLowerCase().replace(/_/g, ' ');
+    return lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1);
+}
+
+/**
+ * Input component that extends the TextInput component from Mantine.
+ * It includes additional features like error handling, description, and label visibility.
+ *
+ * @param {string} name - The name of the input field.
+ * @param {string} label - The label for the input field.
+ * @param {string} placeholder - The placeholder text for the input field.
+ * @param {string} value - The value of the input field.
+ * @param {function} onChange - The function to call when the input value changes.
+ * @param {function} onBlur - The function to call when the input loses focus.
+ * @param {string} error - The error message to display.
+ * @param {string} description - The description text to display below the input field.
+ * @param {boolean} holdSpace - Whether to hold space for the error message even when there is no error.
+ * @param {React.ReactNode} leftSection - The icon to display on the left side of the input field.
+ * @param {React.ReactNode} rightSection - The icon to display on the right side of the input field.
+ * @param {boolean} hideLabel - Whether to hide the label when it's not required.
+ * @param {string} type - The type of the input field (default is 'text').
+ *
+ * @example
+ * <Input
+ *   name="username"
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ *   onBlur={() => console.log('Input blurred')}
+ *   error="Username is required"
+ *   description="Your unique username"
+ * />
+ */
 var Input = function (_a) {
     var _b, _c;
-    var _d = _a.error, error = _d === void 0 ? '' : _d, name = _a.name, placeholder = _a.placeholder, _e = _a.value, value = _e === void 0 ? '' : _e, onChange = _a.onChange, label = _a.label, description = _a.description, leftSection = _a.leftSection, rightSection = _a.rightSection, _f = _a.type, type = _f === void 0 ? 'text' : _f, _g = _a.holdSpace, holdSpace = _g === void 0 ? true : _g, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, rest = __rest(_a, ["error", "name", "placeholder", "value", "onChange", "label", "description", "leftSection", "rightSection", "type", "holdSpace", "hideLabel"]);
-    var _j = t.useState(false), isFocused = _j[0], setIsFocused = _j[1];
-    var _k = t.useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var _d = _a.error, error = _d === void 0 ? '' : _d, name = _a.name, placeholder = _a.placeholder, _e = _a.value, value = _e === void 0 ? '' : _e, onChange = _a.onChange, label = _a.label, description = _a.description, leftSection = _a.leftSection, rightSection = _a.rightSection, _f = _a.type, type = _f === void 0 ? 'text' : _f, _g = _a.holdSpace, holdSpace = _g === void 0 ? true : _g, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, rest = __rest(_a, ["error", "name", "placeholder", "value", "onChange", "label", "description", "leftSection", "rightSection", "type", "holdSpace", "hideLabel", "disabled"]);
+    var _k = t.useState(false), isFocused = _k[0], setIsFocused = _k[1];
+    var _l = t.useState(false), isHovered = _l[0], setIsHovered = _l[1];
     var showLabel = !hideLabel && (isFocused || value.trim());
     var placeHolderValue = showLabel ? placeholder : label;
     var ErrorSection = t.useMemo(function () {
-        return holdSpace && (jsxRuntime.jsxs(core.Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsxRuntime.jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsxRuntime.jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: error })] }));
+        return holdSpace && (jsxRuntime.jsxs(core.Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsxRuntime.jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsxRuntime.jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: capitalizeFirstSentenceLetter(error) })] }));
     }, [error]);
     return (jsxRuntime.jsxs("div", { className: styles$k.container, children: [showLabel && (jsxRuntime.jsx("label", { className: classNames(styles$k.label, (_b = {},
                     _b[styles$k.labelError] = error && !isFocused,
                     _b[styles$k.labelFocused] = isFocused || isHovered,
+                    _b[styles$k.labelDisabled] = disabled,
                     _b)), children: label })), jsxRuntime.jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsxRuntime.jsx(core.TextInput, __assign({ classNames: {
                         input: classNames(styles$k.input, (_c = {},
                             _c[styles$k.inputLeftIcon] = leftSection,
                             _c[styles$k.inputRightIcon] = rightSection,
                             _c[styles$k.inputError] = error,
                             _c)),
-                    }, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsxRuntime.jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$k.description }, errorProps: { className: styles$k.error }, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$k.leftSection }, rightSectionProps: { className: styles$k.rightSection } }, rest, { type: type })) })] }));
+                    }, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsxRuntime.jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$k.description }, errorProps: { className: styles$k.error }, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$k.leftSection }, rightSectionProps: { className: styles$k.rightSection }, type: type, disabled: disabled }, rest)) })] }));
 };
 
 var Loader = function (props) {
@@ -1116,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";
@@ -1253,7 +1348,7 @@ var Umbrello = function (props) {
 
 var NavBar = function (_a) {
     var children = _a.children;
-    return (jsxRuntime.jsxs(core.Flex, { p: "24px 120px", bg: "var(--color-white)", children: [jsxRuntime.jsx("a", { href: "/dashboard/management-companies", children: jsxRuntime.jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" }) }), children] }));
+    return (jsxRuntime.jsxs(core.Flex, { p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", children: [jsxRuntime.jsx("a", { href: "/dashboard/management-companies", children: jsxRuntime.jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" }) }), children] }));
 };
 
 var Pagination = function (_a) {
@@ -1723,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" })] }));
@@ -21990,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;
@@ -22015,5 +22103,6 @@ exports.Visa = Visa;
 exports.Warning = Warning;
 exports.World = World;
 exports.badgeVariantMap = badgeVariantMap;
+exports.capitalizeFirstSentenceLetter = capitalizeFirstSentenceLetter;
 exports.cardStatusVariantMap = cardStatusVariantMap;
 //# sourceMappingURL=index.js.map