@jars-labs/jars-components 1.0.2 → 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) {
@@ -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) {
@@ -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