@quen-ui/components 0.0.14 → 1.0.0

package/dist/Avatar/styles.es.js

@@ -1,28 +1,33 @@
 import styled, { css } from "styled-components";
-import { math } from "polished";
 const AvatarWrapper = styled.div`
   display: flex;
   gap: ${({ theme, size }) => theme.space[size ?? "m"]};
   align-items: center;
+
+  .quen-ui__title,
+  .quen-ui__text {
+    color: ${({ theme }) => theme.components.Avatar.color};
+  }
 `;
-const AvatarStyled = styled.div`
+const AvatarStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "color", "status"].includes(prop)
+})`
   width: ${({ size, theme }) => theme.control.height[size ?? "m"]};
   height: ${({ size, theme }) => theme.control.height[size ?? "m"]};
-  border-radius: ${({ theme }) => math(`${theme.control.radius} * 4`)};
+  border-radius: ${({ theme }) => theme.components.Avatar.radius};
   background: ${({ theme, color }) => color in theme.colors ? theme.colors[color]["3"] : color};
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${({ theme, status }) => status && css`
-      border: ${math(`${theme.control.borderWidth} * 2`)} solid
-        ${status === "online" ? theme.colors.green["5"] : theme.colors.grayViolet["5"]};
-    `}
-
-  .quen-ui__avatar__icon {
+  color: ${({ theme }) => theme.components.Avatar.color};
+    ${({ theme, status }) => status && css`
+        border: ${theme.components.Avatar.borderWidth} solid
+          ${status === "online" ? theme.components.Avatar.borderColorOnline : theme.components.Avatar.borderColorDefault};
+      `}
+    .quen-ui__avatar__icon {
     width: 100%;
     height: 100%;
-    border-radius: ${({ theme }) => math(`${theme.control.radius} * 4`)};
+    border-radius: ${({ theme }) => theme.components.Avatar.radius};
   }
 `;
 export {

package/dist/Badge/styles.cjs.js

@@ -13,26 +13,26 @@ const getBackgroundColor = (theme, color) => {
     if (types.BADGE_COLOR.includes(color)) {
       switch (color) {
         case "success":
-          return theme.colors.green[9];
+          return theme.components.Badge.successBackground;
         case "warning":
-          return theme.colors.orange[9];
+          return theme.components.Badge.warningBackground;
         case "danger":
-          return theme.colors.red[9];
+          return theme.components.Badge.dangerBackground;
         case "secondary":
-          return theme.colors.grayViolet[9];
+          return theme.components.Badge.disabledBackground;
         case "disabled":
           return theme.colors.gray[2];
       }
     }
     return color;
   }
-  return theme.colors.violet[9];
+  return theme.components.Badge.primaryBackground;
 };
 const getColor = (theme, color) => {
   if (color === "secondary") {
     return "dark";
   } else if (color === "disabled") {
-    return theme.colors.gray["4"];
+    return theme.components.Badge.disabledColor;
   }
   return "white";
 };
@@ -45,7 +45,7 @@ const BadgeStyled = styled.div.withConfig({
   justify-content: space-between;
   width: max-content;
   height: ${({ size }) => height[size]};
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Badge.radius};
   padding-left: ${({ theme }) => theme.space.xs};
   padding-right: ${({ theme }) => theme.space.xs};
   background-color: ${({ theme, color }) => getBackgroundColor(theme, color)};

package/dist/Badge/styles.es.js

@@ -11,26 +11,26 @@ const getBackgroundColor = (theme, color) => {
     if (BADGE_COLOR.includes(color)) {
       switch (color) {
         case "success":
-          return theme.colors.green[9];
+          return theme.components.Badge.successBackground;
         case "warning":
-          return theme.colors.orange[9];
+          return theme.components.Badge.warningBackground;
         case "danger":
-          return theme.colors.red[9];
+          return theme.components.Badge.dangerBackground;
         case "secondary":
-          return theme.colors.grayViolet[9];
+          return theme.components.Badge.disabledBackground;
         case "disabled":
           return theme.colors.gray[2];
       }
     }
     return color;
   }
-  return theme.colors.violet[9];
+  return theme.components.Badge.primaryBackground;
 };
 const getColor = (theme, color) => {
   if (color === "secondary") {
     return "dark";
   } else if (color === "disabled") {
-    return theme.colors.gray["4"];
+    return theme.components.Badge.disabledColor;
   }
   return "white";
 };
@@ -43,7 +43,7 @@ const BadgeStyled = styled.div.withConfig({
   justify-content: space-between;
   width: max-content;
   height: ${({ size }) => height[size]};
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Badge.radius};
   padding-left: ${({ theme }) => theme.space.xs};
   padding-right: ${({ theme }) => theme.space.xs};
   background-color: ${({ theme, color }) => getBackgroundColor(theme, color)};

package/dist/Breadcrumbs/BreadcrumbItem.cjs.js

@@ -16,13 +16,13 @@ const BreadcrumbItem = ({
   className,
   lastItem
 }) => {
-  const Icon = item && (getItemIcon == null ? void 0 : getItemIcon(item));
+  const Icon = item && getItemIcon?.(item);
   const onlyIcon = Icon && onlyIconProps;
-  const label = item && (getItemLabel == null ? void 0 : getItemLabel(item));
-  const href = item && (getItemHref == null ? void 0 : getItemHref(item));
-  const _className = item && (getItemClassName == null ? void 0 : getItemClassName(item));
+  const label = item && getItemLabel?.(item);
+  const href = item && getItemHref?.(item);
+  const _className = item && getItemClassName?.(item);
   const handleClick = (e) => {
-    onItemClick == null ? void 0 : onItemClick(item, e);
+    onItemClick?.(item, e);
   };
   const linkProps = href ? { as: "a", href } : { as: "span" };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -32,7 +32,7 @@ const BreadcrumbItem = ({
       lastItem,
       ...linkProps,
       onClick: handleClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: onlyIcon ? /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size, className: "quen-ui__breadcrumb--icon", children: Icon }) : /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 4, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: onlyIcon ? /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size, className: "quen-ui__breadcrumb--icon", "aria-label": label, children: Icon }) : /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 4, children: [
         Icon,
         label
       ] }) })

package/dist/Breadcrumbs/BreadcrumbItem.es.js

@@ -15,13 +15,13 @@ const BreadcrumbItem = ({
   className,
   lastItem
 }) => {
-  const Icon = item && (getItemIcon == null ? void 0 : getItemIcon(item));
+  const Icon = item && getItemIcon?.(item);
   const onlyIcon = Icon && onlyIconProps;
-  const label = item && (getItemLabel == null ? void 0 : getItemLabel(item));
-  const href = item && (getItemHref == null ? void 0 : getItemHref(item));
-  const _className = item && (getItemClassName == null ? void 0 : getItemClassName(item));
+  const label = item && getItemLabel?.(item);
+  const href = item && getItemHref?.(item);
+  const _className = item && getItemClassName?.(item);
   const handleClick = (e) => {
-    onItemClick == null ? void 0 : onItemClick(item, e);
+    onItemClick?.(item, e);
   };
   const linkProps = href ? { as: "a", href } : { as: "span" };
   return /* @__PURE__ */ jsx(
@@ -31,7 +31,7 @@ const BreadcrumbItem = ({
       lastItem,
       ...linkProps,
       onClick: handleClick,
-      children: /* @__PURE__ */ jsx(Text, { size, children: onlyIcon ? /* @__PURE__ */ jsx(Button, { view: "icon", size, className: "quen-ui__breadcrumb--icon", children: Icon }) : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+      children: /* @__PURE__ */ jsx(Text, { size, children: onlyIcon ? /* @__PURE__ */ jsx(Button, { view: "icon", size, className: "quen-ui__breadcrumb--icon", "aria-label": label, children: Icon }) : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
         Icon,
         label
       ] }) })

package/dist/Breadcrumbs/Breadcrumbs.cjs.js

@@ -21,9 +21,8 @@ const Breadcrumbs = (props) => {
     ...otherProps
   } = helpers.widthDefaultGetters(props);
   const handleClick = (item, e) => {
-    var _a;
-    (_a = getItemOnClick(item)) == null ? void 0 : _a(e);
-    onItemClick == null ? void 0 : onItemClick(item, e);
+    getItemOnClick(item)?.(e);
+    onItemClick?.(item, e);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(styles.BreadcrumbsStyled, { className, ...otherProps, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(

package/dist/Breadcrumbs/Breadcrumbs.es.js

@@ -20,9 +20,8 @@ const Breadcrumbs = (props) => {
     ...otherProps
   } = widthDefaultGetters(props);
   const handleClick = (item, e) => {
-    var _a;
-    (_a = getItemOnClick(item)) == null ? void 0 : _a(e);
-    onItemClick == null ? void 0 : onItemClick(item, e);
+    getItemOnClick(item)?.(e);
+    onItemClick?.(item, e);
   };
   return /* @__PURE__ */ jsx(BreadcrumbsStyled, { className, ...otherProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/dist/Breadcrumbs/styles.cjs.js

@@ -6,34 +6,34 @@ const BreadcrumbItemStyled = styled.div.withConfig({
 })`
   cursor: pointer;
   user-select: none;
-  
+
   text-decoration: none;
-  
+
   span {
     display: flex;
     align-items: center;
   }
-  
+
   ${({ lastItem }) => lastItem && styled.css`
-    color: ${({ theme }) => theme.colors.violet[9]};
-    span {
-      color: ${({ theme }) => theme.colors.violet[9]};
-    }
-  `};
-  
+      color: ${({ theme }) => theme.components.Breadcrumbs.primaryColor};
+      span {
+        color: ${({ theme }) => theme.components.Breadcrumbs.primaryColor};
+      }
+    `};
+
   &:hover {
-    color: ${({ theme }) => theme.colors.grayViolet[6]};
+    color: ${({ theme }) => theme.components.Breadcrumbs.hoverColor};
     span {
-      color: ${({ theme }) => theme.colors.grayViolet[6]};
+      color: ${({ theme }) => theme.components.Breadcrumbs.hoverColor};
     }
   }
 
   .quen-ui__breadcrumb--icon {
     svg {
-      color: ${({ theme }) => theme.textColor};
+      color: ${({ theme }) => theme.components.Breadcrumbs.color};
     }
   }
-  
+
   svg {
     color: currentColor;
   }
@@ -43,8 +43,8 @@ const BreadcrumbsStyled = styled.nav`
   gap: 0.5rem;
   flex-wrap: wrap;
   align-items: center;
-  
-  color: ${({ theme }) => theme.textColor};
+
+  color: ${({ theme }) => theme.components.Breadcrumbs.color};
 `;
 exports.BreadcrumbItemStyled = BreadcrumbItemStyled;
 exports.BreadcrumbsStyled = BreadcrumbsStyled;

package/dist/Breadcrumbs/styles.es.js

@@ -4,34 +4,34 @@ const BreadcrumbItemStyled = styled.div.withConfig({
 })`
   cursor: pointer;
   user-select: none;
-  
+
   text-decoration: none;
-  
+
   span {
     display: flex;
     align-items: center;
   }
-  
+
   ${({ lastItem }) => lastItem && css`
-    color: ${({ theme }) => theme.colors.violet[9]};
-    span {
-      color: ${({ theme }) => theme.colors.violet[9]};
-    }
-  `};
-  
+      color: ${({ theme }) => theme.components.Breadcrumbs.primaryColor};
+      span {
+        color: ${({ theme }) => theme.components.Breadcrumbs.primaryColor};
+      }
+    `};
+
   &:hover {
-    color: ${({ theme }) => theme.colors.grayViolet[6]};
+    color: ${({ theme }) => theme.components.Breadcrumbs.hoverColor};
     span {
-      color: ${({ theme }) => theme.colors.grayViolet[6]};
+      color: ${({ theme }) => theme.components.Breadcrumbs.hoverColor};
     }
   }
 
   .quen-ui__breadcrumb--icon {
     svg {
-      color: ${({ theme }) => theme.textColor};
+      color: ${({ theme }) => theme.components.Breadcrumbs.color};
     }
   }
-  
+
   svg {
     color: currentColor;
   }
@@ -41,8 +41,8 @@ const BreadcrumbsStyled = styled.nav`
   gap: 0.5rem;
   flex-wrap: wrap;
   align-items: center;
-  
-  color: ${({ theme }) => theme.textColor};
+
+  color: ${({ theme }) => theme.components.Breadcrumbs.color};
 `;
 export {
   BreadcrumbItemStyled,

package/dist/Button/Button.cjs.js

@@ -21,19 +21,19 @@ const Button = ({
 }, ref) => {
   const handleClick = (event) => {
     if (!loading && !disabled) {
-      onClick == null ? void 0 : onClick(event);
+      onClick?.(event);
     }
   };
   const handleKeyPress = (event) => {
     if (!disabled && !loading) {
-      onKeyPress == null ? void 0 : onKeyPress(event);
+      onKeyPress?.(event);
     }
   };
   const handleKeyUp = (event) => {
     if (loading) {
       event.preventDefault();
     } else {
-      onKeyUp == null ? void 0 : onKeyUp(event);
+      onKeyUp?.(event);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/Button/Button.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ButtonStyled } from "./styles.es.js";
 import Loader from "../Loader/Loader.es.js";
-const Button = ({
+const Button$1 = ({
   size = "m",
   children,
   disabled,
@@ -20,19 +20,19 @@ const Button = ({
 }, ref) => {
   const handleClick = (event) => {
     if (!loading && !disabled) {
-      onClick == null ? void 0 : onClick(event);
+      onClick?.(event);
     }
   };
   const handleKeyPress = (event) => {
     if (!disabled && !loading) {
-      onKeyPress == null ? void 0 : onKeyPress(event);
+      onKeyPress?.(event);
     }
   };
   const handleKeyUp = (event) => {
     if (loading) {
       event.preventDefault();
     } else {
-      onKeyUp == null ? void 0 : onKeyUp(event);
+      onKeyUp?.(event);
     }
   };
   return /* @__PURE__ */ jsxs(
@@ -61,7 +61,7 @@ const Button = ({
     }
   );
 };
-const Button$1 = forwardRef(Button);
+const Button = forwardRef(Button$1);
 export {
-  Button$1 as default
+  Button as default
 };

package/dist/Button/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Button } from './Button';
-export type { IButtonProps, TButtonSize, TButtonView } from './types';
+export type { IButtonProps, TButtonView } from './types';

package/dist/Button/styles.cjs.js

@@ -2,117 +2,107 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const polished = require("polished");
-const getSizing = (view, size) => {
-  switch (size) {
-    case "l":
-      return styled.css`
-        height: 3rem; // 48px
-        ${view === "icon" && "width: 3rem"};
-      `;
-    case "s":
-      return styled.css`
-        height: 2rem; // 32px
-        ${view === "icon" && "width: 2rem"};
-      `;
-    case "xs":
-      return styled.css`
-        height: 1.5rem; // 24px
-        ${view === "icon" && "width: 1.5rem"};
-      `;
-    case "m":
-    default:
-      return styled.css`
-        height: 2.5rem; // 40px
-        ${view === "icon" && "width: 2.5rem"};
-      `;
-  }
-};
 const getBackground = (theme, view = "primary", isDisabled) => {
   switch (view) {
     case "secondary":
       return styled.css`
-        background: ${theme.colors.gray["5"]};
-        color: white;
+        background: ${theme.components.Button.secondaryBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.gray["4"]};
+          background: ${polished.darken(
+        0.1,
+        theme.components.Button.secondaryBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.gray["6"]};
+          background: ${polished.darken(
+        0.2,
+        theme.components.Button.secondaryBackground
+      )};
         }
       `;
     case "danger":
       return styled.css`
-        background: ${theme.colors.red["7"]};
-        color: white;
+        background: ${theme.components.Button.dangerBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.red["6"]};
+          background: ${polished.desaturate(
+        0.2,
+        theme.components.Button.dangerBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.red["8"]};
+          background: ${polished.darken(0.2, theme.components.Button.dangerBackground)};
         }
       `;
     case "ghost":
       return styled.css`
         background: transparent;
-        color: ${theme.textColor};
+        color: ${theme.components.Button.ghostColor};
 
         &:hover {
-          color: ${theme.colors.gray["7"]};
+          color: ${polished.rgba(theme.components.Button.ghostColor, 0.5)};
         }
 
         &:active {
-          color: ${theme.colors.gray["9"]};
+          color: ${polished.rgba(theme.components.Button.ghostColor, 0.5)};
         }
       `;
     case "success":
       return styled.css`
-        background: ${theme.colors.green["7"]};
-        color: white;
+        background: ${theme.components.Button.successBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.green["6"]};
+          background: ${polished.desaturate(
+        0.2,
+        theme.components.Button.successBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.green["8"]};
+          background: ${polished.darken(0.2, theme.components.Button.successBackground)};
         }
       `;
     case "warning":
       return styled.css`
-        background: ${theme.colors.orange[7]};
-        color: white;
+        background: ${theme.components.Button.warningBackground};
+        color: ${theme.components.Button.color};
 
         &:hover {
-          background: ${theme.colors.orange[6]};
+          background: ${polished.desaturate(
+        0.2,
+        theme.components.Button.warningBackground
+      )};
         }
 
         &:active {
-          background: ${theme.colors.orange[8]};
+          background: ${polished.darken(0.2, theme.components.Button.warningBackground)};
         }
       `;
     case "link":
       return styled.css`
         background: transparent;
-        color: ${theme.colors.violet[8]};
+        color: ${theme.colors[theme.primaryColor][8]};
 
         .quen-ui__text {
           color: unset;
         }
 
         &:hover {
-          color: ${theme.colors.violet[6]};
+          color: ${polished.darken(0.1, theme.colors[theme.primaryColor][8])};
         }
 
         &:active {
-          color: ${theme.colors.violet[9]};
+          color: ${polished.darken(0.2, theme.colors[theme.primaryColor][8])};
         }
 
         &:disabled {
-          color: ${theme.colors.violet[1]};
+          color: ${theme.components.Button.disabledColor};
         }
       `;
     case "icon":
@@ -134,9 +124,10 @@ const getBackground = (theme, view = "primary", isDisabled) => {
     default:
       return styled.css`
         background: ${theme.colors[theme.primaryColor][9]};
-        color: white;
+        color: ${theme.components.Button.color};
+
         .quen-ui__text {
-          color: white;
+          color: ${theme.components.Button.color};
         }
 
         &:hover {
@@ -155,11 +146,15 @@ const ButtonStyled = styled.button.withConfig({
   border: none;
   background: none;
   outline: none;
-  ${({ size, viewButton }) => getSizing(viewButton || "primary", size)}
+  ${({ theme, size = "m", viewButton }) => styled.css`
+    height: ${theme.control.height[size]};
+    ${viewButton === "icon" && `width: ${theme.control.height[size]}`}
+  `};
+
   cursor: pointer;
   padding-left: ${({ viewButton }) => viewButton === "icon" ? "0.25" : "0.75"}rem;
   padding-right: ${({ viewButton }) => viewButton === "icon" ? "0.25" : "0.75"}rem;
-  border-radius: 0.25rem;
+  border-radius: ${({ theme }) => theme.components.Button.radius};
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -169,8 +164,8 @@ const ButtonStyled = styled.button.withConfig({
   ${({ theme, viewButton, isDisabled }) => getBackground(theme, viewButton, isDisabled)};
 
   &:disabled {
-    background: ${({ theme }) => theme.colors.gray["2"]};
-    color: ${({ theme }) => theme.colors.gray["4"]};
+    background: ${({ theme }) => theme.components.Button.disabledBackground};
+    color: ${({ theme }) => theme.components.Button.disabledColor};
     cursor: not-allowed;
   }
 `;