venice-ui 2.4.12 → 3.0.1

package/dist/esm/components/Toogle/Toogle.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { mainTheme } from '../../Theme/Theme';
-import { ThemeProvider } from 'styled-components';
-import { Aligment } from '../Aligment';
-import { InputLabelElement, InputWrapper } from '../Input';
-import { ToogleElement, ToogleElementPoint, ToogleElementWrapper, } from './Toogle.styles';
-export const Toogle = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
-            React.createElement(InputWrapper, { width: width },
-                React.createElement(ToogleElementWrapper, { size: size },
-                    React.createElement(ToogleElement, { size: size, active: value, onClick: () => handleClick(!value) },
-                        React.createElement(ToogleElementPoint, { size: size, active: value })))),
-            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
-};

package/dist/esm/components/Toogle/Toogle.styles.js

@@ -1,36 +0,0 @@
-import { setToogleSize } from '../common';
-import styled from 'styled-components';
-export const ToogleElementWrapper = styled.div `
-  ${(p) => setToogleSize(p.size)}
-`;
-export const ToogleElementPoint = styled.div `
-  background-color: ${(p) => p.theme.inputDefaultBackground};
-  border-radius: 50%;
-  top: 0px;
-  height: ${(p) => (p.size === 'small' ? '18px' : '22px')};
-  width: ${(p) => (p.size === 'small' ? '18px' : '22px')};
-  transition: 300ms;
-  position: absolute;
-  ${(p) => p.active && `right:0px;`}
-  ${(p) => !p.active && `left:0px;`}
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-
-`;
-export const ToogleElement = styled.div `
-  position: relative;
-  box-sizing: border-box;
-  background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
-  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
-    inset 0 1px 2px rgba(0, 0, 0, 0.24);
-  height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
-  width: ${(p) => (p.size === 'small' ? '30px' : '40px')};
-  border-radius: ${(p) => (p.size === 'small' ? '10px' : '12px')};
-  ${(p) => p.size === 'small' && `margin:2px 0;`}
-`;

package/dist/esm/components/Toogle/index.js

@@ -1 +0,0 @@
-export * from './Toogle';

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import { TooltipPivot, TooltipWrapper } from './Tooltip.styles';
-export const Tooltip = ({ text, position, showBelow }) => {
-    return createPortal(React.createElement(TooltipWrapper, { position: position, showBelow: showBelow },
-        text,
-        React.createElement(TooltipPivot, { showBelow: showBelow })), document.body);
-};

package/dist/esm/components/Tooltip/Tooltip.styles.js

@@ -1,37 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Theme } from '../../Theme/Theme';
-export const TooltipWrapper = styled.div `
-  position: absolute;
-  top: ${(p) => (p.showBelow ? p.position.top + 8 : p.position.top - 36)}px;
-  left: ${(p) => p.position.left}px;
-  background: ${Theme.colors.darkGray};
-  color: ${Theme.colors.white};
-  padding: ${Theme.padding.s} ${Theme.padding.m};
-  border-radius: ${Theme.borderRadius.m};
-  font-size: ${Theme.fontSize.s};
-  z-index: 9999;
-  white-space: nowrap;
-  box-shadow: 0 2px 8px ${Theme.colors.overlayer};
-  pointer-events: none;
-`;
-export const TooltipPivot = styled.span `
-  position: absolute;
-  left: 18px;
-  transform: translateX(-50%);
-  width: 0;
-  height: 0;
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
-
-  ${({ showBelow }) => showBelow
-    ? css `
-          top: -7px;
-          border-bottom: 7px solid #222;
-          border-top: none;
-        `
-    : css `
-          bottom: -7px;
-          border-top: 7px solid #222;
-          border-bottom: none;
-        `}
-`;

package/dist/esm/components/Tooltip/index.js

@@ -1 +0,0 @@
-export * from './Tooltip';

package/dist/esm/components/Typography/Typography.styles.js

