venice-ui 2.4.13 → 3.0.1

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+export const TagRoot = styled.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/esm/components/Tag/index.js

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

package/dist/esm/components/Tile/Tile.js

@@ -1,9 +1,18 @@
-import { ElementHeader } from '../ElementHeader';
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React from 'react';
-import { TileElement } from './Tile.styles';
-import { mainTheme } from '../../Theme';
-export const Tile = ({ size = 'small', shadow = true, title, children, theme = mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false, decorativeEdge = false, }) => {
-    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height, decorativeEdge: decorativeEdge },
-        title && (React.createElement(ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
-        children));
+import { TileContent, TileRoot } from './Tile.styles';
+import { Header } from '../Header';
+import { ThemeProvider } from 'styled-components';
+export const Tile = ({ theme, themeVariant = 'default', title, children, customHeader, headerDivader, height, size = 'sm', shadow = false, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const headerConfig = componentsConfig.tile;
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(TileRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig, size: size },
+            title && (React.createElement(Header, { title: title, theme: theme, bottomDivader: headerDivader, themeVariant: themeVariant, header: customHeader })),
+            React.createElement(TileContent, { theme: resolvedTheme, config: headerConfig }, children))));
 };

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

@@ -1,22 +1,19 @@
 import styled from 'styled-components';
-import { Theme } from '../../Theme';
-export const TileElement = styled.div `
+export const TileRoot = styled.div `
   box-sizing: border-box;
   display: flex;
-  width: 100%;
-  background-color: ${(p) => p.backgroundColor};
-  border-radius: ${Theme.borderRadius.m};
-  max-height: 100%;
-  overflow: hidden;
   flex-direction: column;
-  position: relative;
-  height: ${(p) => p.height};
-  ${(p) => p.shadow &&
-    `
-    box-shadow: ${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.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};
+`;
+export const TileContent = styled.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/esm/components/Toggle/Toggle.js

@@ -0,0 +1,22 @@
+import { ComponentRoot } from '../ComponentRoot';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React from 'react';
+import { ToggleRoot, ToggleTrack, TrackThumb } from './Toggle.styles';
+export 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 = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const toggleConfig = componentsConfig.toggle;
+    const onClick = () => {
+        if (!isDisabled) {
+            handleClick(!value);
+        }
+    };
+    return (React.createElement(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.createElement(ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
+            React.createElement(ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
+                React.createElement(TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));
+};

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

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+export const ToggleTrack = styled.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)'};
+`;
+export const TrackThumb = styled.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};`}
+`;
+export const ToggleRoot = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+`;

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

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

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

@@ -0,0 +1,109 @@
+import styled from 'styled-components';
+import { createTheme, measurements } from '../../config';
+const theme = 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};
+    }
+  `;
+};
+export const Title = styled.h1 `
+  margin: 0;
+  font-size: ${measurements.font.size.xl3}px;
+  line-height: ${measurements.font.lineHeight.xl3}px;
+  font-weight: ${measurements.font.weight.semibold};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+export const Subtitle = styled.h2 `
+  margin: 0;
+  font-size: ${measurements.font.size.xl2}px;
+  line-height: ${measurements.font.lineHeight.xl2}px;
+  font-weight: ${measurements.font.weight.medium};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+export const Text = styled.p `
+  margin: 0;
+  font-size: ${measurements.font.size.md}px;
+  line-height: ${measurements.font.lineHeight.md}px;
+  font-weight: ${measurements.font.weight.regular};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+export const TextSmall = styled.p `
+  margin: 0;
+  font-size: ${measurements.font.size.sm}px;
+  line-height: ${measurements.font.lineHeight.sm}px;
+  font-weight: ${measurements.font.weight.regular};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+export const Caption = styled.span `
+  margin: 0;
+  font-size: ${measurements.font.size.xs}px;
+  line-height: ${measurements.font.lineHeight.xs}px;
+  font-weight: ${measurements.font.weight.regular};
+  color: ${({ color, isDisabled }) => resolveColor(color, isDisabled)};
+  cursor: ${({ action, isDisabled }) => resolveCursor(action, isDisabled)};
+  ${({ action, isDisabled }) => actionHover(action, isDisabled)};
+`;
+export const Overline = styled.span `
+  margin: 0;
+  font-size: ${measurements.font.size.xs}px;
+  line-height: ${measurements.font.lineHeight.xs}px;
+  font-weight: ${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: measurements.font.size.sm,
+        lineHeight: measurements.font.lineHeight.sm,
+    },
+    md: {
+        fontSize: measurements.font.size.md,
+        lineHeight: measurements.font.lineHeight.md,
+    },
+    lg: {
+        fontSize: measurements.font.size.lg,
+        lineHeight: measurements.font.lineHeight.lg,
+    },
+};
+export const LabelText = styled.span `
+  margin: 0;
+  font-weight: ${({ labelPosition }) => labelPosition === 'left' ? measurements.font.weight.regular : 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)};
+`;
+export const TextHeader = Title;
+export const TextSubHeader = Subtitle;
+export const TextAccent = Overline;
+export const TextMicro = Caption;
+export const TextLabel = LabelText;

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

@@ -1 +1 @@
-export * from './Typography.styles';
+export * from './Typography';

package/dist/esm/config/componentTheme.js

@@ -0,0 +1,24 @@
+import { createComponentsConfig, } from './config';
+import { themes } from './themes';
+export 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);
+};
+export const resolveThemeWithComponentsConfig = ({ theme, themeVariant = 'default', }) => {
+    const resolvedTheme = (theme && isAppTheme(theme) ? theme : undefined) ??
+        themes[themeVariant] ??
+        themes.default;
+    return {
+        resolvedTheme,
+        componentsConfig: createComponentsConfig(resolvedTheme),
+    };
+};