bianic-ui 2.9.0 → 2.10.0-alpha.0

package/dist/cjs/types/components/Card/config.d.ts

@@ -1,6 +1,7 @@
 declare const config: {
-    'dark-background': string;
-    'light-background': string;
-    'outline-light-background': string;
+    readonly '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";
+    readonly '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";
+    readonly '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";
 };
+export type CardVariant = keyof typeof config;
 export default config;

package/dist/cjs/types/components/Card/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import config from './config';
-declare const Card: ({ children, disabled, variant, }: {
+import React, { ComponentPropsWithoutRef } from 'react';
+import { CardVariant } from './config';
+export interface CardProps extends ComponentPropsWithoutRef<'button'> {
     children: React.ReactNode;
-    disabled?: boolean | undefined;
-    variant?: "dark-background" | "light-background" | "outline-light-background" | undefined;
-}) => React.JSX.Element;
+    variant?: CardVariant;
+}
+declare const Card: ({ children, disabled, variant, className, type, ...rest }: CardProps) => React.JSX.Element;
 export default Card;

package/dist/cjs/types/components/TabMenu/TabMenu.d.ts

@@ -1,10 +1,14 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React from 'react';
+import type { ComponentPropsWithoutRef, MouseEvent } from 'react';
+import type { TabMenuVariant, TabMenuRounded } from './configs';
 export interface TabMenuProps extends ComponentPropsWithoutRef<'div'> {
-    variant?: 'default' | 'alternative';
-    rounded?: 'none' | 'all' | 'top' | 'right' | 'left';
+    variant?: TabMenuVariant;
+    rounded?: TabMenuRounded;
     text?: string;
-    onClose?: () => void;
     isActive?: boolean;
+    moreCount?: number;
+    onClose?: () => void;
+    onClickMore?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
-declare const TabMenu: ({ variant, text, rounded, isActive, onClose, ...rest }: TabMenuProps) => React.JSX.Element;
+declare const TabMenu: React.ForwardRefExoticComponent<TabMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default TabMenu;

package/dist/cjs/types/components/TabMenu/configs.d.ts

@@ -1,31 +1,10 @@
-export declare const radiusConfig: {
-    none: string;
-    all: string;
-    top: string;
-    right: string;
-    left: string;
-};
-export declare const variantConfig: {
-    default: string;
-    alternative: string;
-};
-export declare const defaultConfigs: {
-    true: string;
-    false: string;
-};
-export declare const defaultButtonConfigs: {
-    true: string;
-    false: string;
-};
-export declare const alternativeConfigs: {
-    true: string;
-    false: string;
-};
-export declare const alternativeButtonConfigs: {
-    true: string;
-    false: string;
-};
-export declare const actionButtonConfig: {
-    true: string;
-    false: string;
-};
+export type ComponentStateKey = 'active' | 'inactive';
+export type TabMenuVariant = 'default' | 'alternative' | 'alternative-more';
+export type TabMenuRounded = 'none' | 'all' | 'top' | 'right' | 'left';
+export declare const radiusConfig: Record<TabMenuRounded, string>;
+export declare const variantConfig: Record<TabMenuVariant, string>;
+export declare const defaultConfigs: Record<ComponentStateKey, string>;
+export declare const alternativeConfigs: Record<ComponentStateKey, string>;
+export declare const defaultButtonConfigs: Record<ComponentStateKey, string>;
+export declare const alternativeButtonConfigs: Record<ComponentStateKey, string>;
+export declare const actionButtonConfig: Record<ComponentStateKey, string>;

package/dist/cjs/types/stories/Card/Card.stories.d.ts

@@ -2,11 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ children, disabled, variant, }: {
-        children: import("react").ReactNode;
-        disabled?: boolean | undefined;
-        variant?: "dark-background" | "light-background" | "outline-light-background" | undefined;
-    }) => import("react").JSX.Element;
+    component: ({ children, disabled, variant, className, type, ...rest }: import("../../components/Card").CardProps) => import("react").JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/cjs/types/stories/TabMenu/TabMenu.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react/*';
 declare const meta: {
     title: string;
-    component: ({ variant, text, rounded, isActive, onClose, ...rest }: import("../../components/TabMenu/TabMenu").TabMenuProps) => import("react").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("../../components/TabMenu/TabMenu").TabMenuProps & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
     };

package/dist/esm/index.js

@@ -1574,24 +1574,19 @@ var ContextualButton = 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() {
@@ -4541,56 +4536,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 = 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 = 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]',