venice-ui 2.4.12 → 3.0.1

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

@@ -1,81 +1,61 @@
-import { setButtonLoaderSize, setButtonSize } from '../common';
 import styled from 'styled-components';
-import { Theme } from '../../Theme/Theme';
-export const ButtonElement = styled.button `
-  align-items: center;
-  border-radius: ${Theme.borderRadius.m};
+const buildVariantStyles = (variant, isActive, isDisabled, hasBorder = false) => {
+    const bg = isDisabled
+        ? variant.disabledBackground
+        : isActive
+            ? variant.backgroundActive
+            : variant.background;
+    const color = isDisabled ? variant.disabledText : variant.text;
+    const border = hasBorder
+        ? `border: 1px solid ${isDisabled ? variant.disabledBorder : variant.border};`
+        : 'border: none;';
+    return `
+    background-color: ${bg};
+    color: ${color};
+    ${border}
+    :hover {
+      background-color: ${variant.backgroundHover};
+    }
+  `;
+};
+export const ButtonRoot = styled.div `
   box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 1;
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
-  margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
-  overflow: hidden;
-  transition: 300ms;
   white-space: nowrap;
-  ${(p) => setButtonSize(p.size, p.loader)}
-  ${(p) => p.mode === 'primary' &&
-    `background-color: ${p.theme.action};
-    border: none;
-    color: ${p.theme.buttonText};
-    &:disabled{
-      color: ${p.theme.disabledText};
-      background-color: ${p.theme.disabledBackground};
-    }
-  ${p.errorVariant &&
-        `background-color:${p.theme.errorBackgroundColor};
-      border:none;`}
-    `}
+  flex-shrink: 0;
+  width: auto;
+  min-width: ${({ config, size }) => config.sizes[size].minWidth}px;
+  height: ${({ config, size }) => config.sizes[size].height}px;
+  font-size: ${({ config, size }) => config.sizes[size].fontSize}px;
+  line-height: ${({ config, size }) => config.sizes[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.sizes[size].paddingX}px;
+  border-radius: ${({ config, size }) => config.sizes[size].radius}px;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
+  transition: background-color 300ms, color 300ms, border-color 300ms;
 
-  ${(p) => p.mode === 'secondary' &&
-    `background-color: transparent;
-    border: none;
-    color: ${p.theme.action};
-    &:disabled{
-      color: ${p.theme.disabledText};
-    }
-    ${p.errorVariant &&
-        `color:${p.theme.errorBackgroundColor};
-      border:none;`}
+  ${({ config, mode, isActive, isDisabled }) => mode === 'primary' && buildVariantStyles(config.variants.primary, isActive, isDisabled)}
 
-    
-    `}
+  ${({ config, mode, isActive, isDisabled }) => mode === 'secondary' &&
+    buildVariantStyles(config.variants.secondary, isActive, isDisabled, true)}
 
-  &:hover {
-    transition: 300ms;
-    ${(p) => p.mode === 'primary' &&
-    `background-color: ${p.theme.buttonPrimaryHover};
-      &:disabled {
-        background-color: ${p.theme.disabledBackground};
-      }
-      ${p.errorVariant &&
-        `background-color:${p.theme.errorBackgroundColorHover};
-        `}
-      `}
+  ${({ config, mode, isActive, isDisabled }) => mode === 'ghost' && buildVariantStyles(config.variants.ghost, isActive, isDisabled)}
 
-    ${(p) => p.mode === 'secondary' &&
-    `background-color: ${p.theme.buttonSecondaryHover};
-      &:disabled {
-        background-color: transparent;
-      }
-      ${p.errorVariant &&
-        `background-color:${p.theme.errorBackgroundColorHoverLight};`}
+  ${({ config, mode, isActive, isDisabled }) => mode === 'danger' && buildVariantStyles(config.variants.danger, isActive, isDisabled)}
 
-      &:disabled {
-        background-color: transparent;
-      }`};
+  &:hover {
+    transition: background-color 300ms, color 300ms, border-color 300ms;
   }
 
-  &:disabled {
-    cursor: not-allowed;
-  }
   &:focus {
     outline: none;
   }
 `;
-export const ButtonLoader = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  ${(p) => setButtonLoaderSize(p.size)}
+export const ButtonContent = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 `;

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

@@ -1 +1 @@
-export { Button } from './Button';
+export * from './Button';

package/dist/esm/components/ButtonsFooter/ButtonsFooter.js

@@ -1,31 +1,42 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React from 'react';
-import { Theme } from '../../Theme/Theme';
+import { ButtonsFooterGroup, ButtonsFooterRoot } from './ButtonsFooter.styles';
+import { wordbook } from '../../config';
 import { Button } from '../Button';
+import { Toggle } from '../Toggle';
 import { Aligment } from '../Aligment';
-import { ButtonsFooterGroup } from './ButtonsFooter.style';
-import { Toogle } from '../Toogle';
-export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = 'Close', labelAdditional, submitDisabled, submitLoader, backgroundColor = 'transparent', additionalType = 'button', additionalValue = false, additionaNormalMode = false, additionDisabled = false, }) => {
-    const isAdditional = () => {
-        return labelAdditional !== undefined && handleAdditional !== undefined;
-    };
-    const isMultiButtons = () => {
-        return handleConfirm !== undefined && labelConfirm !== undefined;
-    };
+import { ThemeProvider } from 'styled-components';
+export const ButtonsFooter = ({ theme, themeVariant, onPrimaryAction, onSecondaryAction, onAdditionalAction, primaryDisabled, primaryLoading, additionalType = 'button', additionalValue = false, isAdditionalDanger = false, additionDisabled = false, size = 'md', labels = {
+    primary: wordbook.actions.confirm, //labelConfirm
+    secondary: wordbook.actions.cancel, //labelClose
+    additional: undefined //labelAdditional
+} }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const buttonsFooterConfig = componentsConfig.buttonsFooter;
+    const hasAdditional = labels.additional !== undefined && onAdditionalAction !== undefined;
+    const isMultiButtons = onPrimaryAction !== undefined && labels.primary !== undefined;
     const additionAction = () => {
-        if (handleAdditional) {
-            if (additionalType === 'toogle' && additionalValue) {
-                handleAdditional(!additionalValue);
+        if (onAdditionalAction) {
+            if (additionalType === 'toggle') {
+                onAdditionalAction(!additionalValue);
             }
             else {
-                handleAdditional();
+                onAdditionalAction();
             }
         }
     };
-    return (React.createElement(Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l, backgroundColor: backgroundColor },
-        labelAdditional && handleAdditional && (React.createElement(ButtonsFooterGroup, null, !submitLoader && (React.createElement(React.Fragment, null,
-            additionalType === 'button' && (React.createElement(Button, { errorVariant: !additionaNormalMode, mode: "secondary", onClick: additionAction, text: labelAdditional, left: isMultiButtons(), disabled: additionDisabled })),
-            additionalType === 'toogle' && (React.createElement(Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
-        React.createElement(ButtonsFooterGroup, null,
-            !submitLoader && (React.createElement(Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() })),
-            handleConfirm && labelConfirm && (React.createElement(Button, { onClick: handleConfirm, text: labelConfirm, disabled: submitDisabled, loader: submitLoader })))));
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(ButtonsFooterRoot, { hasAdditional: hasAdditional, config: buttonsFooterConfig, theme: resolvedTheme },
+            React.createElement(Aligment, { justify: hasAdditional ? 'space-between' : 'flex-end', vPadding: String(buttonsFooterConfig.layout.paddingY + 'px'), hPadding: String(buttonsFooterConfig.layout.paddingX + 'px') },
+                labels.additional && onAdditionalAction && (React.createElement(ButtonsFooterGroup, { config: buttonsFooterConfig, theme: resolvedTheme }, !primaryLoading && (React.createElement(React.Fragment, null,
+                    additionalType === 'button' && (React.createElement(Button, { mode: isAdditionalDanger ? 'danger' : 'ghost', onClick: additionAction, isDisabled: additionDisabled, text: labels.additional, size: size })),
+                    additionalType === 'toggle' && (React.createElement(Toggle, { label: labels.additional, value: additionalValue, handleClick: additionAction, labelPosition: "left", labelInversed: true, size: size })))))),
+                React.createElement(ButtonsFooterGroup, { config: buttonsFooterConfig, theme: resolvedTheme },
+                    !primaryLoading && (React.createElement(Button, { mode: isMultiButtons ? 'ghost' : 'primary', onClick: onSecondaryAction, text: labels.secondary || wordbook.actions.cancel, size: size })),
+                    onPrimaryAction && labels.primary && (React.createElement(Button, { onClick: onPrimaryAction, text: labels.primary, isDisabled: primaryDisabled, loader: primaryLoading, size: size })))))));
 };

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+export const ButtonsFooterRoot = styled.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: ${({ config }) => config.layout.minHeight}px;
+  background-color: ${({ config, theme }) => config.color.background};
+  border-top: 1px solid ${({ config }) => config.color.topBorder};
+  gap: ${({ config }) => config.gap.actions}px;
+  box-sizing: border-box;
+`;
+export const ButtonsFooterGroup = styled.div `
+  gap: ${({ config }) => config.gap.actions}px;
+  display: flex;
+`;

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

@@ -1 +1 @@
-export { ButtonsFooter } from './ButtonsFooter';
+export * from './ButtonsFooter';

package/dist/esm/components/Card/Card.js

@@ -1,12 +1,18 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React from 'react';
-import { CardContent, CardElement } from './Card.styles';
-import { ElementHeader } from '../ElementHeader';
-import { mainTheme } from '../../Theme';
-export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, customHeader, }) => {
-    const hasHeader = !!title || !!actionLabel || !!customHeader;
-    return (React.createElement(CardElement, { height: height, shadow: shadow },
-        customHeader
-            ? customHeader
-            : (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
-        React.createElement(CardContent, { soloMode: !hasHeader }, children)));
+import { CardContent, CardRoot } from './Card.styles';
+import { Header } from '../Header';
+import { ThemeProvider } from 'styled-components';
+export const Card = ({ theme, themeVariant = 'default', title, actionLabel, children, customHeader, headerDivader, actionDisabled, handleClick, handleBack, height, options, shadow, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const headerConfig = componentsConfig.card;
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(CardRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig },
+            (title || actionLabel) && (React.createElement(Header, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, bottomDivader: headerDivader, actionDisabled: actionDisabled, themeVariant: themeVariant, header: customHeader })),
+            React.createElement(CardContent, { theme: resolvedTheme, config: headerConfig }, children))));
 };

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

@@ -1,22 +1,21 @@
 import styled from 'styled-components';
-import { Theme } from '../../Theme/Theme';
-export const CardElement = styled.div `
+export const CardRoot = styled.div `
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: ${Theme.colors.white};
-  border-radius: ${Theme.borderRadius.m};
+  background-color: ${({ config }) => config.color.background};
+  border-radius: ${({ config }) => config.size.borderRadius};
   height: ${(p) => (p.height ? p.height : '100%')};
-  ${(p) => p.shadow && `box-shadow: ${Theme.shadow.s};`}
+  ${(p) => p.shadow && `box-shadow: ${p.config.color.shadow};`}
+
 `;
 export const CardContent = styled.div `
   box-sizing: border-box;
   display: flex;
-  padding: ${Theme.padding.l};
+  padding: ${({ config }) => config.size.paddingY}px
+    ${({ config }) => config.size.paddingX}px;
   width: 100%;
   flex-direction: row;
-  ${(p) => !p.soloMode &&
-    `
-  padding-top:0px;`}
+
 `;

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

@@ -1 +1 @@
-export { Card } from './Card';
+export * from './Card';

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,16 +1,33 @@
 import React from 'react';
-import { mainTheme } from '../../Theme/Theme';
-import { ThemeProvider } from 'styled-components';
-import { Aligment } from '../Aligment';
-import { InputLabelElement, InputWrapper } from '../Input';
-import { CheckboxElement, CheckoxIcon, ToogleCheckboxWrapper, } from './Checkbox.styles';
-import { Icon } from '../Icons';
-export const Checkbox = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', isIntermedian = false, handleClick, }) => {
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
-            React.createElement(InputWrapper, { width: width },
-                React.createElement(ToogleCheckboxWrapper, { size: size },
-                    React.createElement(CheckboxElement, { size: size, active: value || isIntermedian, onClick: () => handleClick(!value) }, (value || isIntermedian) && (React.createElement(CheckoxIcon, null,
-                        React.createElement(Icon, { name: isIntermedian ? "remove" : 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
-            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition, wrapLabel: labelPosition === 'left' }, label)))));
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { ComponentRoot } from '../ComponentRoot';
+import { CheckboxBox, CheckboxRoot } from './Checkbox.styles';
+import { iconsPath } from '../Icon/IconsPath';
+export const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const checkboxConfig = componentsConfig.checkbox;
+    const resolvedSize = typeof size === 'number'
+        ? { iconSize: size, padding: 0 }
+        : checkboxConfig.size[size] ?? checkboxConfig.size.md;
+    const iconName = isIntermedian ? iconsPath['remove'] : iconsPath['check'];
+    const onClick = () => {
+        if (!isDisabled) {
+            handleClick(!value);
+        }
+    };
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true },
+        React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
+            React.createElement(CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (React.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+                React.createElement("path", { d: iconName, fill: isDisabled
+                        ? checkboxConfig.color.disabled.icon
+                        : isIntermedian
+                            ? checkboxConfig.color.intermedian.icon
+                            : value
+                                ? checkboxConfig.color.focus.icon
+                                : checkboxConfig.color.default.icon })))))));
 };

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

