@quen-ui/components 0.0.14 → 1.0.0

package/dist/Tabs/styles.d.ts

@@ -1,9 +1,11 @@
 import { ITabsListProps } from './types';
 export declare const TabStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('..').ITextProps, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, {
     selected: boolean;
+    outline?: boolean;
 }>> & string;
 export declare const TabsListStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     justify: ITabsListProps["justify"];
     isGrow?: boolean;
+    outline?: boolean;
 }>> & string;
 export declare const TabPanelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Tabs/styles.es.js

@@ -1,13 +1,77 @@
 import styled, { css } from "styled-components";
 import Text from "../typography/Text/Text.es.js";
+const getTabStyled = (theme, selected, outline) => {
+  if (outline) {
+    return css`
+      border-style: solid;
+      border-width: 1px;
+      border-top-left-radius: ${theme.components.Tabs.radius};
+      border-top-right-radius: ${theme.components.Tabs.radius};
+      border-color: transparent;
+      background: transparent;
+      color: ${theme.components.Tabs.color};
+      
+      ${selected ? css`
+        border-top-color: ${theme.components.Tabs.hoverColor};
+        border-left-color: ${theme.components.Tabs.hoverColor};
+        border-right-color: ${theme.components.Tabs.hoverColor};
+        border-bottom-color: var(--tab-background, white);
+        
+        &::after {
+          content: "";
+          position: absolute;
+          left: -1px;
+          right: -1px;
+          bottom: calc(-1 * (${theme.components.Tabs.borderWidth}));
+          height: ${theme.components.Tabs.borderWidth};
+          background: transparent;
+        }
+      ` : css`
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-right-color: transparent;
+      `};
+
+      &:hover:not(:disabled) {
+        color: ${theme.components.Tabs.hoverColor};
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        color: ${theme.components.Tabs.disabledColor};
+      }
+    `;
+  }
+  return css`
+    border-radius: ${`${theme.components.Tabs.radius} ${theme.components.Tabs.radius} 0 0`};
+    border-width: 0 0 0.125rem 0;
+    border-style: solid;
+    border-color: transparent;
+    background: transparent;
+    color: ${theme.components.Tabs.color};
+
+    ${selected && css`
+      border-color: ${theme.components.Tabs.activeColor};
+    `}
+
+    &:disabled {
+      cursor: not-allowed;
+      color: ${theme.components.Tabs.disabledColor};
+    }
+
+    &:hover:not(:disabled) {
+      color: ${theme.components.Tabs.hoverColor};
+      border-color: ${theme.components.Tabs.hoverBorderColor};
+      * {
+        color: ${theme.components.Tabs.hoverColor};
+      }
+    }
+  `;
+};
 const TabStyled = styled(Text).attrs({ as: "button" }).withConfig({
-  shouldForwardProp: (prop) => prop !== "isSelected"
+  shouldForwardProp: (prop) => !["selected", "outline"].includes(prop)
 })`
-  border-radius: 0.25rem 0.25rem 0 0;
-  border-width:  0 0 0.125rem 0;
-  border-style: solid;
-  border-color: transparent;
-  background: transparent;
+
   position: relative;
   padding: 0.625rem;
   white-space: nowrap;
@@ -17,27 +81,43 @@ const TabStyled = styled(Text).attrs({ as: "button" }).withConfig({
   justify-content: center;
   cursor: pointer;
   gap: 8px;
-  color: ${({ theme }) => theme.textColor};
-  
-  ${({ selected, theme }) => selected && css`
-      border-color: ${theme.colors[theme.primaryColor][9]};
-    `}
   
-  &:disabled {
-    cursor: not-allowed;
-    color: ${({ theme }) => theme.colors.gray[4]};
-  }
+  ${({ theme, selected, outline }) => getTabStyled(theme, selected, outline)};
 
-  &:hover:not(:disabled) {
-    color: ${({ theme }) => theme.colors.grayViolet[9]};
-    border-color: ${({ theme }) => theme.colors[theme.primaryColor][7]};
-    * {
-      color: ${({ theme }) => theme.colors.grayViolet[9]};
-    }
-  }
 `;
