bianic-ui 1.5.0 → 1.5.1-beta

package/README.md

@@ -43,13 +43,6 @@ Coming soon
   - Use "is" prefix for boolean
   - Use "on" prefix for event listener
 
-### Step of publishment
-- Bundling package with running command `npm run rollup`
-- Comment some lines with market 'Comment for publishment purpose'
-- Change package version following semantic version rules
-- Run `npm publish`
-- Dont forget to publish storybook to global with `npm run publish-storybook` and register the link to ristek.link
-
 ### Another Notes
 
 - Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.

package/dist/cjs/index.js

@@ -200,26 +200,26 @@ var AlertConfig = {
 
 function Display(_a) {
     var children = _a.children;
-    return (React$1.createElement("h1", { className: "display text-[144px] texts leading-[120%] font-bold font-humnst777" }, children));
+    return (React$1.createElement("h1", { className: "bianic-display text-[144px] texts leading-[120%] font-bold font-humnst777" }, children));
 }
 
 function Heading(_a) {
     var _b = _a.variant, variant = _b === void 0 ? '1' : _b, className = _a.className, children = _a.children;
     switch (variant) {
         case '1':
-            return (React$1.createElement("h1", { className: "header-".concat(variant, " text-heading-1 font-bold font-humnst777 flex ").concat(className) }, children));
+            return (React$1.createElement("h1", { className: "bianic-header-".concat(variant, " text-heading-1 font-bold font-humnst777 flex ").concat(className) }, children));
         case '2':
-            return (React$1.createElement("h2", { className: "header-".concat(variant, " text-heading-2 font-bold font-humnst777 flex ").concat(className) }, children));
+            return (React$1.createElement("h2", { className: "bianic-header-".concat(variant, " text-heading-2 font-bold font-humnst777 flex ").concat(className) }, children));
         case '3':
-            return (React$1.createElement("h3", { className: "header-".concat(variant, " text-heading-3 font-bold font-humnst777 flex ").concat(className) }, children));
+            return (React$1.createElement("h3", { className: "bianic-header-".concat(variant, " text-heading-3 font-bold font-humnst777 flex ").concat(className) }, children));
         case '4':
-            return (React$1.createElement("h4", { className: "header-".concat(variant, " text-heading-4 font-bold font-humnst777 flex ").concat(className) }, children));
+            return (React$1.createElement("h4", { className: "bianic-header-".concat(variant, " text-heading-4 font-bold font-humnst777 flex ").concat(className) }, children));
         case '5':
-            return (React$1.createElement("h5", { className: "header-".concat(variant, " text-heading-5 font-bold font-humnst777 flex ").concat(className) }, children));
+            return (React$1.createElement("h5", { className: "bianic-header-".concat(variant, " text-heading-5 font-bold font-humnst777 flex ").concat(className) }, children));
         case '6':
-            return (React$1.createElement("h6", { className: "header-".concat(variant, " text-heading-6 font-bold font-humnst777 flex ").concat(className) }, children));
+            return (React$1.createElement("h6", { className: "bianic-header-".concat(variant, " text-heading-6 font-bold font-humnst777 flex ").concat(className) }, children));
         default:
-            return (React$1.createElement("h1", { className: "header-".concat(variant, " text-heading-1 font-bold font-humnst777 flex ").concat(className) }, children));
+            return (React$1.createElement("h1", { className: "bianic-header-".concat(variant, " text-heading-1 font-bold font-humnst777 flex ").concat(className) }, children));
     }
 }
 Heading.defaultProps = {
@@ -286,7 +286,7 @@ var variantUnion$2 = [
 function Text(_a) {
     var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children;
     var validatedVariant = validUnion(variant, variantUnion$2);
-    return (React$1.createElement("span", { className: "text ".concat(textClasses[validatedVariant], " ").concat(extended) }, childrenElement(children)));
+    return (React$1.createElement("span", { className: "bianic-text ".concat(textClasses[validatedVariant], " ").concat(extended) }, childrenElement(children)));
 }
 Text.defaultProps = {
     extended: '',
@@ -339,7 +339,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 function Link(_a) {
     var _b = _a.extended, extended = _b === void 0 ? '' : _b, children = _a.children, rest = __rest(_a, ["extended", "children"]);
-    return (React$1.createElement("a", __assign({ className: "text ".concat(textClasses.link, " ").concat(extended) }, rest), children));
+    return (React$1.createElement("a", __assign({ className: "bianic-text ".concat(textClasses.link, " ").concat(extended) }, rest), children));
 }
 Link.defaultProps = {
     extended: '',
@@ -397,10 +397,16 @@ var radiusConfig$1 = {
     },
 };
 var sizeConfig$c = {
-    lg: 'py-[10.5px] px-[13px] h-[48px] flex items-center justify-center gap-[10px] text-size-md ',
-    md: ' px-[11px] py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base ',
-    sm: 'px-[8px] py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm ',
-    tn: 'px-[4px] py-[2px] h-[22px] flex items-center justify-center gap-[3px] text-size-tiny ',
+    lg: 'py-[10.5px] h-[48px] flex items-center justify-center gap-[10px] text-size-md ',
+    md: 'py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base ',
+    sm: 'py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm ',
+    tn: 'py-[2px] h-[22px] flex items-center justify-center gap-[3px] text-size-tiny ',
+};
+var sidePaddingConfig = {
+    lg: 'px-[13px]',
+    md: 'px-[11px]',
+    sm: 'px-[8px]',
+    tn: 'px-[4px]',
 };
 var minWidthConfig$1 = {
     lg: 'min-w-[112px]',
@@ -457,9 +463,22 @@ function Button(_a) {
     var validatedVariant = validUnion(variant, variantUnion$1);
     var validatedSize = validUnion(size, sizeUnion$4);
     var validatedRadius = validUnion(radius, radiusUnion);
-    var minWidthRules = minWidth === undefined ? minWidthConfig$1[size] : "min-w-[".concat(minWidth, "px]");
+    var minWidthRules = minWidthConfig$1[size];
+    if (minWidth) {
+        minWidthRules = "min-w-[".concat(minWidth, "px]");
+    }
+    else if (variant.includes('link')) {
+        minWidthRules = '';
+    }
+    var sizingRules;
+    if (variant.includes('subtle')) {
+        sizingRules = "".concat(sizeConfig$c[validatedSize]);
+    }
+    else {
+        sizingRules = "".concat(sizeConfig$c[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
+    }
     var sizeClass = label
-        ? "".concat(sizeConfig$c[validatedSize], " ").concat(minWidthRules)
+        ? " ".concat(minWidthRules, " ").concat(sizingRules)
         : iconOnlySizeConfig$1[validatedSize];
     var classString = "\n    ".concat(variantConfig$2[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig$1[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
     return (React$1.createElement("button", __assign({ type: "button", className: "button flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
@@ -1455,6 +1474,28 @@ var ButtonApp = function (_a) {
     return (React$1.createElement("button", __assign({ className: "button-app px-[10px] pb-[8.8px] pt-[8px] text-size-tiny  ".concat(colorConfig$1[color][buttonState], " "), type: "button", disabled: disabled }, rest), label));
 };
 
+var textColorConfig = {
+    dark: 'text-primary-black disabled:text-bia-coolgrey-disabled',
+    light: 'text-primary-white disabled:opacity-30',
+};
+var stateColorConfig = {
+    selected: 'bg-black/15 cursor-default',
+    default: 'enabled:hover:bg-black/10 enabled:focus-visible:border-bia-blue-disabled enabled:focus-visible:outline-2 enabled:focus-visible:-outline-offset-1 enabled:focus-visible:outline-bia-blue-disabled enabled:active:bg-black/15',
+};
+
+var ContextualButton = function (_a) {
+    var label = _a.label, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, disabled = _a.disabled; _a.isNotified; var _d = _a.isSelected, isSelected = _d === void 0 ? false : _d, props = __rest(_a, ["label", "icon", "variant", "disabled", "isNotified", "isSelected"]);
+    var textColor = isSelected
+        ? variant === 'dark'
+            ? 'text-primary-black'
+            : 'text-primary-white'
+        : textColorConfig[variant];
+    var stateColor = stateColorConfig[isSelected ? 'selected' : 'default'];
+    return (React$1.createElement("button", __assign({ className: "contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
+        icon,
+        label && (React$1.createElement("div", { className: "label max-h-[46px] px-[5px] text-[12px] leading-none" }, label))));
+};
+
 function Color() {
     var colorList = [
         'bg-bia-red',
@@ -1689,8 +1730,9 @@ function TextInput(_a) {
         iconElement = (React$1.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, disabled: disabled }));
     }
     var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle);
+    var labelStatus = readOnly ? 'read-only:pointer-events-none' : '';
     return (React$1.createElement("div", { className: "field-group flex w-full flex-col gap-y-2 text-bia-black" },
-        React$1.createElement("label", { htmlFor: id, className: "label text-xs font-semibold read-only:pointer-events-none" },
+        React$1.createElement("label", { htmlFor: id, className: "label text-xs font-semibold ".concat(labelStatus) },
             label,
             required && React$1.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React$1.createElement("div", { className: "relative w-full" },
@@ -1822,12 +1864,12 @@ 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, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, props = __rest(_a, ["disabled", "id", "size", "label", "onChange"]);
     var _e = sizeConfig$8[validUnion(size, sizeUnion$2)], checkClass = _e.checkClass, labelClass = _e.labelClass;
     return (React$1.createElement("div", { className: "flex items-center" },
-        React$1.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkClass) },
-            React$1.createElement("input", __assign({ 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", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
-            React$1.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$1.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$1.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
+            React$1.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
+            React$1.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-2 peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50" },
+                React$1.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-checked:peer-hover:group-[]:fill-primary-white peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
                     React$1.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$1.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, childrenElement(label))));
+        React$1.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-primary-black ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, childrenElement(label))));
 }
 Checkbox.defaultProps = {
     disabled: false,
@@ -1918,10 +1960,10 @@ DefaultDropdownItem.defaultProps = {
 
 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, props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected"]);
-    var _e = React$1.useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    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, _e = _a.onClickDropdown, onClickDropdown = _e === void 0 ? function () { } : _e, props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown"]);
+    var _f = React$1.useState(false), isOpen = _f[0], setIsOpen = _f[1];
     var validatedSize = validUnion(size, sizeUnion$1);
-    var _f = sizeConfig$7[validatedSize], searchSize = _f.searchSize, iconSize = _f.iconSize;
+    var _g = sizeConfig$7[validatedSize], searchSize = _g.searchSize, iconSize = _g.iconSize;
     var inputRef = React$1.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1960,7 +2002,7 @@ function SelectInput(_a) {
         React$1.createElement("div", { className: "group relative w-full" },
             React$1.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React$1.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React$1.createElement(TbChevronUp, null) : React$1.createElement(TbChevronDown, null)),
-            isOpen && (React$1.createElement("div", { className: "absolute z-10 w-full overflow-y-auto rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef }, options.map(function (option) {
+            isOpen && (React$1.createElement("div", { className: "absolute z-10 w-full overflow-y-auto rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
                 var optionLabel = isObjectOptionItem ? option.label : option;
                 var optionCaption = isObjectOptionItem ? option.caption : '';
@@ -2002,9 +2044,9 @@ var sizeConfig$5 = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e;
-    var _f = React$1.useState(false), isOpen = _f[0], setIsOpen = _f[1];
-    var _g = sizeConfig$5[size], iconClass = _g.iconClass, iconSize = _g.iconSize, inputClass = _g.inputClass;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g;
+    var _h = React$1.useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = sizeConfig$5[size], iconClass = _j.iconClass, iconSize = _j.iconSize, inputClass = _j.inputClass;
     var inputRef = React$1.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2025,10 +2067,13 @@ function LiveSearch(_a) {
             label,
             required && React$1.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React$1.createElement("div", { className: "group relative w-full" },
-            React$1.createElement("input", { className: "field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: value.label, required: required, disabled: disabled, id: id, placeholder: placeholder, onChange: function (e) { return setValue({ id: null, label: e.target.value }); }, type: "search", readOnly: readOnly }),
+            React$1.createElement("input", { className: "field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: value.label, required: required, disabled: disabled, id: id, placeholder: placeholder, onChange: function (e) {
+                    onChangeText(e);
+                    setValue({ id: null, label: e.target.value });
+                }, type: "search", readOnly: readOnly }),
             React$1.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 peer-hover:hidden peer-focus:hidden ".concat(iconClass) },
                 React$1.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
-            isOpen && (React$1.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg" }, filteredOptions.map(function (option) {
+            isOpen && (React$1.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
                 return option.custom ? (React$1.createElement(CustomDropdownItem, { size: size, isSelected: isSelected, onClick: function () {
                         setValue(option);
@@ -2511,7 +2556,7 @@ var radiusConfig = {
 };
 var variantConfig = {
     default: 'pb-[7.5px] pt-[8.5px] ps-[15px] pe-[10px] gap-[10px]',
-    alternative: 'pt-[4.42px] pb-[4.4px] px-[20px] relative',
+    alternative: 'pt-[4.8px] pb-[4.0px] px-[20px] relative',
 };
 var defaultConfigs = {
     true: 'cursor-default bg-bia-grey-light-80 hover:bg-bia-coolgrey-light-90 text-primary-black ',
@@ -5415,6 +5460,7 @@ exports.Button = Button;
 exports.ButtonApp = ButtonApp;
 exports.Checkbox = Checkbox;
 exports.Color = Color;
+exports.ContextualButton = ContextualButton;
 exports.Display = Display;
 exports.Divider = Divider;
 exports.FileTree = FileTree;