@@ -1,61 +0,0 @@
-import { setLabelFontSize } from '../common';
-import styled from 'styled-components';
-import { Theme } from '../../Theme/Theme';
-export const Text = styled.div `
-  font-size: ${Theme.fontSize.m};
-  line-height: ${Theme.lineHeight.m};
-  font-weight: normal;
-  color: ${(p) => p.isDisabled ? Theme.colors.gray_3 : p.color ? p.color : Theme.colors.text};
-  cursor: ${(p) => p.isDisabled ? 'not-allowed' : p.action ? 'pointer' : 'default'};
-  ${(p) => p.action &&
-    !p.isDisabled &&
-    `
-    :hover{
-    color:${Theme.colors.primary};
-    }
-    `}
-`;
-export const TextSmall = styled.div `
-  font-size: ${Theme.fontSize.s};
-  line-height: ${Theme.lineHeight.s};
-  font-weight: normal;
-  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
-  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-`;
-export const TextMicro = styled.div `
-  font-size: ${Theme.fontSize.xxs};
-  line-height: ${Theme.lineHeight.xs};
-  font-weight: normal;
-  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
-  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-`;
-export const TextHeader = styled.div `
-  font-size: ${Theme.fontSize.l};
-  line-height: ${Theme.lineHeight.l};
-  font-weight: 300;
-  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
-  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-`;
-export const TextSubHeader = styled.div `
-  font-size: ${Theme.fontSize.m};
-  line-height: ${Theme.lineHeight.m};
-  font-weight: 300;
-  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
-  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-`;
-export const TextAccent = styled.div `
-  font-size: ${Theme.fontSize.xs};
-  line-height: ${Theme.lineHeight.xs};
-  text-transform: uppercase;
-  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
-  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-`;
-export const TextLabel = styled.div `
-  font-weight: ${(p) => (p.labelPosition === 'left' ? 'normal' : 'bold')};
-  ${(p) => p.size && p.labelPosition === 'left'
-    ? setLabelFontSize(p.size)
-    : `
-  font-size: ${Theme.fontSize.s};
-  line-height: ${Theme.lineHeight.s};
-  `}
-`;

package/dist/esm/components/common/commonComponents.js

@@ -1,49 +0,0 @@
-import { lighten } from 'polished';
-import styled from 'styled-components';
-import { Theme } from '../../Theme/Theme';
-import { setPanelTop } from './inputStyles';
-export const Container = styled.div `
-  width: 100%;
-`;
-export const ScrollCotainer = styled.div `
-  width: 100%;
-  padding: ${Theme.padding.m} ${Theme.padding.l};
-  overflow: auto;
-  box-sizing: border-box;
-`;
-export const Panel = styled.div `
-  box-sizing: border-box;
-  background-color: ${Theme.colors.white};
-  box-shadow: ${Theme.shadow.m};
-  padding: ${Theme.padding.m} 0;
-  border-radius: ${Theme.borderRadius.m};
-  height: ${(p) => (p.height ? p.height : 'auto')};
-  width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
-  position: absolute;
-  z-index: ${(p) => (p.zIndex ? p.zIndex : Theme.zIndex.dropdown)};
-  top: ${(p) => setPanelTop(p.size)};
-  border: 1px solid ${Theme.colors.gray_2};
-  border-top: none;
-  min-width: 30px;
-  ${(p) => p.maxHeight &&
-    `
-  max-height: ${p.maxHeight};
-  overflow: auto;
-  
-  `}
-`;
-export const PanelOption = styled.div `
-  padding: ${Theme.padding.s} ${Theme.padding.m};
-  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
-  white-space: nowrap;
-  font-size: 16px;
-  color: ${(p) => p.active
-    ? Theme.colors.primary
-    : p.isDisabled
-        ? Theme.colors.gray_1
-        : Theme.colors.text};
-  :hover {
-    background-color: ${(p) => p.isDisabled ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
-  }
-  ${(p) => p.width && `width:${p.width};`}
-`;

package/dist/esm/components/common/index.js

@@ -1,2 +0,0 @@
-export * from './commonComponents';
-export * from './inputStyles';

package/dist/esm/components/common/inputStyles.js

