ui-beyable 1.1.0-beta.1 → 1.1.0-beta.11

package/lib/cjs/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
+type stepType = number | string;
 interface BreadcrumbType {
     items: {
         index: number;
-        step: number;
+        step: stepType;
         title: string;
         className?: string;
     }[];
-    onClick?: (step: number) => void;
-    activeStep?: number;
+    onClick?: (step: stepType) => void;
+    activeStep?: stepType;
     direction?: 'horizontal' | 'vertical';
 }
 declare function Breadcrumb({ items, onClick, activeStep, direction }: BreadcrumbType): JSX.Element;

package/lib/cjs/components/Btn/types.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+type sizeType = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+type horizontalSizeType = 'xs' | 's' | 'm' | 'l';
+type fontSizeType = 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface IBtn {
     children?: React.ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
@@ -13,17 +16,21 @@ interface IBtn {
     style?: 'fill' | 'outline' | 'ghost' | 'ghost_outline' | 'reverse' | 'link';
     rounded?: boolean;
     disabled?: boolean;
+    readonly?: boolean;
     className?: string;
     strong?: boolean;
     light?: boolean;
     isActive?: boolean;
     isLoading?: boolean;
-    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-    horizontalSize?: 'xs' | 's' | 'm' | 'l';
-    fontSize?: 'l' | 'm';
+    size?: sizeType;
+    horizontalSize?: horizontalSizeType;
+    fontSize?: fontSizeType;
     fullWidth?: boolean;
     fullHeight?: boolean;
+    hasMinWith?: boolean;
     icon?: string;
+    customIcon?: React.ReactElement;
+    lucideIcon?: React.ReactElement;
     iconPosition?: string;
     arrow?: boolean;
     tooltip?: string;
@@ -34,4 +41,4 @@ interface IBtnGroup {
     children?: React.ReactNode;
     gap?: 'm' | 'l' | 'xl' | 'none';
 }
-export { IBtn, IBtnGroup };
+export { IBtn, IBtnGroup, sizeType as BtnSizeType, horizontalSizeType as BtnHorizontalSizeType, fontSizeType as BtnFontSizeType };

package/lib/cjs/components/BtnGroup/BtnGroup.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BtnSizeType, BtnHorizontalSizeType } from '../Btn/types';
+type valueType = string | boolean | number;
+interface BtnGroupProps {
+    value: valueType;
+    optionsList: Array<{
+        value: valueType;
+        label?: string;
+        icon?: string;
+    }>;
+    onChange: (value: valueType) => void;
+    appearance?: 'outline' | 'ghost';
+    className?: string;
+    size?: BtnSizeType;
+    btnHorizontalSize?: BtnHorizontalSizeType;
+    btnIsLight?: boolean;
+}
+declare const BtnGroup: React.FC<BtnGroupProps>;
+export { BtnGroup, valueType as BtnGroupValueType };

package/lib/cjs/components/BtnSwitch/BtnSwitch.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BtnSizeType, BtnHorizontalSizeType } from '../Btn/types';
+type valueType = string | boolean | number;
+type optionType = {
+    value: valueType;
+    label?: string;
+    tooltip?: string;
+    tooltipHTML?: React.ReactNode;
+    icon?: string;
+    customIcon?: React.ReactElement;
+    lucideIcon?: React.ReactElement;
+    disabled?: boolean;
+};
+interface BtnSwitchProps {
+    value: valueType;
+    optionsList: Array<optionType>;
+    onChange: (value: valueType) => void;
+    appearance?: 'outline' | 'ghost';
+    className?: string;
+    size?: BtnSizeType;
+    btnHorizontalSize?: BtnHorizontalSizeType;
+    btnIsLight?: boolean;
+}
+declare const BtnSwitch: React.FC<BtnSwitchProps>;
+export { BtnSwitch, valueType as BtnSwitchValueType };

package/lib/cjs/components/Picto/Picto.d.ts

