bianic-ui 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/cjs/index.js

@@ -246,9 +246,39 @@ var textClasses = {
     'tiny-text-bold': 'text-size-tiny font-bold font-["Arial"]',
 };
 
+var childrenElement = function (element) {
+    if (element === undefined)
+        return '';
+    if (typeof element === 'object')
+        return '';
+    return element;
+};
+var validUnion = function (value, union) {
+    return union.includes(value) ? value : union[0];
+};
+
+var variantUnion$2 = [
+    'large-text',
+    'large-text-semibold',
+    'medium-text',
+    'medium-text-semibold',
+    'caption',
+    'caption-semibold',
+    'normal-text',
+    'normal-text-semilight',
+    'normal-text-semibold',
+    'normal-text-bold',
+    'small-text',
+    'small-text-semibold',
+    'tiny-text',
+    'tiny-text-bold',
+    'script',
+    'link',
+];
 function Text(_a) {
     var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children;
-    return (React.createElement("span", { className: "text ".concat(textClasses[variant], " ").concat(extended) }, children));
+    var validatedVariant = validUnion(variant, variantUnion$2);
+    return (React.createElement("span", { className: "text ".concat(textClasses[validatedVariant], " ").concat(extended) }, childrenElement(children)));
 }
 Text.defaultProps = {
     extended: '',
@@ -380,12 +410,38 @@ var variantConfig$1 = {
     'danger-outlined': "\n  text-bia-red \n  border-solid \n  border \n  border-bia-red \n  bg-primary-white \n  active:text-bia-red-dark-10 \n  active:border-bia-red-active \n  active:bg-bia-red-light-90 \n  active:border-bia-red-disabled \n  hover:text-bia-red-hover \n  hover:border-bia-red-hover \n  disabled:cursor-not-allowed \n  disabled:border-[1px]\n  disabled:border-bia-red-light-50 \n  disabled:text-bia-red-light-50\n  focus-visible:outline-none \n  focus-visible:outline-offset-0 \n  focus-visible:outline-[3px] \n  focus-visible:rounded-md \n  focus-visible:outline-bia-red-light-50 \n  focus-visible:border-none \n  \n  ",
 };
 
+var variantUnion$1 = [
+    'default',
+    'danger',
+    'info',
+    'link',
+    'primary',
+    'subtle',
+    'subtle-link',
+    'success',
+    'warning',
+    'default-outlined',
+    'danger-outlined',
+    'info-outlined',
+    'primary-outlined',
+    'success-outlined',
+    'warning-outlined',
+];
+var radiusUnion = ['default', 'full-rounded'];
+var sizeUnion$4 = ['md', 'lg', 'sm', 'tn'];
 function Button(_a) {
     var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.radius, radius = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.iconLeft, iconLeft = _g === void 0 ? null : _g, _h = _a.iconRight, iconRight = _h === void 0 ? null : _h, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight"]);
-    return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center ".concat(variantConfig$1[variant], " ").concat(label ? sizeConfig$a[size] : iconOnlySizeConfig[size], " ").concat(radiusConfig[radius][size], " ").concat(className), disabled: disabled }, props),
-        iconLeft,
-        label,
-        iconRight));
+    var validatedVariant = validUnion(variant, variantUnion$1);
+    var validatedSize = validUnion(size, sizeUnion$4);
+    var validatedRadius = validUnion(radius, radiusUnion);
+    var sizeClass = label
+        ? sizeConfig$a[validatedSize]
+        : iconOnlySizeConfig[validatedSize];
+    var classString = "\n    ".concat(variantConfig$1[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
+    return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center ".concat(classString), disabled: disabled }, props),
+        childrenElement(iconLeft),
+        childrenElement(label),
+        childrenElement(iconRight)));
 }
 Button.defaultProps = {
     label: null,
@@ -1544,14 +1600,16 @@ var sizeConfig$8 = {
     },
 };
 
