@quen-ui/components 0.0.14 → 1.0.1

package/dist/TextField/styles.cjs.js

@@ -2,64 +2,23 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Text = require("../typography/Text/Text.cjs.js");
-const TextFieldWrapper = styled.div.attrs({ className: "quen-ui__text-field" })`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-
-  .text-field__required {
-    color: ${({ theme }) => theme.colors.red[7]};
-  }
-
-  .text-field__error-message {
-    color: ${({ theme }) => theme.colors.red[7]};
-  }
-`;
+const InputBase = require("../InputBase/InputBase.cjs.js");
 const TextFieldInputStyled = styled(Text)`
   box-sizing: border-box;
   outline: none;
   border: none;
   background: transparent;
   width: 100%;
-`;
-const TextFieldInputWrapper = styled.div.withConfig({
-  shouldForwardProp: (props) => !["size", "focus", "error", "disabled"].includes(props)
-})`
-  height: ${({ size, theme }) => theme.control.height[size]};
-  border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.gray[3]};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray[5]};
-  display: flex;
-  align-items: center;
-  padding-left: 0.75rem;
   padding-right: 0.75rem;
-  gap: 0.5rem;
   
-  color: ${({ theme }) => theme.colors.gray[9]};
-
-  &:hover {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.gray[8]};
+  &:disabled {
+    color: ${({ theme }) => theme.components.Input.disabledColor};
+  }
+`;
+const TextFieldStyled = styled(InputBase)`
+  .quen-ui__input-base__container {
+    padding-right: 0.75rem;
   }
-
-  ${({ focus }) => focus && styled.css`
-      border-bottom: 2px solid
-        ${({ theme }) => theme.colors.violet[9]}!important;
-    `}
-
-  ${({ error, theme }) => error && styled.css`
-      border-bottom: 2px solid ${theme.colors.red[9]}!important;
-    `};
-
-  ${({ disabled, theme }) => disabled && styled.css`
-      background: ${theme.colors.gray[2]};
-      border-bottom: 1px solid ${theme.colors.gray[4]}!important;
-      input {
-        background: ${theme.colors.gray[2]};
-        color: ${theme.colors.gray[4]};
-      }
-    `};
 `;
 exports.TextFieldInputStyled = TextFieldInputStyled;
-exports.TextFieldInputWrapper = TextFieldInputWrapper;
-exports.TextFieldWrapper = TextFieldWrapper;
+exports.TextFieldStyled = TextFieldStyled;

package/dist/TextField/styles.d.ts

@@ -1,9 +1,4 @@
-import { TQuenSize } from '../types/size';
-export declare const TextFieldWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
 export declare const TextFieldInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').ITextProps, never>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
-export declare const TextFieldInputWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    size: TQuenSize;
-    focus: boolean;
-    error?: string | boolean;
-    disabled?: boolean;
-}>> & string;
+export declare const TextFieldStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../InputBase').IInputBaseProps & {
+    children?: import('react').ReactNode | undefined;
+}, never>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<import('../InputBase').IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;

package/dist/TextField/styles.es.js

@@ -1,65 +1,24 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import Text from "../typography/Text/Text.es.js";
-const TextFieldWrapper = styled.div.attrs({ className: "quen-ui__text-field" })`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-
-  .text-field__required {
-    color: ${({ theme }) => theme.colors.red[7]};
-  }
-
-  .text-field__error-message {
-    color: ${({ theme }) => theme.colors.red[7]};
-  }
-`;
+import InputBase from "../InputBase/InputBase.es.js";
 const TextFieldInputStyled = styled(Text)`
   box-sizing: border-box;
   outline: none;
   border: none;
   background: transparent;
   width: 100%;
-`;
-const TextFieldInputWrapper = styled.div.withConfig({
-  shouldForwardProp: (props) => !["size", "focus", "error", "disabled"].includes(props)
-})`
-  height: ${({ size, theme }) => theme.control.height[size]};
-  border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.gray[3]};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray[5]};
-  display: flex;
-  align-items: center;
-  padding-left: 0.75rem;
   padding-right: 0.75rem;
-  gap: 0.5rem;
   
-  color: ${({ theme }) => theme.colors.gray[9]};
-
-  &:hover {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.gray[8]};
+  &:disabled {
+    color: ${({ theme }) => theme.components.Input.disabledColor};
+  }
+`;
+const TextFieldStyled = styled(InputBase)`
+  .quen-ui__input-base__container {
+    padding-right: 0.75rem;
   }
-
-  ${({ focus }) => focus && css`
-      border-bottom: 2px solid
-        ${({ theme }) => theme.colors.violet[9]}!important;
-    `}
-
-  ${({ error, theme }) => error && css`
-      border-bottom: 2px solid ${theme.colors.red[9]}!important;
-    `};
-
-  ${({ disabled, theme }) => disabled && css`
-      background: ${theme.colors.gray[2]};
-      border-bottom: 1px solid ${theme.colors.gray[4]}!important;
-      input {
-        background: ${theme.colors.gray[2]};
-        color: ${theme.colors.gray[4]};
-      }
-    `};
 `;
 export {
   TextFieldInputStyled,
-  TextFieldInputWrapper,
-  TextFieldWrapper
+  TextFieldStyled
 };

