@quen-ui/components 0.0.14

package/dist/TextField/TextField.es.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import Text from "../typography/Text/Text.es.js";
+import Button from "../Button/Button.es.js";
+import { TextFieldWrapper, TextFieldInputWrapper, TextFieldInputStyled } from "./styles.es.js";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+const TextField = ({
+  value,
+  onBlur,
+  onFocus,
+  onChange,
+  onClear,
+  leftContent,
+  rightContent,
+  id,
+  name,
+  className,
+  label,
+  size = "m",
+  disabled,
+  required,
+  error,
+  placeholder,
+  clearable,
+  classNameInput,
+  type,
+  ...props
+}) => {
+  const [focus, setFocus] = useState(false);
+  const inputRef = useRef(null);
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.value, event);
+  };
+  const handleClick = () => {
+    var _a;
+    setFocus(true);
+    (_a = inputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleBlur = (event) => {
+    setFocus(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClearClick = (event) => {
+    event.stopPropagation();
+    onChange == null ? void 0 : onChange("", event);
+    onClear == null ? void 0 : onClear(event);
+  };
+  return /* @__PURE__ */ jsxs(TextFieldWrapper, { className, id, "data-testid": "text-field", children: [
+    label && /* @__PURE__ */ jsxs(Text, { as: "label", size, children: [
+      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 })
+  ] });
+};
+export {
+  TextField as default
+};

package/dist/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField';
+export type { ITextFieldProps } from './types';

package/dist/TextField/styles.cjs.js

@@ -0,0 +1,65 @@
+"use strict";
+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 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]};
+  }
+
+  ${({ 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;

package/dist/TextField/styles.d.ts

@@ -0,0 +1,9 @@
+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;

package/dist/TextField/styles.es.js

@@ -0,0 +1,65 @@
+import styled, { css } 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]};
+  }
+`;
+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]};
+  }
+
+  ${({ 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
+};

package/dist/TextField/types.d.ts

@@ -0,0 +1,41 @@
+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;
+    /** 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 */
+    onFocus?: React.FocusEventHandler;
+    /** Value change handler */
+    onChange?: (value: string, event: React.ChangeEvent | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    /** Clear button handler */
+    onClear?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    /** Controlled input value */
+    value?: string;
+    /** Shows clear button */
+    clearable?: boolean;
+    /** Input element class */
+    classNameInput?: string;
+    type?: React.HTMLInputTypeAttribute;
+}

package/dist/Textarea/Textarea.cjs.js

@@ -0,0 +1,103 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+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");
+const Textarea = ({
+  value,
+  onBlur,
+  onFocus,
+  onChange,
+  onClear,
+  leftContent,
+  rightContent,
+  id,
+  name,
+  className,
+  label,
+  size = "m",
+  disabled,
+  required,
+  error,
+  placeholder,
+  clearable,
+  classNameTextarea,
+  autosize,
+  maxRows,
+  minRows,
+  ...props
+}) => {
+  const [isFocus, setIsFocus] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.value, event);
+  };
+  const handleClick = () => {
+    var _a;
+    setIsFocus(true);
+    (_a = inputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleBlur = (event) => {
+    setIsFocus(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClearClick = (event) => {
+    event.stopPropagation();
+    onClear == null ? void 0 : onClear(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.TextareaComponentWrapper, { className, ...props, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, for: id, children: [
+      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 })
+  ] });
+};
+module.exports = Textarea;

package/dist/Textarea/Textarea.d.ts

@@ -0,0 +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;
+export default Textarea;

package/dist/Textarea/Textarea.es.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+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 SvgIconClose from "../assets/icon-close.svg.es.js";
+const Textarea = ({
+  value,
+  onBlur,
+  onFocus,
+  onChange,
+  onClear,
+  leftContent,
+  rightContent,
+  id,
+  name,
+  className,
+  label,
+  size = "m",
+  disabled,
+  required,
+  error,
+  placeholder,
+  clearable,
+  classNameTextarea,
+  autosize,
+  maxRows,
+  minRows,
+  ...props
+}) => {
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef(null);
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.value, event);
+  };
+  const handleClick = () => {
+    var _a;
+    setIsFocus(true);
+    (_a = inputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleBlur = (event) => {
+    setIsFocus(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClearClick = (event) => {
+    event.stopPropagation();
+    onClear == null ? void 0 : onClear(event);
+  };
+  return /* @__PURE__ */ jsxs(TextareaComponentWrapper, { className, ...props, children: [
+    label && /* @__PURE__ */ jsxs(Text, { as: "label", size, for: id, children: [
+      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 })
+  ] });
+};
+export {
+  Textarea as default
+};

package/dist/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from './Textarea';
+export type { ITextareaProps } from './types';

package/dist/Textarea/styles.cjs.js

@@ -0,0 +1,80 @@
+"use strict";
+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]};
+  }
+  
+  .text-field__error-message {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+`;
+const TextareaStyled = styled(Text)`
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  resize: none;
+  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

@@ -0,0 +1,9 @@
+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 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;

package/dist/Textarea/styles.es.js

@@ -0,0 +1,80 @@
+import styled, { css } from "styled-components";
+import Text from "../typography/Text/Text.es.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]};
+  }
+  
+  .text-field__error-message {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+`;
+const TextareaStyled = styled(Text)`
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  resize: none;
+  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 && 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;
+    textarea {
+      background: ${theme.colors.gray[2]};
+      color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
+    }
+  `};
+`;
+export {
+  TextareaComponentWrapper,
+  TextareaStyled,
+  TextareaWrapper
+};