+const getTabsListStyled = (theme, outline) => {
+  if (outline) {
+    return css`
+      position: relative;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: ${theme.components.Tabs.borderWidth};
+        background: ${theme.components.Tabs.hoverColor};
+      }
+    `;
+  }
+  if (!outline) {
+    return css`
+      &:before {
+        content: "";
+        position: absolute;
+        border-color: ${theme.components.Tabs.hoverColor};
+        border-width: ${theme.components.Tabs.borderWidth};
+        border-style: solid;
+        bottom: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        top: unset;
+      }
+    `;
+  }
+};
 const TabsListStyled = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["justify", "isGrow"].includes(prop)
+  shouldForwardProp: (prop) => !["justify", "isGrow", "outline"].includes(prop)
 })`
   display: flex;
   flex-wrap: wrap;
@@ -52,17 +132,7 @@ const TabsListStyled = styled.div.withConfig({
       }
     `};
 
-  &:before {
-    content: "";
-    position: absolute;
-    border-color: ${({ theme }) => theme.colors.grayViolet[9]};
-    border-width: 0.0625rem;
-    border-style: solid;
-    bottom: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    top: unset;
-  }
+  ${({ theme, outline }) => getTabsListStyled(theme, outline)}
 `;
 const TabPanelStyled = styled.div`
   padding-top: 0.625rem;

package/dist/Tabs/types.d.ts

