bianic-ui 2.6.0-beta.5 → 2.7.0

package/dist/esm/types/components/Forms/LiveSearch/Example/OutsideControl.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const OutsideControl: () => React.JSX.Element;
+export default OutsideControl;

package/dist/esm/types/components/Icons/Rhombus.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './interface';
+declare const Rhombus: ({ className, fill, size, }: IconProps) => React.JSX.Element;
+export default Rhombus;

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

@@ -1,22 +1,23 @@
-export { default as BCNode } from './Node';
-export { default as BCPort } from './Port';
-export { default as BCExposedPort } from './ExposedPort';
-export { default as BCVirtualPort } from './VirtualPort';
 export { default as BCAlertRoundedSquare } from './AlertRoundedSquare';
-export { default as BCStack } from './Stack';
-export { default as BCDiscrepancy } from './Discrepancy';
-export { default as BCModalBalance } from './ModelBalance';
 export { default as BCCubeHeader } from './CubeHeader';
-export { default as BCLegend } from './Legend';
-export { default as BCSelectAllRemove } from './SelectAllRemove';
-export { default as BCSelectAllAdd } from './SelectAllAdd';
-export { default as BCFQWelldone } from './FQWelldone';
-export { default as BCFQOperation } from './FQOperation';
-export { default as BCFQModeler } from './FQModeler';
-export { default as BCFQGetaway } from './FQGetaway';
-export { default as BCFQAnalytical } from './FQAnalytical';
+export { default as BCDiscrepancy } from './Discrepancy';
+export { default as BCExposedPort } from './ExposedPort';
 export { default as BCFlowqount } from './Flowqount';
-export { default as BCSpinner } from './Spinner';
-export { default as BCOutlet } from './Outlet';
+export { default as BCFQAnalytical } from './FQAnalytical';
+export { default as BCFQGetaway } from './FQGetaway';
+export { default as BCFQModeler } from './FQModeler';
+export { default as BCFQOperation } from './FQOperation';
+export { default as BCFQWelldone } from './FQWelldone';
 export { default as BCInlet } from './Inlet';
+export { default as BCLegend } from './Legend';
+export { default as BCModalBalance } from './ModelBalance';
 export { default as BCNeutral } from './Neutral';
+export { default as BCNode } from './Node';
+export { default as BCOutlet } from './Outlet';
+export { default as BCPort } from './Port';
+export { default as BCSelectAllAdd } from './SelectAllAdd';
+export { default as BCSelectAllRemove } from './SelectAllRemove';
+export { default as BCSpinner } from './Spinner';
+export { default as BCStack } from './Stack';
+export { default as BCRhombus } from './Rhombus';
+export { default as BCVirtualPort } from './VirtualPort';

package/dist/esm/types/components/Tooltip/PropsInterface.d.ts

@@ -5,6 +5,8 @@ interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
     delay?: number;
     maxWidth?: string;
     zIndex?: number;