@@ -1,30 +1,45 @@
-import { setToogleSize } from '../common';
 import styled from 'styled-components';
-import { Theme } from '../../Theme';
-export const ToogleCheckboxWrapper = styled.div `
-  ${(p) => setToogleSize(p.size)}
-`;
-export const CheckoxIcon = styled.div `
+export const CheckboxRoot = styled.div `
   display: flex;
+  align-items: center;
+  justify-content: start-flex;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
 `;
-export const CheckboxElement = styled.div `
+export const CheckboxBox = styled.div `
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
+  height: ${({ theme, config, size }) => config.size[size].height}px;
+  width: ${({ theme, config, size }) => config.size[size].width}px;
   border: 1px solid
-    ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.inputDefaultBorder};
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
+    ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
+    ? config.color.disabled.boxBorder
+    : isIntermedian
+        ? config.color.intermedian.boxBorder
+        : isActive
+            ? config.color.focus.boxBorder
+            : config.color.default.boxBorder};
+  background: ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
+    ? config.color.disabled.boxBackground
+    : isIntermedian ?
+        config.color.intermedian.boxBackground
+        : isActive
+            ? config.color.focus.boxBackground
+            : config.color.default.background};
+  border-radius: ${({ config, size }) => config.size[size].radius}px;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  :hover{
+    border-color: ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
+    ? config.color.disabled.boxBorder
+    : isIntermedian
+        ? config.color.intermedian.boxBorder
+        : isActive
+            ? config.color.focus.boxBorder
+            : config.color.hover.boxBorder};
 
-  height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
-  width: ${(p) => (p.size === 'small' ? '20px' : '24px')};
-  border-radius: ${Theme.borderRadius.m};
-  ${(p) => p.size === 'small' && `margin:2px 0;`}
+  }
 `;

