venice-ui 2.4.12 → 3.0.1

package/dist/cjs/components/ActionPanel/ActionPanel.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionPanel = void 0;
+const config_1 = require("../../config");
+const react_1 = __importDefault(require("react"));
+const ActionPanel_styles_1 = require("./ActionPanel.styles");
+const styled_components_1 = require("styled-components");
+const ActionPanel = ({ theme, themeVariant, options, size, header, footer, maxRows = 6, targetID, handleClick, }) => {
+    const { resolvedTheme, componentsConfig } = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const panelConfig = componentsConfig.panel;
+    const [showedOpitions] = react_1.default.useState(options);
+    const isDisable = (disableID, disabled) => {
+        if (disabled) {
+            return true;
+        }
+        else if (targetID) {
+            return targetID === disableID;
+        }
+        return false;
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(ActionPanel_styles_1.PanelRoot, { theme: resolvedTheme, config: panelConfig },
+            header && (react_1.default.createElement(ActionPanel_styles_1.PanelHeaderWrapper, { size: size, config: panelConfig }, header)),
+            react_1.default.createElement(ActionPanel_styles_1.PanelOptionsWrapper, { size: size, config: panelConfig, maxRows: maxRows }, showedOpitions.map((option, index) => (react_1.default.createElement(ActionPanel_styles_1.ActionItem, { key: index, theme: resolvedTheme, config: panelConfig, size: size, isDisabled: isDisable(option.disableID, option.disabled), onClick: () => handleClick(option.action, option.disabled ? option.disabled : false, option.disableID) }, option.label)))),
+            footer && (react_1.default.createElement(ActionPanel_styles_1.PanelFooterWrapper, { size: size, config: panelConfig }, footer)))));
+};
+exports.ActionPanel = ActionPanel;

package/dist/cjs/components/ActionPanel/ActionPanel.styles.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelOptionsWrapper = exports.PanelEmptyState = exports.PanelSearchWrapper = exports.PanelFooterWrapper = exports.PanelHeaderWrapper = exports.ActionItem = exports.PanelRoot = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelRoot = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme, config }) => config.panel.color.default};
+`;
+exports.ActionItem = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex:1;
+   white-space: nowrap;
+  justify-content: space-between;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-radius: ${({ config, size }) => config.item.size[size].radius}px;
+  color: ${({ theme, config, isDisabled }) => isDisabled
+    ? config.item.color.disabled.text
+    : config.item.color.default.text};
+  :hover {
+    background-color: ${({ theme, config, isDisabled }) => !isDisabled ? config.item.color.hover.background : 'transparent'};
+    color: ${({ theme, config, isDisabled }) => !isDisabled
+    ? config.item.color.hover.text
+    : config.item.color.disabled.text};
+    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'not-allowed')};
+  }
+`;
+exports.PanelHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-bottom: 1px solid ${({ config }) => config.panel.color.divider};
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  margin-bottom: 6px;
+`;
+exports.PanelFooterWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-top: 1px solid ${({ config }) => config.panel.color.divider};
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  margin-top: 6px;
+`;
+exports.PanelSearchWrapper = styled_components_1.default.div `
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  margin-bottom: 6px;
+`;
+exports.PanelEmptyState = styled_components_1.default.div `
+  height: calc(${({ config, size }) => config.item.size[size].height}px * 2);
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  color: ${({ theme, config }) => config.panel.color.placeholder};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+exports.PanelOptionsWrapper = styled_components_1.default.div `
+  display: block;
+  max-height: calc(
+    ${({ config, size }) => config.item.size[size].height}px * ${({ maxRows }) => maxRows}
+  );
+  overflow-y: auto;
+`;

package/dist/cjs/components/ActionPanel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ActionPanel"), exports);

package/dist/cjs/components/Button/Button.js

@@ -4,17 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
+const config_1 = require("../../config");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = require("styled-components");
-const Theme_1 = require("../../Theme");
 const Button_styles_1 = require("./Button.styles");
+const Icon_1 = require("../Icon");
+const styled_components_1 = require("styled-components");
 const Loader_1 = require("../Loader");
-const Button = ({ text = 'Click me', mode = 'primary', size = 'medium', right = false, left = false, theme = Theme_1.mainTheme, disabled = false, onClick, loader = false, errorVariant = false, }) => {
+const Button = ({ mode = 'primary', text = config_1.wordbook.button.defaultText, size = 'md', isDisabled = false, loader = false, iconName, theme, themeVariant = 'default', isActive = false, onClick, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const buttonConfig = componentsConfig.button;
+    const iconSize = buttonConfig.sizes[size].iconSize;
     const handleClick = () => {
-        !disabled && !loader && onClick();
+        !isDisabled && !loader && onClick();
     };
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Button_styles_1.ButtonElement, { mode: mode, size: size, right: right, left: left, disabled: disabled, onClick: handleClick, loader: loader, errorVariant: errorVariant }, loader ? (react_1.default.createElement(Button_styles_1.ButtonLoader, { size: size },
-            react_1.default.createElement(Loader_1.Loader, { size: "small", color: mode === 'primary' ? theme.buttonText : theme.action }))) : (text))));
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Button_styles_1.ButtonRoot, { theme: resolvedTheme, config: buttonConfig, mode: mode, isDisabled: isDisabled, loader: loader, size: size, isActive: isActive, onClick: handleClick }, loader ? (react_1.default.createElement(Loader_1.Loader, null)) : (react_1.default.createElement(Button_styles_1.ButtonContent, null,
+            iconName && (react_1.default.createElement(Icon_1.Icon, { name: iconName, size: iconSize, color: "currentColor", themeVariant: themeVariant, theme: theme })),
+            text)))));
 };
 exports.Button = Button;

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

@@ -3,85 +3,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonLoader = exports.ButtonElement = void 0;
-const common_1 = require("../common");
+exports.ButtonContent = exports.ButtonRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme/Theme");
-exports.ButtonElement = styled_components_1.default.button `
-  align-items: center;
-  border-radius: ${Theme_1.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};
+    }
+  `;
+};
+exports.ButtonRoot = styled_components_1.default.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_1.Theme.padding.m : '0')};
-  margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
-  overflow: hidden;
-  transition: 300ms;
   white-space: nowrap;
-  ${(p) => (0, common_1.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;
   }
 `;
