ui-beyable 1.0.15 → 1.0.17

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

@@ -1,6 +1,6 @@
 import React from 'react';
 interface IBtn {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
     htmlTag?: string;
     onClick?: any;
@@ -18,9 +18,9 @@ interface IBtn {
     light?: boolean;
     isActive?: boolean;
     isLoading?: boolean;
-    size?: string;
-    horizontalSize?: string;
-    fontSize?: string;
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    horizontalSize?: 'xs' | 's' | 'm' | 'l';
+    fontSize?: 'l' | 'm';
     fullWidth?: boolean;
     fullHeight?: boolean;
     icon?: string;

package/lib/esm/components/Confirm/Confirm.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IConfirm } from './types';
+declare function Confirm({ children, title, text, isOpen, onClose, confirmCallback, cancelCallback, confirmText, cancelText, confirmColor, confirmInput, confirmInputLabel, width }: IConfirm): JSX.Element;
+export { Confirm };

package/lib/esm/components/Confirm/types.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface IConfirm {
+    children?: React.ReactNode;
+    title?: React.ReactNode | string;
+    text?: React.ReactNode | string;
+    isOpen: boolean;
+    onClose?: () => any;
+    confirmCallback?: () => any;
+    cancelCallback?: () => any;
+    confirmText?: string;
+    cancelText?: string;
+    confirmColor?: 'primary' | 'secondary' | 'alert' | 'warning' | 'success' | 'black';
+    confirmInput?: string;
+    confirmInputLabel?: React.ReactNode | string;
+    width?: number;
+}
+export { IConfirm };

package/lib/esm/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IFieldset } from './types';
+declare function Fieldset({ children, label, description, labelClassName, blockClassName, tooltip, tooltipHTML, inputID, append }: IFieldset): JSX.Element;
+export { Fieldset };

package/lib/esm/components/Fieldset/types.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface IFieldset {
+    children: React.ReactNode;
+    label: React.ReactNode | string;
+    description?: React.ReactNode | string;
+    labelClassName?: string;
+    blockClassName?: string;
+    tooltip?: string;
+    tooltipHTML?: any;
+    inputID?: string | number;
+    append?: React.ReactNode;
+}
+export { IFieldset };

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

@@ -0,0 +1,6 @@
+/// <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;
+declare function ListboxSep(): JSX.Element;
+export { Listbox, ListboxItem, ListboxSep };

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

@@ -0,0 +1,29 @@
+import React from 'react';
+interface IListbox {
+    children: React.ReactNode;
+    hasBorder?: boolean;
+    className?: string;
+}
+interface IListboxItem {
+    children?: React.ReactNode;
+    message?: React.ReactNode | string;
+    description?: React.ReactNode | string;
+    imageUrl?: string;
+    tooltip?: string | null;
+    tooltipHTML?: any;
+    onClick?: any;
+    onMouseEnter?: any;
+    href?: string;
+    target?: string;
+    rel?: string;
+    selected?: boolean;
+    hasSelectedIcon?: boolean;
+    hasCheckbox?: boolean;
+    disabled?: boolean;
+    capitalize?: boolean;
+    size?: 'm' | 'l' | 'xl';
+    className?: string;
+    icon?: string;
+    iconCustom?: React.ReactNode;
+}
+export { IListbox, IListboxItem };

package/lib/esm/components/Modal/Modal.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
-import { IModal } from './types';
+import { IModal, IModalHeader, IModalBody, IModalFooter } from './types';
 declare function Modal({ children, isOpen, onClose, noClose, width, height, minHeight, fullScreen, animation }: IModal): JSX.Element;
-export default Modal;
+declare function ModalHeader({ children, className, title, intro, desc, hasBorder, hasBottomPadding }: IModalHeader): JSX.Element;
+declare function ModalBody({ children, className, style, backgroundColor, position, hasVerticalPadding, hasHorizontalPadding }: IModalBody): JSX.Element;
+declare function ModalFooter({ children, className, align, primaryAction, secondaryAction, hasBorder, }: IModalFooter): JSX.Element;
+export { Modal, ModalHeader, ModalBody, ModalFooter };

package/lib/esm/components/Modal/types.d.ts

@@ -4,10 +4,39 @@ interface IModal {
     isOpen: boolean;
     onClose?: (e: any) => any;
     noClose?: boolean;
-    width?: string;
-    height?: string;
-    minHeight?: string;
+    width?: number;
+    height?: number;
+    minHeight?: number;
     fullScreen?: boolean;
     animation?: string;
 }
-export { IModal };
+interface IModalHeader {
+    children?: React.ReactNode;
+    className?: string;
+    title?: React.ReactNode | string;
+    intro?: React.ReactNode | string;
+    desc?: React.ReactNode | string;
+    hasBorder?: boolean;
+    hasBottomPadding?: boolean;
+}
+interface IModalBody {
+    children?: React.ReactNode;
+    className?: string;
+    style?: object;
+    backgroundColor?: 'grey' | 'white';
+    position?: 'static' | 'relative';
+    hasVerticalPadding?: boolean;
+    hasHorizontalPadding?: boolean;
+}
+interface IModalFooter {
+    children?: React.ReactNode;
+    className?: string;
+    align?: 'left' | 'right';
+    primaryAction?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    hasBorder?: boolean;
+}
+interface IModalClose {
+    onClick?: (e: any) => any;
+}
+export { IModal, IModalHeader, IModalBody, IModalFooter, IModalClose };