@@ -1,261 +0,0 @@
-import { lighten } from 'polished';
-import { Theme, mainTheme } from '../../Theme';
-export const defaultStyles = `
-  box-sizing: border-box;
-  background-color: ${Theme.colors.white};
-  border: 1px solid ${Theme.colors.gray_2};
-  border-radius: ${Theme.borderRadius.m};
-  width: 100%;
-  font-family: "Lato", sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-`;
-export const sizes = {
-    small: `
-  font-size: ${Theme.fontSize.s};
-  line-height: ${Theme.lineHeight.s};
-  `,
-    medium: `
-  font-size: ${Theme.fontSize.m};
-  line-height: ${Theme.lineHeight.m};
-  `,
-    large: `
-  font-size: ${Theme.fontSize.l};
-  line-height: ${Theme.lineHeight.l};
-  `,
-};
-export const height = {
-    small: `
-  height: calc( ${Theme.lineHeight.s} + 2 * (${Theme.padding.s}) + 2px);
-  `,
-    medium: `
-  height: calc( ${Theme.lineHeight.m} + 2 * (${Theme.padding.m}) + 2px);
-
-  `,
-    large: `
-  height: calc( ${Theme.lineHeight.l} + 2 * (${Theme.padding.m}) + 2px);
-  `,
-};
-export const toogleSize = {
-    small: `
-  padding:1px 0px;
-  `,
-    medium: `
- padding:7px 0px;
-  `,
-    large: `
-  padding:10px 0px;
-  `,
-};
-export const inputPadding = {
-    small: `
-  padding: ${Theme.padding.s};
-  `,
-    medium: `
-  padding: ${Theme.padding.m};
-  `,
-    large: `
-  padding: ${Theme.padding.m};
-  `,
-};
-export const selectAreaPadding = {
-    small: `
-  padding: calc(${Theme.padding.s} - 2px) ${Theme.padding.s};
-  `,
-    medium: `
-  padding: calc(${Theme.padding.m} - 2px) ${Theme.padding.m};
-  `,
-    large: `
-  padding: calc(${Theme.padding.m} - 4px) ${Theme.padding.m};
-  `,
-};
-export const selectorPadding = {
-    small: `
-  padding: calc(${Theme.padding.s} ) 0px;
-  `,
-    medium: `
-  padding: calc(${Theme.padding.m} + 1px) 0px;
-  `,
-    large: `
-  padding: calc(${Theme.padding.m} ) 0px;
-  `,
-};
-export const inputPaddingWithPrefix = {
-    small: `
-  padding: ${Theme.padding.s};
-  padding-left: calc(2* ${Theme.padding.s} + 24px);
-  `,
-    medium: `
-  padding: ${Theme.padding.m};
-  padding-left: calc(2* ${Theme.padding.m} + 24px);
-  `,
-    large: `
-  padding: ${Theme.padding.m};
-  padding-left: calc(2* ${Theme.padding.m} + 24px);
-  `,
-};
-//TODO refactor this
-export const buttonPadding = {
-    small: `
-  padding: calc(${Theme.padding.s} + 1px ) ${Theme.padding.m};
-  `,
-    medium: `
-  padding: calc(${Theme.padding.m} + 1px ) ${Theme.padding.l};
-  `,
-    large: `
-  padding: calc(${Theme.padding.m} + 1px ) ${Theme.padding.l};
-  `,
-};
-//TODO refactor this
-export const buttonLoaderPadding = {
-    small: `
-  padding: ${Theme.padding.s};
-  `,
-    medium: `
-  padding: ${Theme.padding.m};
-  `,
-    large: `
-  padding: ${Theme.padding.m};
-  `,
-};
-export const buttonLoaderHeight = {
-    small: 'height: 16px;',
-    medium: 'height: 18px;',
-    large: 'height: 24px;',
-};
-export const eyeTopPosition = {
-    small: `top:-2px;`,
-    medium: `top: 3px;`,
-    large: `top: 7px;`,
-};
-export const setSize = (size) => {
-    return sizes[size] + inputPadding[size];
-};
-export const setSelecAreaSize = (size) => {
-    return sizes[size] + selectAreaPadding[size];
-};
-export const setSelectorSize = (size) => {
-    return sizes[size] + selectorPadding[size];
-};
-export const setFontSize = (size) => {
-    return sizes[size];
-};
-export const setSizeWithPrefix = (size) => {
-    return sizes[size] + inputPaddingWithPrefix[size];
-};
-export const setHeight = (size) => {
-    return height[size];
-};
-export const setButtonSize = (size, loader) => {
-    return (sizes[size] + (loader ? buttonLoaderPadding[size] : buttonPadding[size]));
-};
-export const setToogleSize = (size) => {
-    return toogleSize[size];
-};
-export const setButtonLoaderSize = (size) => {
-    return buttonLoaderHeight[size];
-};
-export const setEyeTopPosition = (size) => {
-    return eyeTopPosition[size];
-};
-export const inputColorSchema = {
-    default: `
-    border-color: ${mainTheme.action};
-    background-color: ${mainTheme.inputFocusBackground};
-  `,
-    disabled: `
-    border-color: ${Theme.colors.gray_1};
-    background-color: ${lighten(0.2, Theme.colors.gray_2)};
-    color:${Theme.colors.gray_1};
-  `,
-    error: `
-    border-color: ${Theme.colors.red};
-    background-color: ${mainTheme.errorBackgroundColorHoverLight};
-  `,
-};
-export const lableFontSize = {
-    small: `
-  line-height: ${Theme.lineHeight.s};
-  font-size: ${Theme.fontSize.s};
-  `,
-    medium: `
-  line-height: ${Theme.lineHeight.m};
-  font-size: ${Theme.fontSize.m};`,
-    large: `
-  line-height: ${Theme.lineHeight.m};
-  font-size: ${Theme.fontSize.l};
-  `,
-};
-export const setLabelFontSize = (size) => {
-    return lableFontSize[size];
-};
-export const iconSize = {
-    small: 18,
-    medium: 28,
-    large: 34,
-};
-export const iconShiftSize = {
-    small: 12,
-    medium: 16,
-    large: 24,
-};
-export const setIconSize = (size) => {
-    return iconSize[size];
-};
-export const setIconShiftSize = (size) => {
-    return iconShiftSize[size];
-};
-export const panelTop = {
-    small: '26px',
-    medium: '36px',
-    large: '42px',
-};
-export const setPanelTop = (size) => {
-    return panelTop[size];
-};
-export const fieldHeight = {
-    small: '26px',
-    medium: '36px',
-    large: '42px',
-};
-export const setFieldHeight = (size) => {
-    return fieldHeight[size];
-};
-export const animationParams = {
-    small: {
-        width: '40px',
-        itemSize: '7px',
-        itemOne: '4px',
-        itemTwo: '4px',
-        itemThree: '16px',
-        itemFour: '28px',
-        move: '12px',
-        duration: '0.6s',
-    },
-    medium: {
-        width: '80px',
-        itemSize: '13px',
-        itemOne: '8px',
-        itemTwo: '8px',
-        itemThree: '32px',
-        itemFour: '56px',
-        move: '24px',
-        duration: '0.6s',
-    },
-    large: {
-        width: '160px',
-        itemSize: '26px',
-        itemOne: '16px',
-        itemTwo: '16px',
-        itemThree: '64px',
-        itemFour: '112px',
-        move: '48px',
-        duration: '0.6s',
-    },
-};
-export const setAnimationParams = (size) => {
-    return animationParams[size];
-};