@@ -24,6 +24,8 @@ export interface ITabsProps {
     keepMounted?: boolean;
     /** Tab change handler */
     onChange?: (value: string) => void;
+    /** Adds an outline border to the active tab instead of a filled background */
+    outline?: boolean;
 }
 export interface ITabsListProps {
     /** <Tab> components */
@@ -36,12 +38,14 @@ export interface ITabsListProps {
     justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
 }
 export interface ITabsContext {
-    /**  */
+    /** Active tab value */
     value: string | undefined;
-    /**  */
+    /** Keeps hidden tabs in DOM */
     keepMounted?: boolean;
-    /**  */
+    /** Tab change handler */
     onChange: (value: string) => void;
+    /** Adds an outline border to the active tab instead of a filled background */
+    outline?: boolean;
 }
 export interface ITabPanelProps {
     /** Panel content */

package/dist/Tag/Tag.cjs.js

@@ -10,12 +10,15 @@ const Tag = ({
   className,
   closable,
   onClickClose,
+  size = "m",
+  color,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.TagStyled,
     {
-      size: "m",
+      color,
+      size,
       disabled,
       onClick,
       className,

package/dist/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ITagProps } from './types';
-declare const Tag: ({ children, disabled, icon, onClick, className, closable, onClickClose, ...props }: ITagProps) => React.ReactElement;
+declare const Tag: ({ children, disabled, icon, onClick, className, closable, onClickClose, size, color, ...props }: ITagProps) => React.ReactElement;
 export default Tag;

package/dist/Tag/Tag.es.js

@@ -9,12 +9,15 @@ const Tag = ({
   className,
   closable,
   onClickClose,
+  size = "m",
+  color,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(
     TagStyled,
     {
-      size: "m",
+      color,
+      size,
       disabled,
       onClick,
       className,

package/dist/Tag/styles.cjs.js

@@ -2,8 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Text = require("../typography/Text/Text.cjs.js");
+const getBackground = (theme, color) => {
+  if (color && color in theme.colors) {
+    return theme.colors[color][4];
+  }
+  return theme.components.Tag.background;
+};
 const TagStyled = styled(Text).withConfig({
-  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+  shouldForwardProp: (prop) => !["disabled", "color"].includes(prop)
 })`
   display: flex;
   align-items: center;
@@ -12,15 +18,14 @@ const TagStyled = styled(Text).withConfig({
   padding: 0.15rem;
   width: max-content;
   border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.violet[4]};
-  background: ${({ theme }) => theme.colors.grayViolet[4]};
+  border: 1px solid ${({ theme }) => theme.components.Tag.borderColor};
+  background: ${({ theme, color }) => getBackground(theme, color)};
 
   ${({ disabled, theme }) => disabled && styled.css`
-      border: 1px solid ${({ theme: theme2 }) => theme2.colors.violet[2]};
-      background: ${theme.colors.gray[2]};
-      color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
+      background: ${theme.components.Tag.disabledBackground};
+      color: ${({ theme: theme2 }) => theme2.components.Tag.disabledColor};
       * {
-        color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
+        color: ${({ theme: theme2 }) => theme2.components.Tag.disabledColor};
       }
     `}
 `;
@@ -30,7 +35,7 @@ const TagButtonClosable = styled.button.withConfig({
   cursor: pointer;
   padding: 2px;
   border: 1px solid
-    ${({ theme, disabled }) => disabled ? theme.colors.gray[2] : theme.colors.gray[4]};
+    ${({ theme, disabled }) => disabled ? theme.components.Tag.disabledBackground : theme.components.Tag.disabledColor};
   background: transparent;
   border-radius: 0.5rem;
   display: flex;
@@ -38,7 +43,7 @@ const TagButtonClosable = styled.button.withConfig({
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  
+
   &:disabled {
     cursor: not-allowed;
   }

package/dist/Tag/styles.d.ts

@@ -1,5 +1,7 @@
+import { IQuenUITheme } from '../../../theme/src';
 export declare const TagStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').ITextProps, {
     disabled?: boolean;
+    color?: keyof IQuenUITheme["colors"];
 }>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
 export declare const TagButtonClosable: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     disabled?: boolean;

package/dist/Tag/styles.es.js

@@ -1,7 +1,13 @@
 import styled, { css } from "styled-components";
 import Text from "../typography/Text/Text.es.js";
+const getBackground = (theme, color) => {
+  if (color && color in theme.colors) {
+    return theme.colors[color][4];
+  }
+  return theme.components.Tag.background;
+};
 const TagStyled = styled(Text).withConfig({
-  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+  shouldForwardProp: (prop) => !["disabled", "color"].includes(prop)
 })`
   display: flex;
   align-items: center;
@@ -10,15 +16,14 @@ const TagStyled = styled(Text).withConfig({
   padding: 0.15rem;
   width: max-content;
   border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.violet[4]};
-  background: ${({ theme }) => theme.colors.grayViolet[4]};
+  border: 1px solid ${({ theme }) => theme.components.Tag.borderColor};
+  background: ${({ theme, color }) => getBackground(theme, color)};
 
   ${({ disabled, theme }) => disabled && css`
-      border: 1px solid ${({ theme: theme2 }) => theme2.colors.violet[2]};
-      background: ${theme.colors.gray[2]};
-      color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
+      background: ${theme.components.Tag.disabledBackground};
+      color: ${({ theme: theme2 }) => theme2.components.Tag.disabledColor};
       * {
-        color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
+        color: ${({ theme: theme2 }) => theme2.components.Tag.disabledColor};
       }
     `}
 `;
@@ -28,7 +33,7 @@ const TagButtonClosable = styled.button.withConfig({
   cursor: pointer;
   padding: 2px;
   border: 1px solid
-    ${({ theme, disabled }) => disabled ? theme.colors.gray[2] : theme.colors.gray[4]};
+    ${({ theme, disabled }) => disabled ? theme.components.Tag.disabledBackground : theme.components.Tag.disabledColor};
   background: transparent;
   border-radius: 0.5rem;
   display: flex;
@@ -36,7 +41,7 @@ const TagButtonClosable = styled.button.withConfig({
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  
+
   &:disabled {
     cursor: not-allowed;
   }

package/dist/Tag/types.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
+import { IQuenUITheme } from '../../../theme/src';
+import { TQuenSize } from '../types/size';
 export interface ITagProps {
     /** Disables interaction */
     disabled?: boolean;
@@ -14,5 +16,9 @@ export interface ITagProps {
     className?: string;
     /** Content */
     children: React.ReactNode;
+    /** Controls track height. Default size 'm' */
+    size?: TQuenSize;
+    /** Background color from theme tokens */
+    color?: keyof IQuenUITheme["colors"];
     [key: string]: any;
 }

package/dist/TextField/TextField.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Text = require("../typography/Text/Text.cjs.js");
+const helpers = require("@quen-ui/helpers");
 const Button = require("../Button/Button.cjs.js");
 const styles = require("./styles.cjs.js");
 const iconClose = require("../assets/icon-close.svg.cjs.js");
@@ -25,76 +25,77 @@ const TextField = ({
   clearable,
   classNameInput,
   type,
+  style,
   ...props
 }) => {
   const [focus, setFocus] = React.useState(false);
   const inputRef = React.useRef(null);
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.value, event);
+    onChange?.(event.target.value, event);
   };
   const handleClick = () => {
-    var _a;
     setFocus(true);
-    (_a = inputRef.current) == null ? void 0 : _a.click();
+    inputRef.current?.click();
   };
   const handleBlur = (event) => {
     setFocus(false);
-    onBlur == null ? void 0 : onBlur(event);
+    onBlur?.(event);
   };
   const handleClearClick = (event) => {
     event.stopPropagation();
-    onChange == null ? void 0 : onChange("", event);
-    onClear == null ? void 0 : onClear(event);
+    onChange?.("", event);
+    onClear?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles.TextFieldWrapper, { className, id, "data-testid": "text-field", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.TextFieldStyled,
+    {
+      "data-testid": "text-field",
+      onClick: handleClick,
+      size,
+      error,
+      disabled,
+      className: helpers.cnMerge(className, {
+        "quen-ui__input-base--focus-input": focus
+      }),
+      rightContent,
+      leftContent,
+      id,
+      style,
       label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-field__required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      styles.TextFieldInputWrapper,
-      {
-        disabled,
-        size,
-        onClick: handleClick,
-        focus,
-        error,
-        children: [
-          leftContent,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            styles.TextFieldInputStyled,
-            {
-              type,
-              disabled,
-              className: classNameInput,
-              name,
-              ref: inputRef,
-              size,
-              forwardedAs: "input",
-              value,
-              onChange: handleChange,
-              onBlur: handleBlur,
-              placeholder,
-              onFocus,
-              ...props
-            }
-          ),
-          clearable && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              "data-testid": "clearable-button",
-              view: "icon",
-              size: "xs",
-              onClick: handleClearClick,
-              disabled,
-              children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16, height: 16 })
-            }
-          ),
-          rightContent
-        ]
-      }
-    ),
-    typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "text-field__error-message", size: "xs", children: error })
-  ] });
+      required,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styles.TextFieldInputStyled,
+          {
+            type,
+            disabled,
+            className: classNameInput,
+            name,
+            ref: inputRef,
+            size,
+            forwardedAs: "input",
+            value,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            placeholder,
+            onFocus,
+            ...props
+          }
+        ),
+        clearable && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            "aria-label": "clear",
+            "data-testid": "clearable-button",
+            view: "icon",
+            size: "xs",
+            onClick: handleClearClick,
+            disabled,
+            children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
 };
 module.exports = TextField;

package/dist/TextField/TextField.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ITextFieldProps } from './types';
-declare const TextField: ({ value, onBlur, onFocus, onChange, onClear, leftContent, rightContent, id, name, className, label, size, disabled, required, error, placeholder, clearable, classNameInput, type, ...props }: ITextFieldProps) => React.ReactElement;
+declare const TextField: ({ value, onBlur, onFocus, onChange, onClear, leftContent, rightContent, id, name, className, label, size, disabled, required, error, placeholder, clearable, classNameInput, type, style, ...props }: ITextFieldProps) => React.ReactElement;
 export default TextField;

package/dist/TextField/TextField.es.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import Text from "../typography/Text/Text.es.js";
+import { cnMerge } from "@quen-ui/helpers";
 import Button from "../Button/Button.es.js";
-import { TextFieldWrapper, TextFieldInputWrapper, TextFieldInputStyled } from "./styles.es.js";
+import { TextFieldStyled, TextFieldInputStyled } from "./styles.es.js";
 import SvgIconClose from "../assets/icon-close.svg.es.js";
 const TextField = ({
   value,
@@ -24,77 +24,78 @@ const TextField = ({
   clearable,
   classNameInput,
   type,
+  style,
   ...props
 }) => {
   const [focus, setFocus] = useState(false);
   const inputRef = useRef(null);
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.value, event);
+    onChange?.(event.target.value, event);
   };
   const handleClick = () => {
-    var _a;
     setFocus(true);
-    (_a = inputRef.current) == null ? void 0 : _a.click();
+    inputRef.current?.click();
   };
   const handleBlur = (event) => {
     setFocus(false);
-    onBlur == null ? void 0 : onBlur(event);
+    onBlur?.(event);
   };
   const handleClearClick = (event) => {
     event.stopPropagation();
-    onChange == null ? void 0 : onChange("", event);
-    onClear == null ? void 0 : onClear(event);
+    onChange?.("", event);
+    onClear?.(event);
   };
-  return /* @__PURE__ */ jsxs(TextFieldWrapper, { className, id, "data-testid": "text-field", children: [
-    label && /* @__PURE__ */ jsxs(Text, { as: "label", size, children: [
+  return /* @__PURE__ */ jsxs(
+    TextFieldStyled,
+    {
+      "data-testid": "text-field",
+      onClick: handleClick,
+      size,
+      error,
+      disabled,
+      className: cnMerge(className, {
+        "quen-ui__input-base--focus-input": focus
+      }),
+      rightContent,
+      leftContent,
+      id,
+      style,
       label,
-      required && /* @__PURE__ */ jsx("span", { className: "text-field__required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      TextFieldInputWrapper,
-      {
-        disabled,
-        size,
-        onClick: handleClick,
-        focus,
-        error,
-        children: [
-          leftContent,
-          /* @__PURE__ */ jsx(
-            TextFieldInputStyled,
-            {
-              type,
-              disabled,
-              className: classNameInput,
-              name,
-              ref: inputRef,
-              size,
-              forwardedAs: "input",
-              value,
-              onChange: handleChange,
-              onBlur: handleBlur,
-              placeholder,
-              onFocus,
-              ...props
-            }
-          ),
-          clearable && /* @__PURE__ */ jsx(
-            Button,
-            {
-              "data-testid": "clearable-button",
-              view: "icon",
-              size: "xs",
-              onClick: handleClearClick,
-              disabled,
-              children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16, height: 16 })
-            }
-          ),
-          rightContent
-        ]
-      }
-    ),
-    typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "text-field__error-message", size: "xs", children: error })
-  ] });
+      required,
+      children: [
+        /* @__PURE__ */ jsx(
+          TextFieldInputStyled,
+          {
+            type,
+            disabled,
+            className: classNameInput,
+            name,
+            ref: inputRef,
+            size,
+            forwardedAs: "input",
+            value,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            placeholder,
+            onFocus,
+            ...props
+          }
+        ),
+        clearable && /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "clear",
+            "data-testid": "clearable-button",
+            view: "icon",
+            size: "xs",
+            onClick: handleClearClick,
+            disabled,
+            children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   TextField as default