+var sizeUnion$3 = ['md', 'sm'];
 function Radio(_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
-    var _f = sizeConfig$8[size], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    var validatedSize = validUnion(size, sizeUnion$3);
+    var _f = sizeConfig$8[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
             React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
             React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center border-2 border-primary-white  peer-disabled:bg-bia-grey-light-80 peer-disabled:border-transparent peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue rounded-full w-full h-full z-1" })),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, label)));
+        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
 }
 Radio.defaultProps = {
     label: '',
@@ -1605,18 +1663,17 @@ var sizeConfig$6 = {
     },
 };
 
+var sizeUnion$2 = ['md', 'sm'];
 function Checkbox(_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, label = _a.label, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, value = _a.value;
-    console.log('size bianic', size);
-    console.log('onChange', onChange);
-    var _f = sizeConfig$6[size === 'sm' || size === 'md' ? size : 'md'], checkClass = _f.checkClass, labelClass = _f.labelClass;
+    var _f = sizeConfig$6[validUnion(size, sizeUnion$2)], checkClass = _f.checkClass, labelClass = _f.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkClass) },
             React.createElement("input", { id: id, type: "checkbox", className: "peer checkbox box-content appearance-none focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-offset-2 focus-visible:ring-bia-blue focus-visible:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue disabled:border-bia-coolgrey-light-50 hover:border-bia-blue-hover disabled:checked:border-bia-blue-light-50 border-2 absolute cursor-pointer w-full h-full", checked: checked, onChange: function (e) { return onChange(e); }, disabled: disabled, value: value }),
             React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center peer-checked:border-2 peer-checked:border-primary-white peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:outline-bia-blue-light-50 peer-disabled:peer-checked:bg-bia-blue-light-50 rounded-full w-full h-full z-1" },
                 React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-checked:peer-hover:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
                     React.createElement("path", { d: "M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z" })))),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
