bianic-ui 1.5.1-beta.8 → 1.5.1-beta.9

package/dist/cjs/index.js

@@ -1473,6 +1473,28 @@ var ButtonApp = function (_a) {
     return (React.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.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.createElement("div", { className: "label max-h-[46px] px-[5px] text-[12px] leading-none" }, label))));
+};
+
 function Color() {
     var colorList = [
         'bg-bia-red',
@@ -2868,6 +2890,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;

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

@@ -5,7 +5,7 @@ export { default as Badge } from './Badge/Badge';
 export { default as Banner } from './Banner';
 export { default as Brand } from './Brand/Brand';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
-export { Button, ButtonApp } from './Button';
+export { Button, ButtonApp, ContextualButton } from './Button';
 export { default as Color } from './Color';
 export { default as Divider } from './Divider/Divider';
 export { default as FileTree } from './FileTree';

package/dist/esm/index.js

@@ -1471,6 +1471,28 @@ var ButtonApp = function (_a) {
     return (React.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.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.createElement("div", { className: "label max-h-[46px] px-[5px] text-[12px] leading-none" }, label))));
+};
+
 function Color() {
     var colorList = [
         'bg-bia-red',
@@ -2855,4 +2877,4 @@ Tooltip.defaultProps = {
 };
 Tooltip.defaultProps = {};
 
-export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, Display, Divider, FileTree, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };
+export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, Display, Divider, FileTree, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };

package/dist/esm/types/components/index.d.ts

@@ -5,7 +5,7 @@ export { default as Badge } from './Badge/Badge';
 export { default as Banner } from './Banner';
 export { default as Brand } from './Brand/Brand';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
-export { Button, ButtonApp } from './Button';
+export { Button, ButtonApp, ContextualButton } from './Button';
 export { default as Color } from './Color';
 export { default as Divider } from './Divider/Divider';
 export { default as FileTree } from './FileTree';

package/dist/index.d.ts

@@ -124,6 +124,15 @@ interface ButtonAppProps extends ComponentPropsWithoutRef<'button'> {
 }
 declare const ButtonApp: ({ icon, isNotified, isActive, disabled, color, label, ...rest }: ButtonAppProps) => React$1.JSX.Element;
 
+interface ContextualButtonProps extends ComponentPropsWithoutRef<'button'> {
+    label?: string;
+    variant?: 'dark' | 'light' | undefined;
+    icon?: React$1.ReactNode;
+    isNotified?: boolean;
+    isSelected?: boolean;
+}
+declare const ContextualButton: ({ label, icon, variant, disabled, isNotified, isSelected, ...props }: ContextualButtonProps) => React$1.JSX.Element;
+
 declare function Color(): React$1.JSX.Element;
 
 interface DividerProps extends ComponentPropsWithoutRef<'div'> {
@@ -614,4 +623,4 @@ declare namespace Link {
     };
 }
 
-export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, Display, Divider, FileTree, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };
+export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, Display, Divider, FileTree, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "1.5.1-beta.8",
+  "version": "1.5.1-beta.9",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",