mautourco-components 0.2.21 → 0.2.23

package/dist/components/atoms/Checkbox/Checkbox.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
-interface CheckboxProps {
+export interface CheckboxProps {
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
     label?: string;
-    onChange?: (checked: boolean) => void;
     className?: string;
     id?: string;
     leadingContent?: React.ReactNode;
+    labelPosition?: 'leading' | 'trailing';
+    onChange?: (checked: boolean) => void;
 }
 declare const Checkbox: React.FC<CheckboxProps>;
 export default Checkbox;

package/dist/components/atoms/Checkbox/Checkbox.js

@@ -10,18 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import Check from '../Icon/icons/Check';
+import { Text } from '../Typography/Typography';
 var Checkbox = function (_a) {
-    var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, label = _a.label, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e, id = _a.id, leadingContent = _a.leadingContent;
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, label = _a.label, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e, id = _a.id, leadingContent = _a.leadingContent, _f = _a.labelPosition, labelPosition = _f === void 0 ? 'trailing' : _f;
+    var _g = useState(false), isChecked = _g[0], setIsChecked = _g[1];
     var handleChange = function (e) {
-        if (!disabled && onChange) {
-            onChange(e.target.checked);
+        if (!disabled) {
+            setIsChecked(e.target.checked);
         }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
     };
     var handleLabelClick = function (e) {
         if (!disabled && onChange) {
             e.preventDefault();
-            onChange(!checked);
+            onChange(!isChecked);
         }
     };
     var getStateClasses = function () {
@@ -29,11 +33,17 @@ var Checkbox = function (_a) {
             return 'checkbox--disabled';
         if (error)
             return 'checkbox--error';
-        if (checked)
+        if (isChecked)
             return 'checkbox--checked';
         return 'checkbox--default';
     };
     var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
-    return (_jsx("div", __assign({ className: "checkbox-container ".concat(getStateClasses(), " ").concat(className) }, { children: _jsxs("label", __assign({ htmlFor: checkboxId, className: "checkbox-label", onClick: handleLabelClick }, { children: [_jsx("input", { type: "checkbox", id: checkboxId, checked: checked, disabled: disabled, onChange: handleChange, className: "checkbox-input", readOnly: true }), _jsx("div", __assign({ className: "checkbox-button" }, { children: _jsx("div", __assign({ className: "checkbox-touch-target" }, { children: _jsx("div", __assign({ className: "checkbox-box" }, { children: checked && (_jsx(Check, { size: "sm", className: "checkbox-icon" })) })) })) })), leadingContent && (_jsx("span", __assign({ className: "checkbox-leading" }, { children: leadingContent }))), label && (_jsx("span", __assign({ className: "checkbox-text" }, { children: label })))] })) })));
+    useEffect(function () {
+        setIsChecked(checked);
+    }, [checked]);
+    var renderLabel = function () {
+        return (label && (_jsx(Text, __assign({ as: "span", size: "sm", variant: "medium", color: error ? 'state-error' : 'default' }, { children: label }))));
+    };
+    return (_jsx("div", __assign({ className: "checkbox-container ".concat(getStateClasses(), " ").concat(className) }, { children: _jsxs("label", __assign({ htmlFor: checkboxId, className: "checkbox-label", onClick: handleLabelClick }, { children: [_jsx("input", { type: "checkbox", id: checkboxId, checked: isChecked, disabled: disabled, onChange: handleChange, className: "checkbox-input", readOnly: true }), labelPosition === 'leading' && renderLabel(), _jsx("div", __assign({ className: "checkbox-button" }, { children: _jsx("div", __assign({ className: "checkbox-touch-target" }, { children: _jsx("div", __assign({ className: "checkbox-box" }, { children: isChecked && _jsx(Check, { size: "sm", className: "checkbox-icon" }) })) })) })), leadingContent && _jsx("span", __assign({ className: "checkbox-leading" }, { children: leadingContent })), labelPosition === 'trailing' && renderLabel()] })) })));
 };
 export default Checkbox;

package/dist/components/atoms/Icon/icons/PlusCircleIcon.js

@@ -31,6 +31,6 @@ var PlusCircleIcon = function (_a) {
     var sizeClasses = getSizeClasses();
     var colorClass = color ? "text-".concat(color) : 'text-current';
     var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
-    return (_jsxs("svg", __assign({ className: classes, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", __assign({ clipPath: "url(#clip0_7074_66340)" }, { children: _jsx("path", { d: "M13.915 8.00098C13.915 4.7334 11.2666 2.08416 7.99902 2.08398C4.73134 2.08398 2.08203 4.73329 2.08203 8.00098C2.08221 11.2685 4.73145 13.917 7.99902 13.917C11.2664 13.9168 13.9149 11.2684 13.915 8.00098ZM7.24902 10.667V8.75098H5.33203C4.91793 8.75098 4.58221 8.41504 4.58203 8.00098C4.58203 7.58676 4.91782 7.25098 5.33203 7.25098H7.24902V5.33398C7.24902 4.91977 7.58481 4.58398 7.99902 4.58398C8.41309 4.58416 8.74902 4.91988 8.74902 5.33398V7.25098H10.665L10.7422 7.25488C11.1203 7.29337 11.415 7.61271 11.415 8.00098C11.4149 8.38912 11.1202 8.70862 10.7422 8.74707L10.665 8.75098H8.74902V10.667C8.74902 11.0811 8.41309 11.4168 7.99902 11.417C7.58481 11.417 7.24902 11.0812 7.24902 10.667ZM15.415 8.00098C15.4149 12.0968 12.0949 15.4168 7.99902 15.417C3.90302 15.417 0.582208 12.0969 0.582031 8.00098C0.582031 3.90487 3.90291 0.583984 7.99902 0.583984C12.095 0.584161 15.415 3.90497 15.415 8.00098Z", fill: "white" }) })), _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0_7074_66340" }, { children: _jsx("rect", { width: "16", height: "16", fill: "white" }) })) })] })));
+    return (_jsxs("svg", __assign({ className: classes, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", __assign({ clipPath: "url(#clip0_7074_66340)" }, { children: _jsx("path", { d: "M13.915 8.00098C13.915 4.7334 11.2666 2.08416 7.99902 2.08398C4.73134 2.08398 2.08203 4.73329 2.08203 8.00098C2.08221 11.2685 4.73145 13.917 7.99902 13.917C11.2664 13.9168 13.9149 11.2684 13.915 8.00098ZM7.24902 10.667V8.75098H5.33203C4.91793 8.75098 4.58221 8.41504 4.58203 8.00098C4.58203 7.58676 4.91782 7.25098 5.33203 7.25098H7.24902V5.33398C7.24902 4.91977 7.58481 4.58398 7.99902 4.58398C8.41309 4.58416 8.74902 4.91988 8.74902 5.33398V7.25098H10.665L10.7422 7.25488C11.1203 7.29337 11.415 7.61271 11.415 8.00098C11.4149 8.38912 11.1202 8.70862 10.7422 8.74707L10.665 8.75098H8.74902V10.667C8.74902 11.0811 8.41309 11.4168 7.99902 11.417C7.58481 11.417 7.24902 11.0812 7.24902 10.667ZM15.415 8.00098C15.4149 12.0968 12.0949 15.4168 7.99902 15.417C3.90302 15.417 0.582208 12.0969 0.582031 8.00098C0.582031 3.90487 3.90291 0.583984 7.99902 0.583984C12.095 0.584161 15.415 3.90497 15.415 8.00098Z", fill: "currentColor" }) })), _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0_7074_66340" }, { children: _jsx("rect", { width: "16", height: "16", fill: "currentColor" }) })) })] })));
 };
 export default PlusCircleIcon;

package/dist/components/atoms/Inputs/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconName } from '../../Icon/Icon';
-interface InputProps {
+export interface InputProps {
     variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
     placeholder?: string;
     value?: string;