ui-beyable 1.1.0-beta.2 → 1.1.0-beta.21

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 = 'xxs' | '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/EmptyState/EmptyState.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { IEmptyState } from './types';
-declare function EmptyState({ title, text, primaryAction, secondaryAction, imageUrl, imageWidth, icon, footer, card, cardTextSize, cardWidth, verticalSize, verticalAlign, textSize, titleIsBold, hasSpinner, hasBorder, width, }: IEmptyState): JSX.Element;
+declare function EmptyState({ title, text, primaryAction, secondaryAction, imageUrl, imageWidth, icon, customIcon, lucideIcon, footer, card, cardTextSize, cardWidth, verticalSize, verticalAlign, textSize, titleIsBold, hasSpinner, hasBorder, width, }: IEmptyState): JSX.Element;
 export { EmptyState };

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

@@ -7,6 +7,8 @@ interface IEmptyState {
     imageUrl?: string;
     imageWidth?: number;
     icon?: string;
+    customIcon?: React.ReactElement;
+    lucideIcon?: React.ReactElement;
     footer?: React.ReactNode | string;
     card?: React.ReactNode | string;
     cardTextSize?: 'm' | 'l';

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { IList, IListItem } from './types';
-declare function List({ children, className, size, hasLastBorder, hasBorder, borderPosition, removeVerticalMargin }: IList): JSX.Element;
-declare function ListItem({ children, className, picto, pictoHasMargin, text, description, actions, onClick, value, hasArrow, textIsBold, textIsItalic }: IListItem): JSX.Element;
+declare const List: React.ForwardRefExoticComponent<IList & React.RefAttributes<HTMLDivElement>>;
+declare const ListItem: React.ForwardRefExoticComponent<IListItem & React.RefAttributes<HTMLDivElement>>;
 export { List, ListItem };

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

@@ -1,25 +1,42 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { spaceType } from '../Tokens/Tokens';
+interface ListStyleType extends CSSProperties {
+    '--positive-offset'?: string;
+    '--negative-offset'?: string;
+    '--border-offset'?: string;
+}
 interface IList {
     children: React.ReactNode;
     className?: string;
-    size?: string;
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l';
+    fontSize?: 'm' | 'l';
     hasLastBorder?: boolean;
     hasBorder?: boolean;
-    borderPosition?: string;
     removeVerticalMargin?: boolean;
+    paddingInline?: spaceType | '';
+    style?: ListStyleType;
 }
 interface IListItem {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     className?: string;
     picto?: React.ReactNode;
-    pictoHasMargin?: boolean;
     text?: any;
     description?: any;
     actions?: React.ReactNode;
-    onClick?: any;
+    onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseEnter?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseLeave?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     value?: any;
+    valueMaxWidth?: number;
+    valueMinWidth?: number;
     hasArrow?: boolean;
     textIsBold?: boolean;
     textIsItalic?: boolean;
+    textHasEllipsis?: boolean;
+    textBreakWord?: boolean;
+    isActive?: boolean;
+    isDragging?: boolean;
+    dragHandle?: React.ReactNode;
+    dragHandlePosition?: 'before' | 'after';
 }
 export { IList, IListItem };

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { IListbox, IListboxItem } from './types';
-declare function Listbox({ children, hasBorder, className }: IListbox): JSX.Element;
-declare function ListboxItem({ children, message, description, imageUrl, tooltip, tooltipHTML, onClick, onMouseEnter, href, target, rel, selected, hasSelectedIcon, hasCheckbox, disabled, size, className, icon, iconCustom, capitalize }: IListboxItem): JSX.Element;
+import { IListbox, IListboxItem, IListboxGroupLabel } from './types';
+declare function Listbox({ children, hasBorder, className, direction, appearance, groupLabel }: IListbox): JSX.Element;
+declare function ListboxItem({ children, message, description, imageUrl, tooltip, tooltipHTML, onClick, onMouseEnter, href, target, rel, selected, hasSelectedColor, hasSelectedIcon, hasCheckbox, hasRadio, disabled, size, className, style, icon, customIcon, lucideIcon, capitalize }: IListboxItem): JSX.Element;
 declare function ListboxSep(): JSX.Element;
-export { Listbox, ListboxItem, ListboxSep };
+declare function ListboxGroupLabel({ children }: IListboxGroupLabel): JSX.Element;
+export { Listbox, ListboxItem, ListboxSep, ListboxGroupLabel };

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

@@ -3,6 +3,9 @@ interface IListbox {
     children: React.ReactNode;
     hasBorder?: boolean;
     className?: string;
+    direction?: 'column' | 'row';
+    appearance?: 'iconSelector';
+    groupLabel?: React.ReactNode | string;
 }
 interface IListboxItem {
     children?: React.ReactNode;
@@ -17,13 +20,20 @@ interface IListboxItem {
     target?: string;
     rel?: string;
     selected?: boolean;
+    hasSelectedColor?: boolean;
     hasSelectedIcon?: boolean;
     hasCheckbox?: boolean;
+    hasRadio?: boolean;
     disabled?: boolean;
     capitalize?: boolean;
     size?: 'm' | 'l' | 'xl';
     className?: string;
+    style?: React.CSSProperties;
     icon?: string;
-    iconCustom?: React.ReactNode;
+    customIcon?: React.ReactElement;
+    lucideIcon?: React.ReactElement;
 }
-export { IListbox, IListboxItem };
+interface IListboxGroupLabel {
+    children?: React.ReactNode;
+}
+export { IListbox, IListboxItem, IListboxGroupLabel };

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/components/Spinner/Spinner.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
 import { ISpinner } from './types';
-declare function Spinner({ wheelSize, // xxs, xs, s, m, l
-display, // block | inline | overlay
-verticalSize, }: ISpinner): JSX.Element;
+declare function Spinner({ size, wheelSize, display, verticalSize, className }: ISpinner): JSX.Element;
 export { Spinner };

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

@@ -1,6 +1,8 @@
 interface ISpinner {
-    wheelSize?: string;
-    display?: string;
-    verticalSize?: string;
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    wheelSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    display?: 'block' | 'inline' | 'overlay';
+    verticalSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    className?: string;
 }
 export { ISpinner };

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

@@ -8,12 +8,15 @@ interface StackType {
     gap?: spaceType;
     shouldWrap?: boolean;
     alignInline?: alignInlineType;
+    flex?: flexType;
+    style?: React.CSSProperties;
 }
 interface StackRowType {
     children?: React.ReactNode;
     className?: string;
     flex?: flexType;
+    style?: React.CSSProperties;
 }
-declare function Stack({ children, className, gap, alignInline }: StackType): JSX.Element;
-declare function StackRow({ children, className, flex }: StackRowType): JSX.Element;
+declare function Stack({ children, className, gap, alignInline, flex, style }: StackType): JSX.Element;
+declare function StackRow({ children, className, flex, style }: StackRowType): JSX.Element;
 export { Stack, StackRow };

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, };