ui-beyable 1.0.44 → 1.1.0-beta.1

package/README.md

@@ -55,7 +55,12 @@ Pre publish
 npm run prepublishOnly 
 ```
 
-To publish the module to NPM : 
+To connect to NPM:
+```bash
+npm login
+```
+
+To publish the module to NPM: 
 ```bash
 npm publish
 ```

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { spaceType } from '../Tokens/Tokens';
+interface BoxType {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    padding?: spaceType;
+    paddingBlock?: spaceType;
+    paddingBlockStart?: spaceType;
+    paddingBlockEnd?: spaceType;
+    paddingInline?: spaceType;
+    paddingInlineStart?: spaceType;
+    paddingInlineEnd?: spaceType;
+}
+declare function Box({ children, className, style, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, }: BoxType): JSX.Element;
+export { Box, BoxType };

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ContainerType {
+    children: React.ReactNode;
+    width?: 'full' | 'x' | 'l' | 'm' | 'ms' | 's' | 'xs' | 'xxs';
+}
+declare function Container({ children, width, }: ContainerType): JSX.Element;
+export { Container };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface EditorHeaderType {
+    left?: React.ReactNode;
+    leftTitle?: string | React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+    hasBorder?: boolean;
+    hasBackButton?: boolean;
+    backTitle?: string;
+    backOnClick?: (ev: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+declare function EditorHeader({ left, leftTitle, center, right, hasBorder, hasBackButton, backTitle, backOnClick }: EditorHeaderType): JSX.Element;
+export { EditorHeader };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { spaceType } from '../Tokens/Tokens';
+interface HrType {
+    className?: string;
+    margin?: spaceType;
+    style?: React.CSSProperties;
+}
+declare function Hr({ margin, className, style }: HrType): JSX.Element;
+export { Hr };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { spaceType } from '../Tokens/Tokens';
+type alignType = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+type justifyType = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+type flexType = 'none' | 'auto' | 'shrink' | 'grow';
+type growType = 'hug' | 'fill';
+interface InlineType {
+    children?: React.ReactNode;
+    className?: string;
+    gap?: spaceType;
+    shouldWrap?: boolean;
+    align?: alignType;
+    justify?: justifyType;
+    grow?: growType;
+    style?: React.CSSProperties;
+}
+interface InlineColumnType {
+    children?: React.ReactNode;
+    className?: string;
+    align?: alignType | '';
+    flex?: flexType;
+    style?: React.CSSProperties;
+}
+declare function Inline({ children, className, gap, shouldWrap, align, justify, grow, style }: InlineType): JSX.Element;
+declare function InlineColumn({ children, className, align, flex, style }: InlineColumnType): JSX.Element;
+export { Inline, InlineColumn };

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { spaceType } from '../Tokens/Tokens';
+type alignInlineType = 'stretch' | 'start' | 'center' | 'end';
+type flexType = 'none' | 'auto' | 'shrink' | 'grow';
+interface StackType {
+    children?: React.ReactNode;
+    className?: string;
+    gap?: spaceType;
+    shouldWrap?: boolean;
+    alignInline?: alignInlineType;
+}
+interface StackRowType {
+    children?: React.ReactNode;
+    className?: string;
+    flex?: flexType;
+}
+declare function Stack({ children, className, gap, alignInline }: StackType): JSX.Element;
+declare function StackRow({ children, className, flex }: StackRowType): JSX.Element;
+export { Stack, StackRow };

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

@@ -0,0 +1,4 @@
+type spaceType = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'space.negative.100' | 'space.negative.150' | 'space.negative.200';
+type tokenType = spaceType;
+declare const token: (token: tokenType) => string;
+export { spaceType, token };

package/lib/cjs/index.d.ts

@@ -1,13 +1,19 @@
 import { AppRoot, AppHeader, AppLinkWrapper, AppLogo } from './components/App/App';
 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 { Checkbox, Radio, Switch, CheckboxList } from './components/Checkbox/Checkbox';
 import Collapse from './components/Collapse/Collapse';
 import { Confirm } from './components/Confirm/Confirm';
+import { Container } from './components/Container/Container';
 import { Dropdown, DropdownSection } from './components/Dropdown/Dropdown';
+import { EditorHeader } from './components/EditorHeader/EditorHeader';
 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 { KpiList, KpiItem } from './components/Kpi/Kpi';
 import { List, ListItem } from './components/List/List';
 import { Listbox, ListboxItem, ListboxSep } from './components/Listbox/Listbox';
@@ -17,11 +23,13 @@ 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 { Section } from './components/Section/Section';
 import { Select } from './components/Select/Select';
 import { Spinner } from './components/Spinner/Spinner';
 import { TabBar, TabItem } from './components/Tabs/Tabs';
 import { Textfield, TextfieldIcon, SearchBar } from './components/Textfield/Textfield';
 declare const Theme: any;
-export { Theme, AppRoot, AppHeader, AppLinkWrapper, AppLogo, Article, ArticleFoldable, Btn, BtnGroup, Checkbox, CheckboxList, Collapse, // Not OK, use ArticleFoldable instead
-Confirm, Dropdown, DropdownSection, EmptyState, Fieldset, IconBtn, KpiList, KpiItem, List, ListItem, Listbox, ListboxItem, ListboxSep, Mask, Message, Modal, ModalHeader, ModalBody, ModalFooter, Panel, PanelClose, PanelHeader, PanelBody, PanelSection, Picto, Portal, Radio, SearchBar, Section, Select, Spinner, Switch, TabBar, TabItem, Textfield, TextfieldIcon };
+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, };