bianic-ui 2.9.0 → 2.10.0-alpha.0

package/dist/cjs/index.js

@@ -1576,24 +1576,19 @@ var ContextualButton = React.forwardRef(function (_a, ref) {
 });
 
 var config$2 = {
-    'dark-background': 'bg-white hover:bg-bia-grey-light-90 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-80',
-    'light-background': 'bg-bia-grey-light-90 hover:bg-bia-grey-light-80 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-70',
-    'outline-light-background': 'bg-white border border-bia-grey-light-40 hover:bg-bia-grey-light-90 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-80',
+    'dark-background': 'bg-white enabled:hover:bg-bia-grey-light-90 outline-none focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 enabled:active:bg-bia-grey-light-80',
+    'light-background': 'bg-bia-grey-light-90 enabled:hover:bg-bia-grey-light-80 outline-none focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 enabled:active:bg-bia-grey-light-70',
+    'outline-light-background': 'bg-white border border-bia-grey-light-40 enabled:hover:bg-bia-grey-light-90 outline-none focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 enabled:active:bg-bia-grey-light-80',
 };
 
 var Card = function (_a) {
-    var children = _a.children, disabled = _a.disabled, variant = _a.variant;
-    var base = config$2[variant || 'dark-background'];
-    var removeStateClasses = function (cls) {
-        return cls
-            .replace(/\b(?:hover|active|focus-visible|focus):[^\s]+/g, '')
-            .replace(/\s+/g, ' ')
-            .trim();
-    };
-    var cardClassName = disabled
-        ? "".concat(removeStateClasses(base), " cursor-not-allowed")
-        : base;
-    return (React.createElement("button", { disabled: disabled, "aria-disabled": disabled, className: "rounded-radius-md p-5 ".concat(cardClassName), tabIndex: disabled ? -1 : 0 }, children));
+    var children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? 'dark-background' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'button' : _e, rest = __rest(_a, ["children", "disabled", "variant", "className", "type"]);
+    var baseStyles = config$2[variant];
+    var stateStyles = disabled
+        ? 'opacity-50 cursor-not-allowed pointer-events-none'
+        : '';
+    var combinedClassName = "rounded-radius-md p-5 ".concat(baseStyles, " ").concat(stateStyles, " ").concat(className).trim();
+    return (React.createElement("button", __assign({ type: type, disabled: disabled, "aria-disabled": disabled, className: combinedClassName }, rest), children));
 };
 
 function Color() {
@@ -4543,56 +4538,66 @@ var radiusConfig = {
 var variantConfig = {
     default: 'pb-[7.5px] pt-[8.5px] ps-[15px] pe-[10px] gap-[10px]',
     alternative: 'pt-[4.8px] pb-[4.0px] px-[20px] relative',
+    'alternative-more': 'pt-[4.8px] pb-[4.0px] px-[10px] relative',
 };
 var defaultConfigs = {
-    true: 'cursor-default bg-bia-grey-light-80 hover:bg-bia-coolgrey-light-90 text-primary-black ',
-    false: 'cursor-pointer bg-bia-grey hover:bg-bia-grey-light-50 text-bia-coolgrey-dark-10',
-};
-var defaultButtonConfigs = {
-    true: 'text-primary-black',
-    false: 'text-primary-black',
+    active: 'cursor-default bg-bia-grey-light-80 hover:bg-bia-coolgrey-light-90 text-primary-black',
+    inactive: 'cursor-pointer bg-bia-grey hover:bg-bia-grey-light-50 text-bia-coolgrey-dark-10',
 };
 var alternativeConfigs = {
-    true: 'cursor-default bg-primary-white text-primary-black overflow-hidden',
-    false: 'cursor-pointer bg-bia-verdantgreen-dark-40 hover:bg-bia-verdantgreen-dark-50 text-primary-white overflow-hidden',
+    active: 'cursor-default bg-primary-white text-primary-black overflow-hidden',
+    inactive: 'cursor-pointer bg-bia-verdantgreen-dark-40 hover:bg-bia-verdantgreen-dark-50 text-primary-white overflow-hidden',
+};
+var defaultButtonConfigs = {
+    active: 'text-primary-black',
+    inactive: 'text-primary-black',
 };
 var alternativeButtonConfigs = {
-    true: 'absolute px-[5px] opacity-0 group-hover/container:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-primary-white from-50% to-primary-white/[.0] inset-y-0 right-0',
-    false: ' absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-bia-verdantgreen-dark-50 from-50% to-bia-verdantgreen-dark-50/[.0] inset-y-0 right-0',
+    active: 'absolute px-[5px] opacity-0 group-hover/container:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-primary-white from-50% to-primary-white/[.0] inset-y-0 right-0',
+    inactive: 'absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-bia-verdantgreen-dark-50 from-50% to-bia-verdantgreen-dark-50/[.0] inset-y-0 right-0',
 };
 var actionButtonConfig = {
-    true: 'text-[#979797] group-hover:bg-primary-black/10 group-hover:text-primary-black group-active:bg-primary-black/20 group-active:text-primary-black',
-    false: 'text-[#95b491] group-hover:bg-primary-black/40 group-hover:text-primary-white group-active:bg-primary-black/60 group-hover:text-primary-white',
+    active: 'text-[#979797] group-hover:bg-primary-black/10 group-hover:text-primary-black group-active:bg-primary-black/20 group-active:text-primary-black',
+    inactive: 'text-[#95b491] group-hover:bg-primary-black/40 group-hover:text-primary-white group-active:bg-primary-black/60 group-hover:text-primary-white',
 };
 
-var TabMenu = function (_a) {
-    var variant = _a.variant, _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.rounded, rounded = _c === void 0 ? 'none' : _c, _d = _a.isActive, isActive = _d === void 0 ? false : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, rest = __rest(_a, ["variant", "text", "rounded", "isActive", "onClose"]);
-    // valiated parameter
+var TabMenu = React.forwardRef(function (props, ref) {
+    var variant = props.variant, rounded = props.rounded, _a = props.text, text = _a === void 0 ? '' : _a, _b = props.isActive, isActive = _b === void 0 ? false : _b, _c = props.moreCount, moreCount = _c === void 0 ? 1 : _c, onClose = props.onClose, onClickMore = props.onClickMore, _d = props.className, className = _d === void 0 ? '' : _d, rest = __rest(props, ["variant", "rounded", "text", "isActive", "moreCount", "onClose", "onClickMore", "className"]);
+    var _e = React.useState(false), isMoreExpand = _e[0], setIsMoreExpand = _e[1];
     var validatedVariant = validUnion(variant, [
         'default',
         'alternative',
+        'alternative-more',
     ]);
-    var validatedRadius = validUnion(rounded, ['none', 'all', 'top', 'right', 'left']);
-    var usedBaseConfig;
-    var usedButtonConfig;
-    var usedActionButtonConfig;
-    if (validatedVariant === 'alternative') {
-        usedBaseConfig = alternativeConfigs[isActive];
-        usedButtonConfig = alternativeButtonConfigs[isActive];
-        usedActionButtonConfig = actionButtonConfig[isActive];
-    }
-    else {
-        usedBaseConfig = defaultConfigs[isActive];
-        usedButtonConfig = defaultButtonConfigs[isActive];
-        usedActionButtonConfig = '';
-    }
-    return (React.createElement("div", __assign({ className: "tab-menu group/container flex flex-row font-arial text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(usedBaseConfig, " ").concat(rest.className) }, rest),
-        text,
-        React.createElement("div", { className: "grid ".concat(usedButtonConfig, " ") },
-            validatedVariant === 'alternative' && React.createElement("div", { className: "order-first" }),
-            React.createElement("button", { className: "group order-last", onClick: onClose },
-                React.createElement(TbX, { className: "rounded-radius-sm ".concat(usedActionButtonConfig), size: 14 })))));
-};
+    var validatedRadius = validUnion(rounded, [
+        'none',
+        'all',
+        'top',
+        'right',
+        'left',
+    ]);
+    var isAlternative = validatedVariant.startsWith('alternative');
+    var isMoreDropdown = validatedVariant === 'alternative-more';
+    var stateKey = isActive ? 'active' : 'inactive';
+    var baseStyles = isAlternative
+        ? alternativeConfigs[stateKey]
+        : defaultConfigs[stateKey];
+    var actionButtonStyles = isAlternative ? actionButtonConfig[stateKey] : '';
+    var itemButtonStyles = validatedVariant === 'alternative'
+        ? alternativeButtonConfigs[stateKey]
+        : defaultButtonConfigs[stateKey];
+    var handleMoreClick = function (e) {
+        setIsMoreExpand(function (prev) { return !prev; });
+        onClickMore === null || onClickMore === void 0 ? void 0 : onClickMore(e);
+    };
+    return (React.createElement("div", __assign({ ref: ref, className: "tab-menu group/container flex flex-row font-arial text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(baseStyles, " ").concat(className).trim() }, rest),
+        isMoreDropdown ? "More (".concat(moreCount, ")") : text,
+        React.createElement("div", { className: "grid ".concat(itemButtonStyles) },
+            isAlternative && React.createElement("div", { className: "order-first" }),
+            isMoreDropdown ? (React.createElement("button", { type: "button", className: "group order-last pl-[2px]", onClick: handleMoreClick }, isMoreExpand ? (React.createElement(TbChevronUp, { className: "rounded-radius-sm ".concat(isActive ? 'text-primary-black' : 'text-primary-white'), size: 14 })) : (React.createElement(TbChevronDown, { className: "rounded-radius-sm ".concat(isActive ? 'text-primary-black' : 'text-primary-white'), size: 14 })))) : (React.createElement("button", { type: "button", className: "group order-last", onClick: onClose },
+                React.createElement(TbX, { className: "rounded-radius-sm ".concat(actionButtonStyles), size: 14 }))))));
+});
+TabMenu.displayName = 'TabMenu';
 
 var sizeConfig$1 = {
     md: 'px-2.5 py-[9px]',