package/dist/esm/components/ComponentRoot/ComponentRoot.js

@@ -0,0 +1,20 @@
+import { Aligment } from '../Aligment';
+import { HelperText } from '../HelperText';
+import { Label } from '../Label';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { ComponentWrapper } from './ComponentRoot.styles';
+export const ComponentRoot = ({ theme, themeVariant = 'default', label, labelPosition = 'top', size = 'md', width, disabled = false, error = false, readOnly = false, required = false, optional = false, optionalLabel, helperText, componentConfig, children, isActive = false, labelInversed = false, smallSize = false, noBorder = false, noBreakLabel, componentWidth = 'auto' }) => {
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Aligment, { align: 'flex-start', direction: labelPosition === 'top'
+                ? 'column'
+                : labelInversed
+                    ? 'row-reverse'
+                    : 'row', justify: labelInversed && labelPosition === 'left'
+                ? 'flex-end'
+                : 'flex-start', wrap: 'nowrap', gap: 4, width: width ? width : labelInversed ? 'auto' : '100%' },
+            label && (React.createElement(Label, { text: label, size: size, position: labelPosition, required: required, optional: optional, optionalLabel: optionalLabel, smallSize: smallSize, noBreakLabel: noBreakLabel })),
+            React.createElement(Aligment, { direction: 'column', align: 'flex-start', gap: 4, wrap: 'nowrap', width: width ? width : labelInversed ? 'auto' : '100%' },
+                React.createElement(ComponentWrapper, { inputSize: size, width: componentWidth, theme: theme, inputConfig: componentConfig, error: error, isActive: isActive, disabled: disabled, readOnly: readOnly, labelInversed: labelInversed, noBorder: noBorder }, children),
+                helperText && !labelInversed && (React.createElement(HelperText, { helperText: helperText, mode: error ? 'error' : 'default', theme: theme, themeVariant: themeVariant, disabled: disabled }))))));
+};

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

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+export const ComponentWrapper = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+  width: ${({ width, labelInversed }) => width ? width : labelInversed ? 'auto' : '100%'};
+  height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
+  border: 1px solid
+    ${({ theme, inputConfig }) => inputConfig.color.default.border};
+  ${({ noBorder }) => noBorder && 'border: none;'}
+  background: ${({ theme, inputConfig }) => inputConfig.color.default.background};
+  border-radius: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].radius}px;
+
+  ${({ disabled, error, readOnly, inputConfig, isActive }) => !disabled &&
+    !error &&
+    !readOnly &&
+    `
+    &:hover {
+      border-color: ${isActive
+        ? inputConfig.color.focus.border
+        : inputConfig.color.hover.border};
+      background: ${inputConfig.color.hover.background};
+    }
+    `}
+  ${({ readOnly, inputConfig, isActive }) => !readOnly &&
+    `
+    &:focus-within {
+        border-color: ${inputConfig.color.focus.border};
+        box-shadow: 0 0 0 3px
+            ${inputConfig.color.focus.shadow};
+        background: ${inputConfig.color.focus.background};
+    }
+  ${isActive &&
+        !readOnly &&
+        `
+      border-color: ${inputConfig.color.focus.border};
+      box-shadow: 0 0 0 3px ${inputConfig.color.focus.shadow};
+      background: ${inputConfig.color.focus.background};
+  `}
+`}
+  ${({ error, theme, inputConfig }) => error &&
+    `
+    border-color: ${inputConfig.color.error.border};
+    `}
+
+  ${({ disabled, theme, inputConfig, isActive }) => disabled &&
+    `
+    background: ${isActive
+        ? inputConfig.color.disabled.backgroundActive
+        : inputConfig.color.disabled.background};
+    border-color: ${inputConfig.color.disabled.border};  
+    color: ${inputConfig.color.disabled.text};
+    cursor: ${inputConfig.color.disabled.cursor};
+    `}
+    ${({ readOnly, theme, inputConfig }) => readOnly &&
+    `
+    background: ${inputConfig.color.readonly.bg};
+    color: ${inputConfig.color.readonly.text};
+    border-color: transparent;
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+    border-radius: 0;
+
+    `}
+`;

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

@@ -0,0 +1,2 @@
+export * from './ComponentRoot';
+export * from './ComponentRoot.styles';

package/dist/esm/components/DatePicker/Calendar.js

@@ -1,24 +1,12 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { CalendarOverlay, CalendarWrapper } from './DatePiocker.styles';
+import { CalendarOverlayer, CalendarRoot } from './DatePicker.styles';
+import { addMonths, addYears, getTime, getYear, subMonths, subYears, } from 'date-fns';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Aligment } from '../Aligment';
+import { ThemeProvider } from 'styled-components';
 import { CalendarHeader } from './CalendarHeader';
-import { addMonths, addYears, getTime, getYear, subMonths, subYears, } from 'date-fns';
-import { CalendarContent } from './CalendarContent';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance = false, autoConfirm: autoConfirmProp, labels = { close: 'Close', confirm: 'Select', today: 'Today' }, localeLabels, zIndex }) => {
-    const defaultLocale = {
-        months: [
-            'January', 'February', 'March', 'April', 'May', 'June',
-            'July', 'August', 'September', 'October', 'November', 'December'
-        ],
-        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        firstDayOfWeek: 0,
-    };
-    const effectiveLocale = {
-        months: (localeLabels && localeLabels.months) || defaultLocale.months,
-        weekdaysShort: (localeLabels && localeLabels.weekdaysShort) || defaultLocale.weekdaysShort,
-        firstDayOfWeek: (localeLabels && typeof localeLabels.firstDayOfWeek === 'number') ? localeLabels.firstDayOfWeek : defaultLocale.firstDayOfWeek,
-    };
+import { CalendarContent } from './CalendarContent';
+export const Calendar = ({ theme, themeVariant = 'default', value, top, left, triggerTop, localeLabels, handleClose, handleSelect, isAdvance = true, autoConfirm = false, zIndex, config, labels, }) => {
     const setYearScope = (date) => {
         const year = getYear(date);
         const yearIndex = year % 12;
@@ -28,7 +16,9 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
     };
     const effectiveAutoConfirm = isAdvance
         ? false
-        : (typeof autoConfirmProp !== 'undefined' ? Boolean(autoConfirmProp) : true);
+        : typeof autoConfirm !== 'undefined'
+            ? Boolean(autoConfirm)
+            : true;
     const [calendarSettings, updateCalendarSettings] = useState(() => {
         const initialDate = value !== undefined ? new Date(value) : new Date();
         return {
@@ -38,8 +28,42 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
             yearsScope: setYearScope(initialDate),
         };
     });
-    const [selectedDate, setSellectedDate] = useState(() => (value !== undefined ? new Date(value) : new Date()));
+    const [selectedDate, setSellectedDate] = useState(() => value !== undefined ? new Date(value) : new Date());
     const wrapperRef = useRef(null);
+    const [computedTop, setComputedTop] = useState(top);
+    const [computedLeft, setComputedLeft] = useState(left);
+    useEffect(() => {
+        setComputedTop(top);
+    }, [top]);
+    useEffect(() => {
+        setComputedLeft(left);
+    }, [left]);
+    useLayoutEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        const calendarRect = wrapperRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const currentTopInViewport = computedTop - window.scrollY;
+        const currentLeftInViewport = computedLeft - window.scrollX;
+        const overflowsBottom = currentTopInViewport + calendarRect.height > viewportHeight;
+        const overflowsRight = currentLeftInViewport + calendarRect.width > viewportWidth;
+        const overflowsLeft = currentLeftInViewport < 0;
+        if (overflowsBottom) {
+            const triggerTopInViewport = triggerTop - window.scrollY;
+            const nextTop = Math.max(window.scrollY, window.scrollY + triggerTopInViewport - calendarRect.height);
+            if (nextTop !== computedTop) {
+                setComputedTop(nextTop);
+            }
+        }
+        if (overflowsRight || overflowsLeft) {
+            const maxLeft = window.scrollX + Math.max(0, viewportWidth - calendarRect.width);
+            const nextLeft = Math.min(Math.max(window.scrollX, computedLeft), maxLeft);
+            if (nextLeft !== computedLeft) {
+                setComputedLeft(nextLeft);
+            }
+        }
+    }, [top, left, triggerTop, computedTop, computedLeft]);
     useEffect(() => {
         updateCalendarSettings((prev) => ({
             ...prev,
@@ -84,7 +108,9 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
             const target = e.target;
             if (!el)
                 return;
-            const path = e.composedPath ? e.composedPath() : undefined;
+            const path = e.composedPath
+                ? e.composedPath()
+                : undefined;
             const clickedOutside = path ? !path.includes(el) : !el.contains(target);
             if (clickedOutside && !isAdvance) {
                 handleClose && handleClose();
@@ -97,11 +123,15 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
             document.removeEventListener('touchstart', handleOutside);
         };
     }, [isAdvance, handleClose]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(CalendarWrapper, { ref: wrapperRef, top: top, left: left, size: size, zIndex: zIndex },
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(CalendarRoot, { ref: wrapperRef, theme: theme, config: config.calendarCard, zIndex: zIndex, top: computedTop, left: computedLeft },
             React.createElement(Aligment, { direction: "row" },
-                React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
-                React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),
-                isAdvance && (React.createElement(ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: labels.close || 'Close', labelConfirm: labels.confirm || 'Select', labelAdditional: labels.today || 'Today', additionaNormalMode: true })))),
-        React.createElement(CalendarOverlay, { zIndex: zIndex })));
+                React.createElement(CalendarHeader, { theme: theme, themeVariant: themeVariant, mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: localeLabels }),
+                React.createElement(CalendarContent, { theme: theme, themeVariant: themeVariant, date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: localeLabels }),
+                isAdvance && (React.createElement(ButtonsFooter, { onSecondaryAction: handleClose, onPrimaryAction: confirmDate, onAdditionalAction: setToday, isAdditionalDanger: false, size: "sm", labels: {
+                        primary: labels?.primary,
+                        secondary: labels?.secondary,
+                        additional: labels?.additional,
+                    } })))),
+        React.createElement(CalendarOverlayer, { onClick: handleClose, config: config.calendarCard, theme: theme })));
 };