package/dist/TextField/types.d.ts

@@ -1,28 +1,10 @@
 import { default as React } from 'react';
-import { TQuenSize } from '../types/size';
-export interface ITextFieldProps {
-    /** Visual size */
-    size?: TQuenSize;
-    /** Input label */
-    label?: string;
-    /** Marks as required */
-    required?: boolean;
-    /** Error state/message */
-    error?: string | boolean;
+import { IInputBaseProps } from '../InputBase';
+export interface ITextFieldProps extends IInputBaseProps {
     /** Placeholder text */
     placeholder?: string;
-    /** Left-side adornment */
-    leftContent?: React.ReactNode;
-    /** Right-side adornment */
-    rightContent?: React.ReactNode;
-    /** Disables interaction */
-    disabled?: boolean;
-    /** DOM ID for input */
-    id?: string;
     /** Form input name */
     name?: string;
-    /** Container class */
-    className?: string;
     /** Blur event handler */
     onBlur?: React.FocusEventHandler;
     /** Focus event handler */

package/dist/Textarea/Textarea.cjs.js

@@ -1,8 +1,8 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const helpers = require("@quen-ui/helpers");
 const TextareaAutosize = require("react-textarea-autosize");
-const Text = require("../typography/Text/Text.cjs.js");
 const Button = require("../Button/Button.cjs.js");
 const styles = require("./styles.cjs.js");
 const iconClose = require("../assets/icon-close.svg.cjs.js");
@@ -28,76 +28,77 @@ const Textarea = ({
   autosize,
   maxRows,
   minRows,
+  style,
   ...props
 }) => {
   const [isFocus, setIsFocus] = 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;
     setIsFocus(true);
-    (_a = inputRef.current) == null ? void 0 : _a.click();
+    inputRef.current?.click();
   };
   const handleBlur = (event) => {
     setIsFocus(false);
-    onBlur == null ? void 0 : onBlur(event);
+    onBlur?.(event);
   };
   const handleClearClick = (event) => {
     event.stopPropagation();
-    onClear == null ? void 0 : onClear(event);
+    onClear?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles.TextareaComponentWrapper, { className, ...props, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, for: id, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.TextareaComponentWrapper,
+    {
+      onClick: handleClick,
+      className: helpers.cnMerge(className, {
+        "quen-ui__input-base--focus-input": isFocus
+      }),
+      ...props,
+      size,
+      disabled,
+      error,
+      required,
       label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-field__required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      styles.TextareaWrapper,
-      {
-        disabled,
-        size,
-        onClick: handleClick,
-        focus: isFocus,
-        error,
-        children: [
-          leftContent,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            styles.TextareaStyled,
-            {
-              id,
-              disabled,
-              className: classNameTextarea,
-              name,
-              ref: inputRef,
-              size,
-              forwardedAs: autosize ? TextareaAutosize : "textarea",
-              value,
-              onChange: handleChange,
-              onBlur: handleBlur,
-              placeholder,
-              onFocus,
-              maxRows,
-              minRows,
-              rows: minRows
-            }
-          ),
-          clearable && /* @__PURE__ */ jsxRuntime.jsx(
-            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 })
-  ] });
+      id,
+      style,
+      leftContent,
+      rightContent,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styles.TextareaStyled,
+          {
+            id,
+            disabled,
+            className: classNameTextarea,
+            name,
+            ref: inputRef,
+            size,
+            forwardedAs: autosize ? TextareaAutosize : "textarea",
+            value,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            placeholder,
+            onFocus,
+            maxRows,
+            minRows,
+            rows: minRows
+          }
+        ),
+        clearable && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            view: "icon",
+            size: "xs",
+            onClick: handleClearClick,
+            disabled,
+            children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
 };
 module.exports = Textarea;

package/dist/Textarea/Textarea.d.ts

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

package/dist/Textarea/Textarea.es.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
+import { cnMerge } from "@quen-ui/helpers";
 import TextareaAutosize from "react-textarea-autosize";
-import Text from "../typography/Text/Text.es.js";
 import Button from "../Button/Button.es.js";