package/dist/esm/docs/Overview.js

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { Input } from '../components/Input';
-import { ExampleArea, ExampleAreaTitle, ExampleItem } from '../example';
-import { Button } from '../components/Button';
-import { Dropdown } from '../components/Dropdown';
-import { Selector } from '../components/Selector';
-import { DropdownMenu } from '../components/DropdownMenu';
-import { Aligment } from '../components/Aligment';
-export const Overview = ({ sectionName, size, labelPosition, }) => {
-    const [data, setData] = useState({
-        input: 'my text',
-        dropdown: '',
-        selector1: 'test_01',
-        selector2: '',
-    });
-    const onChange = (name, value) => {
-        setData({
-            ...data,
-            [name]: value,
-        });
-    };
-    const onClick = () => {
-        alert('button click');
-    };
-    const handleClear1 = () => {
-        setData({
-            ...data,
-            selector1: '',
-        });
-    };
-    const handleClear2 = () => {
-        setData({
-            ...data,
-            selector2: '',
-        });
-    };
-    return (React.createElement(Aligment, { gap: 20, direction: 'column', align: 'stretch', justify: 'space-between' },
-        React.createElement(ExampleAreaTitle, null, sectionName),
-        React.createElement(ExampleArea, null,
-            React.createElement(ExampleItem, null,
-                React.createElement(Input, { value: data.input, size: size, label: "Input", name: "input", handleChange: onChange, labelPosition: labelPosition })),
-            React.createElement(ExampleItem, null,
-                React.createElement(Button, { size: size, text: "Button", onClick: onClick })),
-            React.createElement(ExampleItem, null,
-                React.createElement(Dropdown, { size: size, label: "Dropdown", labelPosition: labelPosition, handleSelect: onChange, name: "dropdown", value: data.dropdown, options: [
-                        { value: 'test_01', label: 'test 01' },
-                        { value: 'test_02', label: 'test 02' },
-                    ] })),
-            React.createElement(ExampleItem, null,
-                React.createElement(Selector, { labelPosition: labelPosition, size: size, label: "Selected selector", value: data.selector1, handleSelect: onChange, handleClear: handleClear1, name: "selector1", options: [
-                        { value: 'test_01', label: 'test 01' },
-                        { value: 'test_02', label: 'test 02' },
-                    ] })),
-            React.createElement(ExampleItem, null,
-                React.createElement(Selector, { handleSelect: onChange, handleClear: handleClear2, name: "selector2", value: data.selector2, labelPosition: labelPosition, size: size, label: "Selector", options: [
-                        { value: 'test_01', label: 'test 01' },
-                        { value: 'test_02', label: 'test 02' },
-                    ] })),
-            React.createElement(ExampleItem, null,
-                React.createElement(DropdownMenu, { size: size, options: [
-                        { action: () => alert('action one'), label: 'action one' },
-                        { action: () => alert('action two'), label: 'action two' },
-                    ] })))));
-};