+    bgColor?: string;
+    textColor?: string;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 interface TooltipItemProps {
@@ -15,6 +17,8 @@ interface TooltipItemProps {
     tooltipContainerStyle: React.CSSProperties;
     style?: ComponentPropsWithRef<'div'>['style'];
     zIndex: number;
+    bgColor?: string;
+    textColor?: string;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 export { TooltipProps, TooltipItemProps };

package/dist/esm/types/components/Tooltip/Simulation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import TooltipProps from './PropsInterface';
+import { TooltipProps } from './PropsInterface';
 declare function TooltipDemo(props: TooltipProps): React.JSX.Element;
 declare namespace TooltipDemo {
     var defaultProps: {

package/dist/esm/types/stories/Form/LiveSearch/OutsideControlSimulation.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: () => React.JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const OutsideControlDemo: Story;

package/dist/esm/types/stories/Icons/Rhombus.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ className, fill, size, }: import("../../components/Icons/interface").IconProps) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Preview: Story;

package/dist/index.d.ts

@@ -545,49 +545,51 @@ interface IconProps {
     strokeWidth?: number | string;
 }
 
-declare const Node: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const AlertRoundedSquare: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
-declare const Port: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const CubeHeader: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+
+declare const Discrepancy: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
 declare const ExposedPort: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const VirtualPort: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Flowqount: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const AlertRoundedSquare: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+declare const FQAnalytical: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
-declare const Stack: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const FQGetaway: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const Discrepancy: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const FQModeler: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const ModalBalance: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+declare const FQOperation: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const CubeHeader: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const FQWelldone: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const Legend: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Inlet: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const SelectAllRemove: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+declare const Legend: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const SelectAllAdd: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+declare const ModalBalance: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
-declare const FQWelldone: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Neutral: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
-declare const FQOperation: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Node: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const FQModeler: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Outlet: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const FQGetaway: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Port: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const FQAnalytical: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+declare const SelectAllAdd: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
-declare const Flowqount: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const SelectAllRemove: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
 declare const Spinner$1: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const Outlet: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Stack: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const Inlet: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
+declare const Rhombus: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
-declare const Neutral: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+declare const VirtualPort: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
 interface InfoPanelProps {
     variant?: 'container' | 'form-sm' | 'form-md';
@@ -785,6 +787,8 @@ interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
     delay?: number;
     maxWidth?: string;
     zIndex?: number;
+    bgColor?: string;
+    textColor?: string;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 
@@ -888,4 +892,4 @@ declare function Window({ size, title, zIndex, onClose, ...rest }: WindowProps):
  */
 declare function getRelativeTime(date: Date): string;
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, getRelativeTime, useFileTree };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, Rhombus as BCRhombus, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, getRelativeTime, useFileTree };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "2.6.0-beta.5",
+  "version": "2.7.0",
   "description": "Design Language System develop by BIAENERGI",
   "repository": {
     "type": "git",

package/src/style/color.css

@@ -624,4 +624,27 @@
   --grey-dark-70: color-mix(in srgb, var(--grey), var(--dark) 70%);
   --grey-dark-80: color-mix(in srgb, var(--grey), var(--dark) 80%);
   --grey-dark-90: color-mix(in srgb, var(--grey), var(--dark) 90%);
+
+  /* brown */
+  --brown: #e09673;
+
+  --brown-light-10: color-mix(in srgb, var(--brown), var(--primary-white) 10%);
+  --brown-light-20: color-mix(in srgb, var(--brown), var(--primary-white) 20%);
+  --brown-light-30: color-mix(in srgb, var(--brown), var(--primary-white) 30%);
+  --brown-light-40: color-mix(in srgb, var(--brown), var(--primary-white) 40%);
+  --brown-light-50: color-mix(in srgb, var(--brown), var(--primary-white) 50%);
+  --brown-light-60: color-mix(in srgb, var(--brown), var(--primary-white) 60%);
+  --brown-light-70: color-mix(in srgb, var(--brown), var(--primary-white) 70%);
+  --brown-light-80: color-mix(in srgb, var(--brown), var(--primary-white) 80%);
+  --brown-light-90: color-mix(in srgb, var(--brown), var(--primary-white) 90%);
+
+  --brown-dark-10: color-mix(in srgb, var(--brown), var(--dark) 10%);
+  --brown-dark-20: color-mix(in srgb, var(--brown), var(--dark) 20%);
+  --brown-dark-30: color-mix(in srgb, var(--brown), var(--dark) 30%);
+  --brown-dark-40: color-mix(in srgb, var(--brown), var(--dark) 40%);
+  --brown-dark-50: color-mix(in srgb, var(--brown), var(--dark) 50%);
+  --brown-dark-60: color-mix(in srgb, var(--brown), var(--dark) 60%);
+  --brown-dark-70: color-mix(in srgb, var(--brown), var(--dark) 70%);
+  --brown-dark-80: color-mix(in srgb, var(--brown), var(--dark) 80%);
+  --brown-dark-90: color-mix(in srgb, var(--brown), var(--dark) 90%);
 }

package/tailwind.config.js

@@ -437,6 +437,35 @@ module.exports = {
           90: 'var(--marguerite-dark-90)',
         },
       },
+      'bia-brown': {
+        DEFAULT: 'var(--brown)',
+        hover: 'var(--brown-light-10)',
+        active: 'var(--brown-dark-10)',
+        disabled: 'var(--brown-light-50)',
+        pastel: 'var(--brown-light-90)',
+        light: {
+          10: 'var(--brown-light-10)',
+          20: 'var(--brown-light-20)',
+          30: 'var(--brown-light-30)',
+          40: 'var(--brown-light-40)',
+          50: 'var(--brown-light-50)',
+          60: 'var(--brown-light-60)',
+          70: 'var(--brown-light-70)',
+          80: 'var(--brown-light-80)',
+          90: 'var(--brown-light-90)',
+        },
+        dark: {
+          10: 'var(--brown-dark-10)',
+          20: 'var(--brown-dark-20)',
+          30: 'var(--brown-dark-30)',
+          40: 'var(--brown-dark-40)',
+          50: 'var(--brown-dark-50)',
+          60: 'var(--brown-dark-60)',
+          70: 'var(--brown-dark-70)',
+          80: 'var(--brown-dark-80)',
+          90: 'var(--brown-dark-90)',
+        },
+      },
       primary: {
         black: '#2f2f2f',
         cool: '#8b8ba6',