@@ -1,4 +1,24 @@
-/// <reference types="react" />
-import { IPicto } from './types';
-declare function Picto({ icon, color, size }: IPicto): JSX.Element;
+import React from 'react';
+type colorType = 'dark_blue' | 'blue' | 'green' | 'apple_green' | 'yellow' | 'orange' | 'red' | 'pink' | 'purple' | 'turquoise';
+type brightnessType = 'high' | 'low' | 'mix';
+type sizeType = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
+type shapeType = 'round' | 'square';
+interface PictoType {
+    icon?: string;
+    color?: colorType;
+    brightness?: brightnessType;
+    size?: sizeType;
+    shape?: shapeType;
+    hasBorder?: boolean;
+    customIcon?: React.ReactElement;
+    lucideIcon?: React.ReactElement;
+    tooltip?: string;
+    tooltipHTML?: React.ReactNode;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    className?: string;
+    onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+declare function Picto({ icon, customIcon, lucideIcon, color, brightness, size, shape, hasBorder, tooltip, tooltipHTML, href, target, rel, className, onClick }: PictoType): JSX.Element;
 export { Picto };

package/lib/cjs/index.d.ts

@@ -3,6 +3,7 @@ import { Article, ArticleFoldable } from './components/Article/Article';
 import { Box } from './components/Box/Box';
 import { Breadcrumb } from './components/Breadcrumb/Breadcrumb';
 import { Btn, BtnGroup } from './components/Btn/Btn';
+import { BtnSwitch } from './components/BtnSwitch/BtnSwitch';
 import { Checkbox, Radio, Switch, CheckboxList } from './components/Checkbox/Checkbox';
 import Collapse from './components/Collapse/Collapse';
 import { Confirm } from './components/Confirm/Confirm';
@@ -13,7 +14,7 @@ import { EmptyState } from './components/EmptyState/EmptyState';
 import { Fieldset } from './components/Fieldset/Fieldset';
 import { Hr } from './components/Hr/Hr';
 import { IconBtn } from './components/IconBtn/IconBtn';
-import { Inline } from './components/Inline/Inline';
+import { Inline, InlineColumn } from './components/Inline/Inline';
 import { KpiList, KpiItem } from './components/Kpi/Kpi';
 import { List, ListItem } from './components/List/List';
 import { Listbox, ListboxItem, ListboxSep } from './components/Listbox/Listbox';
@@ -23,7 +24,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal/M
 import { Panel, PanelClose, PanelHeader, PanelBody, PanelSection } from './components/Panel/Panel';
 import { Picto } from './components/Picto/Picto';
 import { Portal } from './components/Portal/Portal';
-import { Stack } from './components/Stack/Stack';
+import { Stack, StackRow } from './components/Stack/Stack';
 import { Section } from './components/Section/Section';
 import { Select } from './components/Select/Select';
 import { Spinner } from './components/Spinner/Spinner';
@@ -31,5 +32,5 @@ import { TabBar, TabItem } from './components/Tabs/Tabs';
 import { Textfield, TextfieldIcon, SearchBar } from './components/Textfield/Textfield';
 declare const Theme: any;
 declare const Utils: any;
-export { Theme, Utils, AppRoot, AppHeader, AppLinkWrapper, AppLogo, Article, ArticleFoldable, Box, Breadcrumb, Btn, BtnGroup, Checkbox, CheckboxList, Collapse, // Not OK, use ArticleFoldable instead
-Confirm, Container, Dropdown, DropdownSection, EditorHeader, EmptyState, Fieldset, Hr, IconBtn, Inline, KpiList, KpiItem, List, ListItem, Listbox, ListboxItem, ListboxSep, Mask, Message, Modal, ModalHeader, ModalBody, ModalFooter, Panel, PanelClose, PanelHeader, PanelBody, PanelSection, Picto, Portal, Stack, Radio, SearchBar, Section, Select, Spinner, Switch, TabBar, TabItem, Textfield, TextfieldIcon, };
+export { Theme, Utils, AppRoot, AppHeader, AppLinkWrapper, AppLogo, Article, ArticleFoldable, Box, Breadcrumb, Btn, BtnGroup, BtnSwitch, Checkbox, CheckboxList, Collapse, // Not OK, use ArticleFoldable instead
+Confirm, Container, Dropdown, DropdownSection, EditorHeader, EmptyState, Fieldset, Hr, IconBtn, Inline, InlineColumn, KpiList, KpiItem, List, ListItem, Listbox, ListboxItem, ListboxSep, Mask, Message, Modal, ModalHeader, ModalBody, ModalFooter, Panel, PanelClose, PanelHeader, PanelBody, PanelSection, Picto, Portal, Stack, StackRow, Radio, SearchBar, Section, Select, Spinner, Switch, TabBar, TabItem, Textfield, TextfieldIcon, };