venice-ui 2.4.13 → 3.0.2

package/dist/cjs/components/Tag/Tag.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const config_1 = require("../../config");
+const react_1 = __importDefault(require("react"));
+const Tag_styles_1 = require("./Tag.styles");
+const Icon_1 = require("../Icon");
+const Tag = ({ theme, themeVariant, size = 'md', label, mode = 'default', handleClose, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const dropdownMenuConfig = componentsConfig.tag;
+    const iconSize = dropdownMenuConfig.size[size].iconSize || 'xs';
+    return (react_1.default.createElement(Tag_styles_1.TagRoot, { size: size, theme: resolvedTheme, config: dropdownMenuConfig, mode: mode },
+        label,
+        react_1.default.createElement(Icon_1.Icon, { name: "close", color: "currentColor", hoverBackground: "transparent", size: iconSize, onClick: handleClose, hoverColor: "currentColor" })));
+};
+exports.Tag = Tag;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagRoot = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TagRoot = styled_components_1.default.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  height: ${({ config, size }) => config.size[size].height}px;
+  font-size: ${({ config, size }) => config.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.size[size].paddingX}px};
+  color: ${({ theme, config, mode }) => config.color[mode].text};
+  background: ${({ theme, config, mode }) => config.color[mode].background};
+  border-radius: ${({ config, size }) => config.size[size].radius}px;
+  gap: ${({ config, size }) => config.size[size].gap}px;
+  cursor: default;
+  :hover{
+    background: ${({ theme, config, mode }) => config.color[mode].hover};
+`;

package/dist/cjs/components/{Chips → Tag}/index.js

@@ -14,4 +14,4 @@ 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("./Chips"), exports);
+__exportStar(require("./Tag"), exports);

package/dist/cjs/components/Tile/Tile.js

@@ -4,13 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tile = void 0;
-const ElementHeader_1 = require("../ElementHeader");
+const config_1 = require("../../config");
 const react_1 = __importDefault(require("react"));
 const Tile_styles_1 = require("./Tile.styles");
-const Theme_1 = require("../../Theme");
-const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false, decorativeEdge = false, }) => {
-    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height, decorativeEdge: decorativeEdge },
-        title && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
-        children));
+const Header_1 = require("../Header");
+const styled_components_1 = require("styled-components");
+const Tile = ({ theme, themeVariant = 'default', title, children, customHeader, headerDivader, height, size = 'sm', shadow = false, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const headerConfig = componentsConfig.tile;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Tile_styles_1.TileRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig, size: size },
+            title && (react_1.default.createElement(Header_1.Header, { title: title, theme: theme, bottomDivader: headerDivader, themeVariant: themeVariant, header: customHeader })),
+            react_1.default.createElement(Tile_styles_1.TileContent, { theme: resolvedTheme, config: headerConfig }, children))));
 };
 exports.Tile = Tile;

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

@@ -3,26 +3,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TileElement = void 0;
+exports.TileContent = exports.TileRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-exports.TileElement = styled_components_1.default.div `
+exports.TileRoot = styled_components_1.default.div `
   box-sizing: border-box;
   display: flex;
-  width: 100%;
-  background-color: ${(p) => p.backgroundColor};
-  border-radius: ${Theme_1.Theme.borderRadius.m};
-  max-height: 100%;
-  overflow: hidden;
   flex-direction: column;
-  position: relative;
-  height: ${(p) => p.height};
-  ${(p) => p.shadow &&
-    `
-    box-shadow: ${Theme_1.Theme.shadow.s}
-  `}
-  ${(p) => p.size === 'small' && `max-width:500px;`}
-  ${(p) => p.size === 'medium' && `max-width:750px;`}
-  ${(p) => p.size === 'large' && `max-width:100%;`}
-  ${(p) => p.decorativeEdge && `border-left: 4px solid ${Theme_1.Theme.colors.primary};`}
+  width: 100%;
+  background-color: ${({ config }) => config.color.background};
+  height: ${(p) => (p.height ? p.height : '100%')};
+  ${(p) => p.shadow && `box-shadow: ${p.config.color.shadow};`}
+  max-width:${({ config, size }) => config.size[size].maxWidth};
+`;
+exports.TileContent = styled_components_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  padding: ${({ config }) => config.size.common.paddingY}px
+    ${({ config }) => config.size.common.paddingX}px;
+  width: 100%;
+  flex-direction: row;
 `;

package/dist/cjs/components/Toggle/Toggle.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const ComponentRoot_1 = require("../ComponentRoot");
+const config_1 = require("../../config");
+const react_1 = __importDefault(require("react"));
+const Toggle_styles_1 = require("./Toggle.styles");
+const Toggle = ({ name, value = true, size = 'md', label, labelPosition = 'top', theme, themeVariant = 'default', handleClick, width = 'auto', isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const toggleConfig = componentsConfig.toggle;
+    const onClick = () => {
+        if (!isDisabled) {
+            handleClick(!value);
+        }
+    };
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: `${toggleConfig.size[size].width}  px` },
+        react_1.default.createElement(Toggle_styles_1.ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
+            react_1.default.createElement(Toggle_styles_1.ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
+                react_1.default.createElement(Toggle_styles_1.TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));
+};
+exports.Toggle = Toggle;

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleRoot = exports.TrackThumb = exports.ToggleTrack = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ToggleTrack = styled_components_1.default.div `
+  display: inline-block;
+  box-sizing: border-box;
+  width: ${({ theme, config, size }) => config.size[size].width}px;
+  height: ${({ theme, config, size }) => config.size[size].height}px;
+  box-shadow: ${({ theme, config }) => config.shadow.track};
+  position: relative;
+  overflow: hidden;
+  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 180ms ease;
+  transform: ${({ theme, config, size, isActive }) => isActive
+    ? `translateX(${config.size[size].activePosition}px)`
+    : 'translateX(0)'};
+`;
+exports.TrackThumb = styled_components_1.default.div `
+  position: relative;
+
+  width: ${({ theme, config, size }) => config.size[size].sizeThumb}px;
+  height: ${({ theme, config, size }) => config.size[size].sizeThumb}px;
+  background: ${({ theme, config }) => config.color.default.thumbBackground};
+  border: 1px solid ${({ theme, config }) => config.color.default.thumbBorder};
+  border-radius: 50%;
+  box-shadow: ${({ theme, config }) => config.shadow.thumb};
+  :hover {
+    background: ${({ theme, config }) => config.color.hover.background};
+  }
+  ${({ theme, config, isActive }) => isActive &&
+    `  border: 1px solid ${({ theme, config }) => config.color.focus.thumbBorder};`}
+
+  ${({ theme, config, isDisabled }) => isDisabled &&
+    `
+    background: ${config.color.disabled.background};
+     border: 1px solid ${({ theme, config }) => config.color.disabled.thumbBorder};`}
+`;
+exports.ToggleRoot = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+`;

package/dist/cjs/components/{Tooltip → Toggle}/index.js

@@ -14,4 +14,4 @@ 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("./Tooltip"), exports);
+__exportStar(require("./Toggle"), exports);

