ui-beyable 1.1.0-beta.3 → 1.1.0-beta.31

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

@@ -1,6 +1,6 @@
 import React from 'react';
 type sizeType = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-type horizontalSizeType = 'xs' | 's' | 'm' | 'l';
+type horizontalSizeType = 'xxs' | 'xs' | 's' | 'm' | 'l';
 type fontSizeType = 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface IBtn {
     children?: React.ReactNode;
@@ -16,6 +16,7 @@ interface IBtn {
     style?: 'fill' | 'outline' | 'ghost' | 'ghost_outline' | 'reverse' | 'link';
     rounded?: boolean;
     disabled?: boolean;
+    readonly?: boolean;
     className?: string;
     strong?: boolean;
     light?: boolean;
@@ -28,6 +29,8 @@ interface IBtn {
     fullHeight?: boolean;
     hasMinWith?: boolean;
     icon?: string;
+    customIcon?: React.ReactElement;
+    lucideIcon?: React.ReactElement;
     iconPosition?: string;
     arrow?: boolean;
     tooltip?: string;

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

@@ -1,13 +1,19 @@
 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<{
-        value: valueType;
-        label?: string;
-        icon?: string;
-    }>;
+    optionsList: Array<optionType>;
     onChange: (value: valueType) => void;
     appearance?: 'outline' | 'ghost';
     className?: string;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { ICheckbox, IRadio, ISwitch } from './types';
 import { IList } from '../List/types';
-declare function Checkbox({ children, type, label, description, tooltip, tooltipHTML, name, value, checked, forcedChecked, disabled, onChange, size, fullWidth }: ICheckbox): JSX.Element;
+declare function Checkbox({ children, type, label, description, tooltip, tooltipHTML, name, value, checked, forcedChecked, disabled, onChange, size, fullWidth, className }: ICheckbox): JSX.Element;
 declare function Radio(props: IRadio): JSX.Element;
-declare function Switch({ children, label, name, value, checked, onChange, disabled, forcedChecked, position, size, align, verticalSize, noMargin }: ISwitch): JSX.Element;
+declare function Switch({ children, label, name, value, checked, onChange, disabled, forcedChecked, position, size, align, verticalSize, noMargin, className }: ISwitch): JSX.Element;
 declare function CheckboxList(props: IList): JSX.Element;
 export { Checkbox, Radio, Switch, CheckboxList };

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

@@ -9,6 +9,7 @@ interface ICommon {
     forcedChecked?: boolean;
     disabled?: boolean;
     onChange?: any;
+    className?: string;
 }
 interface IRadio extends ICommon {
     size?: 's' | 'm' | 'l';

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/IconBtn/types.d.ts

@@ -1,7 +1,11 @@
+/// <reference types="react" />
+type sizeType = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
 interface IIconBtn {
-    icon: string;
+    icon?: string;
+    customIcon?: React.ReactElement;
+    lucideIcon?: React.ReactElement;
     fixedWidth?: boolean;
-    size?: string;
+    size?: sizeType;
     className?: string;
     theme?: string;
     hoverColor?: string;
@@ -16,4 +20,4 @@ interface IIconBtn {
     isActive?: boolean;
     rel?: string;
 }
-export { IIconBtn };
+export { IIconBtn, sizeType };

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

@@ -0,0 +1,7 @@
+interface LogoLoaderProps {
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    className?: string;
+}
+declare const LogoLoader: ({ size, className }: LogoLoaderProps) => JSX.Element;
+export default LogoLoader;
+export { LogoLoader };

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface SpinnerLogoProps {
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    className?: string;
+}
+declare const SpinnerLogo: ({ size, className }: SpinnerLogoProps) => JSX.Element;
+export default SpinnerLogo;
+export { SpinnerLogo };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { spaceType } from '../Tokens/Tokens';
 type alignInlineType = 'stretch' | 'start' | 'center' | 'end';
+type justifyType = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 type flexType = 'none' | 'auto' | 'shrink' | 'grow';
 interface StackType {
     children?: React.ReactNode;
@@ -8,12 +9,16 @@ interface StackType {
     gap?: spaceType;
     shouldWrap?: boolean;
     alignInline?: alignInlineType;
+    justify?: justifyType;
+    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, justify, flex, style }: StackType): JSX.Element;
+declare function StackRow({ children, className, flex, style }: StackRowType): JSX.Element;
 export { Stack, StackRow };

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

@@ -2,7 +2,7 @@
 import { ITextfield, ITextfieldIcon } from './types';
 declare function Textfield({ value, name, type, placeholder, rows, // For textarea
 min, max, onChange, onEnter, onFocus, onBlur, disabled, readonly, clearable, selectOnFocus, autoFocus, autoComplete, forceFocus, spellCheck, autogrow, // Vertical for textarea, Horizontal for text
-label, labelTooltip, labelTooltipHTML, description, descriptionBottom, errorMessage, unit, append, prepend, icon, iconPosition, className, labelClassName, blockClassName, size, horizontalSize, color, style, doBtnHug, textAlign, fullWidth, width, // 'Full' || 'xl' || 'l' || 's' || 'xs' || 'xxs'
+label, labelTooltip, labelTooltipHTML, description, descriptionBottom, errorMessage, unit, append, prepend, icon, iconPosition, className, labelClassName, blockClassName, size, horizontalSize, color, style, doBtnHug, hasEffect, textAlign, fullWidth, width, // 'Full' || 'xl' || 'l' || 's' || 'xs' || 'xxs'
 maxHeight, // For textarea autogrow
 maxWidth, }: ITextfield): JSX.Element;
 declare function TextfieldIcon({ icon, position }: ITextfieldIcon): JSX.Element;

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

@@ -20,6 +20,7 @@ interface ITextfield {
     forceFocus?: boolean;
     spellCheck?: boolean;
     autogrow?: boolean;
+    hasEffect?: boolean;
     label?: React.ReactNode | string;
     labelTooltip?: string;
     labelTooltipHTML?: any;

package/lib/cjs/index.d.ts

@@ -14,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';
@@ -24,13 +24,14 @@ 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';
+import { SpinnerLogo } from './components/SpinnerLogo/SpinnerLogo';
 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, BtnSwitch, 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, };
+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, SpinnerLogo, Switch, TabBar, TabItem, Textfield, TextfieldIcon, };