package/dist/types/Theme/Theme.d.ts

@@ -1,116 +0,0 @@
-export declare const pallete: {
-    primary: string;
-    accent: string;
-};
-export declare const Theme: {
-    colors: {
-        primary: string;
-        primary_40: string;
-        primary_30: string;
-        primary_20: string;
-        primary_10: string;
-        accent: string;
-        accent_light: string;
-        black: string;
-        text: string;
-        darkGray: string;
-        gray_1: string;
-        gray_2: string;
-        gray_3: string;
-        gray_4: string;
-        white: string;
-        overlayer: string;
-        red: string;
-        orange: string;
-        green: string;
-    };
-    fontSize: {
-        xxs: string;
-        xs: string;
-        s: string;
-        m: string;
-        l: string;
-        xl: string;
-    };
-    lineHeight: {
-        xxs: string;
-        xs: string;
-        s: string;
-        m: string;
-        l: string;
-        xl: string;
-    };
-    padding: {
-        xs: string;
-        s: string;
-        m: string;
-        l: string;
-        xl: string;
-        xxl: string;
-    };
-    zIndex: {
-        modalOverlayer: number;
-        dropdown: number;
-    };
-    borderRadius: {
-        s: string;
-        m: string;
-        l: string;
-    };
-    shadow: {
-        s: string;
-        m: string;
-    };
-};
-export declare const mainTheme: {
-    action: string;
-    buttonText: string;
-    buttonPrimaryHover: string;
-    buttonSecondaryHover: string;
-    buttonInverseHover: string;
-    disabledBackground: string;
-    disabledText: string;
-    errorBackgroundColor: string;
-    errorBackgroundColorHover: string;
-    errorBackgroundColorHoverLight: string;
-    iconColor: string;
-    iconHoverColor: string;
-    iconBgColor: string;
-    iconDisabledColor: string;
-    iconBgHoverColor: string;
-    textColor: string;
-    inputDefaultBackground: string;
-    inputDefaultBorder: string;
-    inputDefaultTextColor: string;
-    inputFocusBackground: string;
-    inputFocusBorder: string;
-    inputFocusTextColor: string;
-    inputDisabledBackground: string;
-    inputDisabledBorder: string;
-    inputDisabledTextColor: string;
-    inputErrorBackground: string;
-    inputErrorBorder: string;
-    inputErrorTextColor: string;
-    contentBackground: string;
-    optionActiveColor: string;
-    optionColor: string;
-    optionHoverBackground: string;
-    selector: string;
-    tableBorderColor: string;
-    tableHeaderBackground: string;
-    tableHeaderActive: string;
-    tableCellBackground: string;
-    tableCellEvenBackground: string;
-    tableCellHoverBackground: string;
-    tableCellActiveBackground: string;
-    tableCellSortIconActive: string;
-    tableCellSortIcon: string;
-    tableMoreIconColor: string;
-    tableHoverMoreIconColor: string;
-    chipsNeutralBackground: string;
-    chipsNeutralTextColor: string;
-    chipsNeutralHoverBackground: string;
-    toogleBackgrund: string;
-    toogleActiveBackgorund: string;
-    checkColor: string;
-};

package/dist/types/Theme/index.d.ts

@@ -1 +0,0 @@
-export * from './Theme';

package/dist/types/components/ButtonsFooter/ButtonsFooter.style.d.ts

@@ -1 +0,0 @@
-export declare const ButtonsFooterGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/types/components/Chips/Chips.d.ts

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-interface IChipsProps {
-    theme?: any;
-    label: string;
-    handleClose: () => void;
-}
-export declare const Chips: FC<IChipsProps>;
-export {};

package/dist/types/components/Chips/Chips.styles.d.ts

@@ -1,6 +0,0 @@
-interface IChipsElementProps {
-    theme: any;
-}
-export declare const ChipsElement: import("styled-components").StyledComponent<"div", any, IChipsElementProps, never>;
-export declare const ChipsLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/dist/types/components/Chips/index.d.ts

@@ -1 +0,0 @@
-export * from './Chips';