-exports.ButtonLoader = styled_components_1.default.div `
-  display: flex;
-  box-sizing: border-box;
-  ${(p) => (0, common_1.setButtonLoaderSize)(p.size)}
+exports.ButtonContent = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 `;

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

@@ -1,5 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var Button_1 = require("./Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+__exportStar(require("./Button"), exports);

package/dist/cjs/components/ButtonsFooter/ButtonsFooter.js

@@ -4,35 +4,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonsFooter = void 0;
+const config_1 = require("../../config");
 const react_1 = __importDefault(require("react"));
-const Theme_1 = require("../../Theme/Theme");
+const ButtonsFooter_styles_1 = require("./ButtonsFooter.styles");
+const config_2 = require("../../config");
 const Button_1 = require("../Button");
+const Toggle_1 = require("../Toggle");
 const Aligment_1 = require("../Aligment");
-const ButtonsFooter_style_1 = require("./ButtonsFooter.style");
-const Toogle_1 = require("../Toogle");
-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;
-    };
+const styled_components_1 = require("styled-components");
+const ButtonsFooter = ({ theme, themeVariant, onPrimaryAction, onSecondaryAction, onAdditionalAction, primaryDisabled, primaryLoading, additionalType = 'button', additionalValue = false, isAdditionalDanger = false, additionDisabled = false, size = 'md', labels = {
+    primary: config_2.wordbook.actions.confirm, //labelConfirm
+    secondary: config_2.wordbook.actions.cancel, //labelClose
+    additional: undefined //labelAdditional
+} }) => {
+    const resolvedThemeData = (0, config_1.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_1.default.createElement(Aligment_1.Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme_1.Theme.padding.l, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor },
-        labelAdditional && handleAdditional && (react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null, !submitLoader && (react_1.default.createElement(react_1.default.Fragment, null,
-            additionalType === 'button' && (react_1.default.createElement(Button_1.Button, { errorVariant: !additionaNormalMode, mode: "secondary", onClick: additionAction, text: labelAdditional, left: isMultiButtons(), disabled: additionDisabled })),
-            additionalType === 'toogle' && (react_1.default.createElement(Toogle_1.Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
-        react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null,
-            !submitLoader && (react_1.default.createElement(Button_1.Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() })),
-            handleConfirm && labelConfirm && (react_1.default.createElement(Button_1.Button, { onClick: handleConfirm, text: labelConfirm, disabled: submitDisabled, loader: submitLoader })))));
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(ButtonsFooter_styles_1.ButtonsFooterRoot, { hasAdditional: hasAdditional, config: buttonsFooterConfig, theme: resolvedTheme },
+            react_1.default.createElement(Aligment_1.Aligment, { justify: hasAdditional ? 'space-between' : 'flex-end', vPadding: String(buttonsFooterConfig.layout.paddingY + 'px'), hPadding: String(buttonsFooterConfig.layout.paddingX + 'px') },
+                labels.additional && onAdditionalAction && (react_1.default.createElement(ButtonsFooter_styles_1.ButtonsFooterGroup, { config: buttonsFooterConfig, theme: resolvedTheme }, !primaryLoading && (react_1.default.createElement(react_1.default.Fragment, null,
+                    additionalType === 'button' && (react_1.default.createElement(Button_1.Button, { mode: isAdditionalDanger ? 'danger' : 'ghost', onClick: additionAction, isDisabled: additionDisabled, text: labels.additional, size: size })),
+                    additionalType === 'toggle' && (react_1.default.createElement(Toggle_1.Toggle, { label: labels.additional, value: additionalValue, handleClick: additionAction, labelPosition: "left", labelInversed: true, size: size })))))),
+                react_1.default.createElement(ButtonsFooter_styles_1.ButtonsFooterGroup, { config: buttonsFooterConfig, theme: resolvedTheme },
+                    !primaryLoading && (react_1.default.createElement(Button_1.Button, { mode: isMultiButtons ? 'ghost' : 'primary', onClick: onSecondaryAction, text: labels.secondary || config_2.wordbook.actions.cancel, size: size })),
+                    onPrimaryAction && labels.primary && (react_1.default.createElement(Button_1.Button, { onClick: onPrimaryAction, text: labels.primary, isDisabled: primaryDisabled, loader: primaryLoading, size: size })))))));
 };
 exports.ButtonsFooter = ButtonsFooter;

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonsFooterGroup = exports.ButtonsFooterRoot = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ButtonsFooterRoot = styled_components_1.default.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;
+`;
+exports.ButtonsFooterGroup = styled_components_1.default.div `
+  gap: ${({ config }) => config.gap.actions}px;
+  display: flex;
+`;

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

@@ -1,5 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonsFooter = void 0;
-var ButtonsFooter_1 = require("./ButtonsFooter");
-Object.defineProperty(exports, "ButtonsFooter", { enumerable: true, get: function () { return ButtonsFooter_1.ButtonsFooter; } });
+__exportStar(require("./ButtonsFooter"), exports);

package/dist/cjs/components/Card/Card.js

@@ -4,16 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
+const config_1 = require("../../config");
 const react_1 = __importDefault(require("react"));
 const Card_styles_1 = require("./Card.styles");
-const ElementHeader_1 = require("../ElementHeader");
-const Theme_1 = require("../../Theme");
-const Card = ({ children, title, actionLabel, theme = Theme_1.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_1.default.createElement(Card_styles_1.CardElement, { height: height, shadow: shadow },
-        customHeader
-            ? customHeader
-            : (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
-        react_1.default.createElement(Card_styles_1.CardContent, { soloMode: !hasHeader }, children)));
+const Header_1 = require("../Header");
+const styled_components_1 = require("styled-components");
+const Card = ({ theme, themeVariant = 'default', title, actionLabel, children, customHeader, headerDivader, actionDisabled, handleClick, handleBack, height, options, shadow, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const headerConfig = componentsConfig.card;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Card_styles_1.CardRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig },
+            (title || actionLabel) && (react_1.default.createElement(Header_1.Header, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, bottomDivader: headerDivader, actionDisabled: actionDisabled, themeVariant: themeVariant, header: customHeader })),
+            react_1.default.createElement(Card_styles_1.CardContent, { theme: resolvedTheme, config: headerConfig }, children))));
 };
 exports.Card = Card;

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

@@ -3,26 +3,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardContent = exports.CardElement = void 0;
+exports.CardContent = exports.CardRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme/Theme");
-exports.CardElement = styled_components_1.default.div `
+exports.CardRoot = styled_components_1.default.div `
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: ${Theme_1.Theme.colors.white};
-  border-radius: ${Theme_1.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_1.Theme.shadow.s};`}
+  ${(p) => p.shadow && `box-shadow: ${p.config.color.shadow};`}
+
 `;
 exports.CardContent = styled_components_1.default.div `
   box-sizing: border-box;
   display: flex;