-import { TextareaComponentWrapper, TextareaWrapper, TextareaStyled } from "./styles.es.js";
+import { TextareaComponentWrapper, TextareaStyled } from "./styles.es.js";
 import SvgIconClose from "../assets/icon-close.svg.es.js";
 const Textarea = ({
   value,
@@ -27,77 +27,78 @@ const Textarea = ({
   autosize,
   maxRows,
   minRows,
+  style,
   ...props
 }) => {
   const [isFocus, setIsFocus] = 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;
     setIsFocus(true);
-    (_a = inputRef.current) == null ? void 0 : _a.click();
+    inputRef.current?.click();
   };
   const handleBlur = (event) => {
     setIsFocus(false);
-    onBlur == null ? void 0 : onBlur(event);
+    onBlur?.(event);
   };
   const handleClearClick = (event) => {
     event.stopPropagation();
-    onClear == null ? void 0 : onClear(event);
+    onClear?.(event);
   };
-  return /* @__PURE__ */ jsxs(TextareaComponentWrapper, { className, ...props, children: [
-    label && /* @__PURE__ */ jsxs(Text, { as: "label", size, for: id, children: [
+  return /* @__PURE__ */ jsxs(
+    TextareaComponentWrapper,
+    {
+      onClick: handleClick,
+      className: cnMerge(className, {
+        "quen-ui__input-base--focus-input": isFocus
+      }),
+      ...props,
+      size,
+      disabled,
+      error,
+      required,
       label,
-      required && /* @__PURE__ */ jsx("span", { className: "text-field__required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      TextareaWrapper,
-      {
-        disabled,
-        size,
-        onClick: handleClick,
-        focus: isFocus,
-        error,
-        children: [
-          leftContent,
-          /* @__PURE__ */ jsx(
-            TextareaStyled,
-            {
-              id,
-              disabled,
-              className: classNameTextarea,
-              name,
-              ref: inputRef,
-              size,
-              forwardedAs: autosize ? TextareaAutosize : "textarea",
-              value,
-              onChange: handleChange,
-              onBlur: handleBlur,
-              placeholder,
-              onFocus,
-              maxRows,
-              minRows,
-              rows: minRows
-            }
-          ),
-          clearable && /* @__PURE__ */ jsx(
-            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 })
-  ] });
+      id,
+      style,
+      leftContent,
+      rightContent,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          TextareaStyled,
+          {
+            id,
+            disabled,
+            className: classNameTextarea,
+            name,
+            ref: inputRef,
+            size,
+            forwardedAs: autosize ? TextareaAutosize : "textarea",
+            value,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            placeholder,
+            onFocus,
+            maxRows,
+            minRows,
+            rows: minRows
+          }
+        ),
+        clearable && /* @__PURE__ */ jsx(
+          Button,
+          {
+            view: "icon",
+            size: "xs",
+            onClick: handleClearClick,
+            disabled,
+            children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   Textarea as default

package/dist/Textarea/styles.cjs.js

@@ -2,33 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Text = require("../typography/Text/Text.cjs.js");
-const getHeight = (size) => {
-  switch (size) {
-    case "l":
-      return 3;
-    //48px
-    case "s":
-      return 2;
-    //32px
-    case "xs":
-      return 1.5;
-    // 24px
-    case "m":
-    default:
-      return 2.5;
-  }
-};
-const TextareaComponentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  .text-field__required {
-    color: ${({ theme }) => theme.colors.red[9]};
+const InputBase = require("../InputBase/InputBase.cjs.js");
+const TextareaComponentWrapper = styled(InputBase)`
+  .quen-ui__input-base__container {
+    padding-right: 0.75rem;  
   }
   
-  .text-field__error-message {
-    color: ${({ theme }) => theme.colors.red[9]};
+  textarea {
+    padding-top: 7px;
+    padding-bottom: 7px;
+    height: 100%;
+    background: ${({ disabled, theme }) => disabled && theme.components.Input.disabledBackground};
+    color: ${({ disabled, theme }) => disabled && theme.components.Input.disabledColor};
   }
 `;
 const TextareaStyled = styled(Text)`
@@ -39,42 +24,5 @@ const TextareaStyled = styled(Text)`
   width: 100%;
   background: transparent;
 `;
-const TextareaWrapper = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["size", "focus", "error", "disabled"].includes(prop)
-})`
-  min-height: ${({ size }) => getHeight(size)}rem;
-  border-radius: 0.25rem;
-  border: 1px solid ${({ theme }) => theme.colors.gray[3]};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray[5]};
-  display: flex;
-  align-items: center;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  gap: 0.5rem;
-  color: ${({ theme }) => theme.colors.gray[9]};
-
-  &:hover {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.gray[8]};
-  }
-
-  ${({ focus }) => focus && styled.css`
-      border-bottom: 2px solid
-        ${({ theme }) => theme.colors.violet[9]}!important;
-    `}
-  
-  ${({ error, theme }) => error && styled.css`
-    border-bottom: 2px solid ${theme.colors.red[9]}!important;
-  `};
-
-  ${({ disabled, theme }) => disabled && styled.css`
-    background: ${theme.colors.gray[2]};
-    border-bottom: 1px solid ${theme.colors.gray[4]}!important;
-    textarea {
-      background: ${theme.colors.gray[2]};
-      color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
-    }
-  `};
-`;
 exports.TextareaComponentWrapper = TextareaComponentWrapper;
 exports.TextareaStyled = TextareaStyled;
-exports.TextareaWrapper = TextareaWrapper;

package/dist/Textarea/styles.d.ts

@@ -1,9 +1,4 @@
-import { TQuenSize } from '../types/size';
-export declare const TextareaComponentWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TextareaComponentWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../InputBase').IInputBaseProps & {
+    children?: import('react').ReactNode | undefined;
+}, never>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<import('../InputBase').IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const TextareaStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').ITextProps, never>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
-export declare const TextareaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    size: TQuenSize;
-    focus: boolean;
-    error?: string | boolean;
-    disabled?: boolean;
-}>> & string;