package/lib/esm/components/Panel/types.d.ts

@@ -18,9 +18,9 @@ interface IPanelClose {
 interface IPanelHeader {
     children?: React.ReactNode;
     className?: string;
-    title?: string;
-    intro?: string;
-    desc?: string;
+    title?: React.ReactNode | string;
+    intro?: React.ReactNode | string;
+    desc?: React.ReactNode | string;
     hasClose?: boolean;
     hasBorder?: boolean;
     hasBottomPadding?: boolean;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+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'
+maxHeight, // For textarea autogrow
+maxWidth, }: ITextfield): JSX.Element;
+declare function TextfieldIcon({ icon, position }: ITextfieldIcon): JSX.Element;
+export { Textfield, TextfieldIcon };

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

@@ -0,0 +1,52 @@
+import React from "react";
+interface ITextfield {
+    value?: string | number;
+    name?: string;
+    type?: string;
+    placeholder?: string;
+    rows?: number;
+    min?: number;
+    max?: number;
+    onChange?: any;
+    onEnter?: any;
+    onFocus?: any;
+    onBlur?: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    selectOnFocus?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: boolean;
+    forceFocus?: boolean;
+    spellCheck?: boolean;
+    autogrow?: boolean;
+    label?: React.ReactNode | string;
+    labelTooltip?: string;
+    labelTooltipHTML?: any;
+    description?: React.ReactNode | string;
+    descriptionBottom?: React.ReactNode | string;
+    errorMessage?: React.ReactNode | string;
+    unit?: string;
+    append?: React.ReactNode;
+    prepend?: React.ReactNode;
+    icon?: string;
+    iconPosition?: 'before' | 'after';
+    className?: string;
+    labelClassName?: string;
+    blockClassName?: string;
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    horizontalSize?: 'm' | 's';
+    color?: 'white' | 'grey';
+    style?: 'ghost' | 'ghost_underline' | 'highlighted';
+    doBtnHug?: boolean;
+    textAlign?: 'left' | 'center' | 'right';
+    fullWidth?: boolean;
+    width?: 'auto' | 'full' | 'xl' | 'l' | 's' | 'xs' | 'xxs';
+    maxHeight?: number;
+    maxWidth?: number;
+}
+interface ITextfieldIcon {
+    icon?: string;
+    position?: 'before' | 'after';
+}
+export { ITextfield, ITextfieldIcon };

package/lib/esm/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ITooltip } from './types';
+declare function Tooltip({ text, html, id }: ITooltip): JSX.Element;
+export { Tooltip };

package/lib/esm/components/Tooltip/types.d.ts

@@ -0,0 +1,6 @@
+interface ITooltip {
+    text?: string | null;
+    html?: any;
+    id?: string;
+}
+export { ITooltip };

package/lib/esm/index.d.ts

@@ -3,16 +3,20 @@ import { Article } from './components/Article/Article';
 import { Btn } from './components/Btn/Btn';
 import { Checkbox, Radio, Switch, CheckboxList } from './components/Checkbox/Checkbox';
 import Collapse from './components/Collapse/Collapse';
+import { Confirm } from './components/Confirm/Confirm';
+import { Dropdown } from './components/Dropdown/Dropdown';
+import { Fieldset } from './components/Fieldset/Fieldset';
 import { IconBtn } from './components/IconBtn/IconBtn';
 import { List, ListItem } from './components/List/List';
+import { Listbox, ListboxItem, ListboxSep } from './components/Listbox/Listbox';
 import { Mask } from './components/Mask/Mask';
-import Modal from './components/Modal/Modal';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal/Modal';
 import { Panel, PanelClose, PanelHeader, PanelBody } from './components/Panel/Panel';
 import { Picto } from './components/Picto/Picto';
 import { Portal } from './components/Portal/Portal';
 import { Section } from './components/Section/Section';
 import { Spinner } from './components/Spinner/Spinner';
+import { Textfield, TextfieldIcon } from './components/Textfield/Textfield';
 declare const Theme: any;
 export { Theme, AppRoot, AppHeader, AppLinkWrapper, AppLogo, Article, Btn, Checkbox, CheckboxList, Collapse, // Not OK
-IconBtn, List, ListItem, Mask, Modal, // Not OK
-Panel, PanelClose, PanelHeader, PanelBody, Picto, Portal, Radio, Section, Spinner, Switch, };
+Confirm, Dropdown, Fieldset, IconBtn, List, ListItem, Listbox, ListboxItem, ListboxSep, Mask, Modal, ModalHeader, ModalBody, ModalFooter, Panel, PanelClose, PanelHeader, PanelBody, Picto, Portal, Radio, Section, Spinner, Switch, Textfield, TextfieldIcon };