-  padding: ${Theme_1.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/cjs/components/Card/index.js

@@ -1,5 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = void 0;
-var Card_1 = require("./Card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+__exportStar(require("./Card"), exports);

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -5,19 +5,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const react_1 = __importDefault(require("react"));
-const Theme_1 = require("../../Theme/Theme");
-const styled_components_1 = require("styled-components");
-const Aligment_1 = require("../Aligment");
-const Input_1 = require("../Input");
+const config_1 = require("../../config");
+const ComponentRoot_1 = require("../ComponentRoot");
 const Checkbox_styles_1 = require("./Checkbox.styles");
-const Icons_1 = require("../Icons");
-const Checkbox = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', isIntermedian = false, handleClick, }) => {
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
-            react_1.default.createElement(Input_1.InputWrapper, { width: width },
-                react_1.default.createElement(Checkbox_styles_1.ToogleCheckboxWrapper, { size: size },
-                    react_1.default.createElement(Checkbox_styles_1.CheckboxElement, { size: size, active: value || isIntermedian, onClick: () => handleClick(!value) }, (value || isIntermedian) && (react_1.default.createElement(Checkbox_styles_1.CheckoxIcon, null,
-                        react_1.default.createElement(Icons_1.Icon, { name: isIntermedian ? "remove" : 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
-            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition, wrapLabel: labelPosition === 'left' }, label)))));
+const IconsPath_1 = require("../Icon/IconsPath");
+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 = (0, config_1.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_1.iconsPath['remove'] : IconsPath_1.iconsPath['check'];
+    const onClick = () => {
+        if (!isDisabled) {
+            handleClick(!value);
+        }
+    };
+    return (react_1.default.createElement(ComponentRoot_1.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_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
+            react_1.default.createElement(Checkbox_styles_1.CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (react_1.default.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+                react_1.default.createElement("path", { d: iconName, fill: isDisabled
+                        ? checkboxConfig.color.disabled.icon
+                        : isIntermedian
+                            ? checkboxConfig.color.intermedian.icon
+                            : value
+                                ? checkboxConfig.color.focus.icon
+                                : checkboxConfig.color.default.icon })))))));
 };
 exports.Checkbox = Checkbox;