package/dist/cjs/components/Typography/Typography.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLabel = exports.TextMicro = exports.TextAccent = exports.TextSubHeader = exports.TextHeader = exports.LabelText = exports.Overline = exports.Caption = exports.TextSmall = exports.Text = exports.Subtitle = exports.Title = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const config_1 = require("../../config");
+const theme = (0, config_1.createTheme)('default');
+const resolveColor = (color, isDisabled) => {
+    if (isDisabled) {
+        return theme.text.disabled;
+    }
+    return color || theme.text.primary;
+};
+const resolveCursor = (action, isDisabled) => {
+    if (isDisabled) {
+        return 'not-allowed';
+    }
+    return action ? 'pointer' : 'default';
+};
+const actionHover = (action, isDisabled) => {
+    if (!action || isDisabled) {
+        return '';
+    }
+    return `
+    &:hover {
+      color: ${theme.text.link};
+    }
+  `;
+};
+exports.Title = styled_components_1.default.h1 `
+  margin: 0;
+  font-size: ${config_1.measurements.font.size.xl3}px;
+  line-height: ${config_1.measurements.font.lineHeight.xl3}px;
+  font-weight: ${config_1.measurements.font.weight.semibold};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+exports.Subtitle = styled_components_1.default.h2 `
+  margin: 0;
+  font-size: ${config_1.measurements.font.size.xl2}px;
+  line-height: ${config_1.measurements.font.lineHeight.xl2}px;
+  font-weight: ${config_1.measurements.font.weight.medium};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+exports.Text = styled_components_1.default.p `
+  margin: 0;
+  font-size: ${config_1.measurements.font.size.md}px;
+  line-height: ${config_1.measurements.font.lineHeight.md}px;
+  font-weight: ${config_1.measurements.font.weight.regular};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+exports.TextSmall = styled_components_1.default.p `
+  margin: 0;
+  font-size: ${config_1.measurements.font.size.sm}px;
+  line-height: ${config_1.measurements.font.lineHeight.sm}px;
+  font-weight: ${config_1.measurements.font.weight.regular};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+exports.Caption = styled_components_1.default.span `
+  margin: 0;
+  font-size: ${config_1.measurements.font.size.xs}px;
+  line-height: ${config_1.measurements.font.lineHeight.xs}px;
+  font-weight: ${config_1.measurements.font.weight.regular};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+exports.Overline = styled_components_1.default.span `
+  margin: 0;
+  font-size: ${config_1.measurements.font.size.xs}px;
+  line-height: ${config_1.measurements.font.lineHeight.xs}px;
+  font-weight: ${config_1.measurements.font.weight.medium};
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+const labelSizeMap = {
+    sm: {
+        fontSize: config_1.measurements.font.size.sm,
+        lineHeight: config_1.measurements.font.lineHeight.sm,
+    },
+    md: {
+        fontSize: config_1.measurements.font.size.md,
+        lineHeight: config_1.measurements.font.lineHeight.md,
+    },
+    lg: {
+        fontSize: config_1.measurements.font.size.lg,
+        lineHeight: config_1.measurements.font.lineHeight.lg,
+    },
+};
+exports.LabelText = styled_components_1.default.span `
+  margin: 0;
+  font-weight: ${({ labelPosition }) => labelPosition === 'left' ? config_1.measurements.font.weight.regular : config_1.measurements.font.weight.medium};
+  font-size: ${({ size = 'md' }) => labelSizeMap[size].fontSize}px;
+  line-height: ${({ size = 'md' }) => labelSizeMap[size].lineHeight}px;
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+exports.TextHeader = exports.Title;
+exports.TextSubHeader = exports.Subtitle;
+exports.TextAccent = exports.Overline;
+exports.TextMicro = exports.Caption;
+exports.TextLabel = exports.LabelText;

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

@@ -14,4 +14,4 @@ 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("./Typography.styles"), exports);
+__exportStar(require("./Typography"), exports);

package/dist/cjs/config/componentTheme.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveThemeWithComponentsConfig = exports.isAppTheme = void 0;
+const config_1 = require("./config");
+const themes_1 = require("./themes");
+const isAppTheme = (value) => {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const maybeTheme = value;
+    const primitive = maybeTheme.primitive;
+    return Boolean(primitive &&
+        primitive.primary &&
+        primitive.neutral &&
+        primitive.error &&
+        primitive.warning &&
+        primitive.success);
+};
+exports.isAppTheme = isAppTheme;
+const resolveThemeWithComponentsConfig = ({ theme, themeVariant = 'default', }) => {
+    const resolvedTheme = (theme && (0, exports.isAppTheme)(theme) ? theme : undefined) ??
+        themes_1.themes[themeVariant] ??
+        themes_1.themes.default;
+    return {
+        resolvedTheme,
+        componentsConfig: (0, config_1.createComponentsConfig)(resolvedTheme),
+    };
+};
+exports.resolveThemeWithComponentsConfig = resolveThemeWithComponentsConfig;