+        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, childrenElement(label))));
 }
 Checkbox.defaultProps = {
     disabled: false,
@@ -1709,10 +1766,12 @@ DefaultDropdownItem.defaultProps = {
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var sizeUnion$1 = ['md', 'sm'];
 function SelectInput(_a) {
     var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected;
     var _e = React.useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = sizeConfig$5[size], searchSize = _f.searchSize, iconSize = _f.iconSize;
+    var validatedSize = validUnion(size, sizeUnion$1);
+    var _f = sizeConfig$5[validatedSize], searchSize = _f.searchSize, iconSize = _f.iconSize;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1727,14 +1786,14 @@ function SelectInput(_a) {
     });
     return (React.createElement("div", { className: "field-group w-full flex flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
-            label,
+            childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group w-full relative" },
             React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80 pe-8 w-full border border-bia-grey-dark-10 enabled:hover:border-b-bia-blue enabled:hover:rounded-b-none enabled:focus:border-b-bia-blue enabled:focus:rounded-b-none focus-visible:outline-none cursor-pointer rounded disabled:text-bia-coolgrey peer ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selected === null || selected === void 0 ? void 0 : selected.label, readOnly: true, id: id, disabled: disabled }),
             React.createElement("div", { className: "absolute inset-y-0 pl-3 flex items-center pointer-events-none text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? (React.createElement(TbChevronUp, { className: "" })) : (React.createElement(TbChevronDown, { className: "" }))),
             isOpen && (React.createElement("div", { className: "absolute border w-full bg-primary-white border-bia-grey-dark-10 rounded-b-md shadow-lg z-10" }, options.map(function (option) {
                 var isSelected = selected && selected.id && option.id === selected.id;
-                return (React.createElement(DefaultDropdownItem, { label: option.label, size: size, isSelected: isSelected, onClick: function () {
+                return (React.createElement(DefaultDropdownItem, { label: option.label, size: validatedSize, isSelected: isSelected, onClick: function () {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
@@ -3132,10 +3191,25 @@ CloseIcon.defaultProps = {
     size: 'md',
 };
 
+var colorUnion = [
+    'default',
+    'blue',
+    'teal',
+    'green',
+    'yellow',
+    'red',
+    'black',
+    'white',
+];
+var sizeUnion = ['md', 'sm', 'tn'];
+var variantUnion = ['label', 'icon', 'closeable'];
 function TagLabel(_a) {
     var children = _a.children, _b = _a.closeHandler, closeHandler = _b === void 0 ? undefined : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'label' : _d, open = _a.open, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon;
-    var config = TagLabelConfig[color][size][variant];
-    var configIcon = TagLabelConfig[color][size];
+    var validatedColor = validUnion(color, colorUnion);
+    var validatedSize = validUnion(size, sizeUnion);
+    var validatedVariant = validUnion(variant, variantUnion);
+    var config = TagLabelConfig[validatedColor][validatedSize][validatedVariant];
+    var configIcon = TagLabelConfig[validatedColor][validatedSize];
     var configbg = config.bg;
     var configtext = config.text;
     var configpadding = config.padding;
@@ -3155,51 +3229,51 @@ function TagLabel(_a) {
         }
         var IconComponent = icon;
         var textSize;
-        if (size === 'md') {
+        if (validatedSize === 'md') {
             textSize = 'text-[20px]';
         }
-        else if (size === 'sm' || size === 'tn') {
+        else if (validatedSize === 'sm' || validatedSize === 'tn') {
             textSize = 'text-[14px]';
         }
         else {
             textSize = 'text-[14px]';
         }
         var fillColor;
-        if (color === 'blue') {
+        if (validatedColor === 'blue') {
             fillColor = '#5d5dea';
         }
-        else if (color === 'green') {
+        else if (validatedColor === 'green') {
             fillColor = '#21ba4c';
         }
-        else if (color === 'teal') {
+        else if (validatedColor === 'teal') {
             fillColor = '#00b5ad';
         }
-        else if (color === 'yellow') {
+        else if (validatedColor === 'yellow') {
             fillColor = '#ff7b00';
         }
-        else if (color === 'red') {
+        else if (validatedColor === 'red') {
             fillColor = '#db2828';
         }
-        else if (color === 'black') {
+        else if (validatedColor === 'black') {
             fillColor = '#2f2f2f';
         }
         else {
             fillColor = '#ffffff';
         }
-        return (React.createElement(IconComponent, { className: "".concat(textSize, " ").concat(variant === 'icon' ? configXcolor : configXcolorV), color: fillColor }));
+        return (React.createElement(IconComponent, { className: "".concat(textSize, " ").concat(validatedVariant === 'icon' ? configXcolor : configXcolorV), color: fillColor }));
     };
     // const containerClass = `${container} ${capitalize && 'capitalize'}`;
     // const closeableMode = variant === 'closeable';
     // const iconMode = variant === 'icon';
     var closeButtonException;
-    if (size === 'md') {
+    if (validatedSize === 'md') {
         closeButtonException = '-mr-[2px]';
     }
     else {
         closeButtonException = '-mr-[5px]';
     }
     var outlineColor;
-    if (color === 'default' || color === 'white') {
+    if (validatedColor === 'default' || validatedColor === 'white') {
         outlineColor = 'outline-primary-black';
     }
     else {
@@ -3208,12 +3282,13 @@ function TagLabel(_a) {
     if (!open)
         return null;
     return (React.createElement("div", { className: "flex items-center font-segoe font-normal justify-center ".concat(configradius, " ").concat(configtext, " ").concat(configbg, " ").concat(configpadding) },
-        variant === 'icon' ? (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[size]) }, leftIcon || renderIcon(configX))) : (React.createElement(React.Fragment, null,
-            React.createElement("span", null, leftIcon),
-            React.createElement("div", { className: "flex justify-center items-center ".concat(size === 'md' && 'min-h-[20px] px-[5px]', " ").concat(size === 'sm' && 'min-h-[18px] px-[3px]', " ").concat(size === 'tn' && 'min-h-[14px] px-[3px] -mt-[2px]') }, children))),
-        variant === 'label' && rightIcon && (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[size]) }, rightIcon)),
-        variant === 'closeable' && closeHandler && (React.createElement("button", { type: "button", className: "flex justify-center items-center ".concat(size === 'tn' ? 'p-[1px]' : 'p-[2px]', " ").concat(outlineColor, " ").concat(iconColor, " ").concat(color === 'white' || color === 'default' ? 'bg-black/[.3]' : 'bg-white/[.5]', " focus:outline ").concat(size === 'tn' ? 'outline-[1.5px]' : 'outline-[2px]', " ").concat(closeButtonException, " rounded-full group"), onClick: function () { return closeHandler(); } },
-            React.createElement(CloseIcon, { size: size })))));
+        validatedVariant === 'icon' ? (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[validatedSize]) }, childrenElement(leftIcon) ||
+            renderIcon(configX))) : (React.createElement(React.Fragment, null,
+            React.createElement("span", null, childrenElement(leftIcon)),
+            React.createElement("div", { className: "flex justify-center items-center ".concat(validatedSize === 'md' && 'min-h-[20px] px-[5px]', " ").concat(validatedSize === 'sm' && 'min-h-[18px] px-[3px]', " ").concat(validatedSize === 'tn' && 'min-h-[14px] px-[3px] -mt-[2px]') }, childrenElement(children)))),
+        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[validatedSize]) }, childrenElement(rightIcon))),
+        validatedVariant === 'closeable' && closeHandler && (React.createElement("button", { type: "button", className: "flex justify-center items-center ".concat(validatedSize === 'tn' ? 'p-[1px]' : 'p-[2px]', " ").concat(outlineColor, " ").concat(iconColor, " ").concat(validatedColor === 'white' || validatedColor === 'default' ? 'bg-black/[.3]' : 'bg-white/[.5]', " focus:outline ").concat(validatedSize === 'tn' ? 'outline-[1.5px]' : 'outline-[2px]', " ").concat(closeButtonException, " rounded-full group"), onClick: function () { return closeHandler(); } },
+            React.createElement(CloseIcon, { size: validatedSize })))));
 }
 TagLabel.defaultProps = {
     variant: 'default',