@jars-labs/jars-components 1.0.1 → 1.0.3

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) {
@@ -545,8 +596,8 @@ var Autocomplete = function (_a) {
     var boldedOptions = options.map(function (option) {
         var index = option.toLowerCase().indexOf(searchValue.toLowerCase());
         if (index === -1)
-            return jsxRuntime.jsx(Dropdown.Option, { value: option, children: option });
-        return (jsxRuntime.jsxs(Dropdown.Option, { value: option, onClick: function () { return handleOptionSubmit(option); }, children: [option.slice(0, index), jsxRuntime.jsx("strong", { children: option.slice(index, index + searchValue.length) }), option.slice(index + searchValue.length)] }));
+            return (jsxRuntime.jsx(Dropdown.Option, { value: option, children: option }, option));
+        return (jsxRuntime.jsxs(Dropdown.Option, { value: option, onClick: function () { return handleOptionSubmit(option); }, children: [option.slice(0, index), jsxRuntime.jsx("strong", { children: option.slice(index, index + searchValue.length) }), option.slice(index + searchValue.length)] }, option));
     });
     var emptyOptions = (jsxRuntime.jsx(Dropdown.Option, { value: "No options found", style: { cursor: 'not-allowed', pointerEvents: 'none' }, children: "No matches found, try something else." }));
     var loadingOptions = (jsxRuntime.jsx(Dropdown.Option, { value: "Loading...", disabled: true, style: { display: 'flex', justifyContent: 'center' }, children: jsxRuntime.jsx(Loader, {}) }));
@@ -1253,7 +1304,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) {
@@ -1703,7 +1754,7 @@ var Attachment = function (props) {
 
 var Bell = 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.alert, alert = _e === void 0 ? false : _e;
-    return (jsxRuntime.jsxs(Icon, { width: width, height: height, viewBox: viewBox, children: [jsxRuntime.jsx("path", { d: "M14.1429 27.8572H17.5714", stroke: "black", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M22.7143 15C22.7143 13.1813 21.9919 11.4372 20.7059 10.1512C19.4199 8.86527 17.6758 8.14282 15.8572 8.14282C14.0385 8.14282 12.2944 8.86527 11.0084 10.1512C9.72247 11.4372 9.00002 13.1813 9.00002 15V21C9.00002 21.6819 8.72909 22.3361 8.24686 22.8183C7.76463 23.3005 7.11057 23.5714 6.42859 23.5714H25.2857C24.6038 23.5714 23.9496 23.3005 23.4674 22.8183C22.9852 22.3361 22.7143 21.6819 22.7143 21V15Z", stroke: "black", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M4.71429 14.777C4.71522 13.1453 5.10435 11.5372 5.84956 10.0855C6.59476 8.63384 7.67464 7.38032 9.00001 6.42847", stroke: "black", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M25.8648 10.0855C25.1196 8.63384 24.0396 7.38032 22.7143 6.42847", stroke: "black", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), alert && (jsxRuntime.jsx("circle", { cx: "22.2857", cy: "9.14282", r: "5.5", fill: "#7B34D6", stroke: "white" }))] }));
+    return (jsxRuntime.jsxs(Icon, { width: width, height: height, viewBox: viewBox, children: [jsxRuntime.jsx("path", { d: "M14.1429 27.8572H17.5714", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M22.7143 15C22.7143 13.1813 21.9919 11.4372 20.7059 10.1512C19.4199 8.86527 17.6758 8.14282 15.8572 8.14282C14.0385 8.14282 12.2944 8.86527 11.0084 10.1512C9.72247 11.4372 9.00002 13.1813 9.00002 15V21C9.00002 21.6819 8.72909 22.3361 8.24686 22.8183C7.76463 23.3005 7.11057 23.5714 6.42859 23.5714H25.2857C24.6038 23.5714 23.9496 23.3005 23.4674 22.8183C22.9852 22.3361 22.7143 21.6819 22.7143 21V15Z", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M4.71429 14.777C4.71522 13.1453 5.10435 11.5372 5.84956 10.0855C6.59476 8.63384 7.67464 7.38032 9.00001 6.42847", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M25.8648 10.0855C25.1196 8.63384 24.0396 7.38032 22.7143 6.42847", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), alert && (jsxRuntime.jsx("circle", { cx: "22.2857", cy: "9.14282", r: "5.5", fill: "#7B34D6", stroke: "white" }))] }));
 };
 
 var Cat = function (props) {
@@ -22015,5 +22066,6 @@ exports.Visa = Visa;
 exports.Warning = Warning;
 exports.World = World;
 exports.badgeVariantMap = badgeVariantMap;
+exports.capitalizeFirstSentenceLetter = capitalizeFirstSentenceLetter;
 exports.cardStatusVariantMap = cardStatusVariantMap;
 //# sourceMappingURL=index.js.map