@quen-ui/components 0.0.14

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ITabsProps, ITabsContext } from './types';
+declare const Tabs: ({ children, defaultValue, keepMounted, onChange }: ITabsProps) => React.ReactElement;
+export declare const useTabsContext: () => ITabsContext | null;
+export default Tabs;

package/dist/Tabs/Tabs.es.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useMemo, useContext } from "react";
+const TabsContext = createContext(null);
+const Tabs = ({ children, defaultValue, keepMounted, onChange }) => {
+  const [value, setValue] = useState(defaultValue);
+  const handleChange = (currentValue) => {
+    setValue(currentValue);
+    onChange == null ? void 0 : onChange(currentValue);
+  };
+  const context = useMemo(() => ({
+    onChange: handleChange,
+    value,
+    keepMounted
+  }), [value]);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children });
+};
+const useTabsContext = () => useContext(TabsContext);
+export {
+  Tabs as default,
+  useTabsContext
+};

package/dist/Tabs/TabsList.cjs.js

@@ -0,0 +1,12 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const TabsList = ({
+  children,
+  className,
+  justify = "flex-start",
+  grow
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.TabsListStyled, { className, justify, isGrow: grow, children });
+};
+module.exports = TabsList;

package/dist/Tabs/TabsList.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ITabsListProps } from './types';
+declare const TabsList: ({ children, className, justify, grow }: ITabsListProps) => React.ReactElement;
+export default TabsList;

package/dist/Tabs/TabsList.es.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { TabsListStyled } from "./styles.es.js";
+const TabsList = ({
+  children,
+  className,
+  justify = "flex-start",
+  grow
+}) => {
+  return /* @__PURE__ */ jsx(TabsListStyled, { className, justify, isGrow: grow, children });
+};
+export {
+  TabsList as default
+};

package/dist/Tabs/index.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+const Tabs$1 = require("./Tabs.cjs.js");
+const TabsList = require("./TabsList.cjs.js");
+const Tab = require("./Tab.cjs.js");
+const TabPanel = require("./TabPanel.cjs.js");
+const Tabs = Tabs$1.default;
+Tabs.TabPanel = TabPanel;
+Tabs.TabsList = TabsList;
+Tabs.Tab = Tab;
+module.exports = Tabs;

package/dist/Tabs/index.d.ts

@@ -0,0 +1,12 @@
+import { default as TabsComponent } from './Tabs';
+import { default as TabsList } from './TabsList';
+import { default as Tab } from './Tab';
+import { default as TabPanel } from './TabPanel';
+type TTabs = typeof TabsComponent & {
+    Tab: typeof Tab;
+    TabsList: typeof TabsList;
+    TabPanel: typeof TabPanel;
+};
+declare const Tabs: TTabs;
+export type { ITabPanelProps, ITabsListProps, ITabsProps, ITabProps } from './types';
+export default Tabs;

package/dist/Tabs/index.es.js

@@ -0,0 +1,11 @@
+import Tabs$1 from "./Tabs.es.js";
+import TabsList from "./TabsList.es.js";
+import Tab from "./Tab.es.js";
+import TabPanel from "./TabPanel.es.js";
+const Tabs = Tabs$1;
+Tabs.TabPanel = TabPanel;
+Tabs.TabsList = TabsList;
+Tabs.Tab = Tab;
+export {
+  Tabs as default
+};

package/dist/Tabs/styles.cjs.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const Text = require("../typography/Text/Text.cjs.js");
+const TabStyled = styled(Text).attrs({ as: "button" }).withConfig({
+  shouldForwardProp: (prop) => prop !== "isSelected"
+})`
+  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;
+  display: flex;
+  align-items: center;
+  flex-grow: unset;
+  justify-content: center;
+  cursor: pointer;
+  gap: 8px;
+  color: ${({ theme }) => theme.textColor};
+  
+  ${({ selected, theme }) => selected && styled.css`
+      border-color: ${theme.colors[theme.primaryColor][9]};
+    `}
+  
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.colors.gray[4]};
+  }
+
+  &:hover:not(:disabled) {
+    color: ${({ theme }) => theme.colors.grayViolet[9]};
+    border-color: ${({ theme }) => theme.colors[theme.primaryColor][7]};
+    * {
+      color: ${({ theme }) => theme.colors.grayViolet[9]};
+    }
+  }
+`;
+const TabsListStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["justify", "isGrow"].includes(prop)
+})`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: ${({ justify }) => justify};
+  gap: unset;
+  position: relative;
+  width: 100%;
+
+  ${({ isGrow }) => isGrow && styled.css`
+      ${TabStyled} {
+        flex-grow: 1;
+      }
+    `};
+
+  &: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;
+  }
+`;
+const TabPanelStyled = styled.div`
+  padding-top: 0.625rem;
+`;
+exports.TabPanelStyled = TabPanelStyled;
+exports.TabStyled = TabStyled;
+exports.TabsListStyled = TabsListStyled;

package/dist/Tabs/styles.d.ts

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

@@ -0,0 +1,74 @@
+import styled, { css } from "styled-components";
+import Text from "../typography/Text/Text.es.js";
+const TabStyled = styled(Text).attrs({ as: "button" }).withConfig({
+  shouldForwardProp: (prop) => prop !== "isSelected"
+})`
+  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;
+  display: flex;
+  align-items: center;
+  flex-grow: unset;
+  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]};
+  }
+
+  &:hover:not(:disabled) {
+    color: ${({ theme }) => theme.colors.grayViolet[9]};
+    border-color: ${({ theme }) => theme.colors[theme.primaryColor][7]};
+    * {
+      color: ${({ theme }) => theme.colors.grayViolet[9]};
+    }
+  }
+`;
+const TabsListStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["justify", "isGrow"].includes(prop)
+})`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: ${({ justify }) => justify};
+  gap: unset;
+  position: relative;
+  width: 100%;
+
+  ${({ isGrow }) => isGrow && css`
+      ${TabStyled} {
+        flex-grow: 1;
+      }
+    `};
+
+  &: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;
+  }
+`;
+const TabPanelStyled = styled.div`
+  padding-top: 0.625rem;
+`;
+export {
+  TabPanelStyled,
+  TabStyled,
+  TabsListStyled
+};

package/dist/Tabs/types.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+export interface ITabProps {
+    /** Tab label */
+    children?: React.ReactNode;
+    /** Unique identifier */
+    value: string;
+    /** Disables interaction */
+    disabled?: boolean;
+    /** Custom click handler */
+    onClick?: React.MouseEventHandler;
+    /** Left icon/adornment */
+    leftContent?: React.ReactNode;
+    /** 	Right icon/adornment */
+    rightContent?: React.ReactNode;
+    /** Custom classname */
+    className?: string;
+}
+export interface ITabsProps {
+    /** Tab components */
+    children: React.ReactNode;
+    /** Initial active tab value */
+    defaultValue?: string;
+    /** Keeps hidden tabs in DOM */
+    keepMounted?: boolean;
+    /** Tab change handler */
+    onChange?: (value: string) => void;
+}
+export interface ITabsListProps {
+    /** <Tab> components */
+    children: React.ReactNode;
+    /** Custom classname */
+    className?: string;
+    /** Distributes tabs evenly */
+    grow?: boolean;
+    /** CSS justify-content value */
+    justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
+}
+export interface ITabsContext {
+    /**  */
+    value: string | undefined;
+    /**  */
+    keepMounted?: boolean;
+    /**  */
+    onChange: (value: string) => void;
+}
+export interface ITabPanelProps {
+    /** Panel content */
+    children: React.ReactNode;
+    /** Matches corresponding tab */
+    value: string;
+}

package/dist/Tag/Tag.cjs.js

@@ -0,0 +1,39 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const styles = require("./styles.cjs.js");
+const Tag = ({
+  children,
+  disabled,
+  icon,
+  onClick,
+  className,
+  closable,
+  onClickClose,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.TagStyled,
+    {
+      size: "m",
+      disabled,
+      onClick,
+      className,
+      ...props,
+      children: [
+        icon,
+        children,
+        closable && /* @__PURE__ */ jsxRuntime.jsx(
+          styles.TagButtonClosable,
+          {
+            onClick: !disabled ? onClickClose : () => {
+            },
+            disabled,
+            children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 12, height: 12 })
+          }
+        )
+      ]
+    }
+  );
+};
+module.exports = Tag;

package/dist/Tag/Tag.d.ts

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

package/dist/Tag/Tag.es.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+import { TagStyled, TagButtonClosable } from "./styles.es.js";
+const Tag = ({
+  children,
+  disabled,
+  icon,
+  onClick,
+  className,
+  closable,
+  onClickClose,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TagStyled,
+    {
+      size: "m",
+      disabled,
+      onClick,
+      className,
+      ...props,
+      children: [
+        icon,
+        children,
+        closable && /* @__PURE__ */ jsx(
+          TagButtonClosable,
+          {
+            onClick: !disabled ? onClickClose : () => {
+            },
+            disabled,
+            children: /* @__PURE__ */ jsx(SvgIconClose, { width: 12, height: 12 })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tag as default
+};

package/dist/Tag/index.d.ts

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

package/dist/Tag/styles.cjs.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const Text = require("../typography/Text/Text.cjs.js");
+const TagStyled = styled(Text).withConfig({
+  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.15rem;
+  width: max-content;
+  border-radius: 0.25rem;
+  border: 1px solid ${({ theme }) => theme.colors.violet[4]};
+  background: ${({ theme }) => theme.colors.grayViolet[4]};
+
+  ${({ 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]};
+      * {
+        color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
+      }
+    `}
+`;
+const TagButtonClosable = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+})`
+  cursor: pointer;
+  padding: 2px;
+  border: 1px solid
+    ${({ theme, disabled }) => disabled ? theme.colors.gray[2] : theme.colors.gray[4]};
+  background: transparent;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  svg {
+    color: ${({ theme, disabled }) => disabled ? theme.colors.gray[4] : theme.colors.gray[9]};
+  }
+`;
+exports.TagButtonClosable = TagButtonClosable;
+exports.TagStyled = TagStyled;

package/dist/Tag/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const TagStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').ITextProps, {
+    disabled?: boolean;
+}>> & 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;
+}>> & string;

package/dist/Tag/styles.es.js

@@ -0,0 +1,51 @@
+import styled, { css } from "styled-components";
+import Text from "../typography/Text/Text.es.js";
+const TagStyled = styled(Text).withConfig({
+  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.15rem;
+  width: max-content;
+  border-radius: 0.25rem;
+  border: 1px solid ${({ theme }) => theme.colors.violet[4]};
+  background: ${({ theme }) => theme.colors.grayViolet[4]};
+
+  ${({ 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]};
+      * {
+        color: ${({ theme: theme2 }) => theme2.colors.gray[4]};
+      }
+    `}
+`;
+const TagButtonClosable = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+})`
+  cursor: pointer;
+  padding: 2px;
+  border: 1px solid
+    ${({ theme, disabled }) => disabled ? theme.colors.gray[2] : theme.colors.gray[4]};
+  background: transparent;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  svg {
+    color: ${({ theme, disabled }) => disabled ? theme.colors.gray[4] : theme.colors.gray[9]};
+  }
+`;
+export {
+  TagButtonClosable,
+  TagStyled
+};

package/dist/Tag/types.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface ITagProps {
+    /** Disables interaction */
+    disabled?: boolean;
+    /** Left-aligned icon */
+    icon?: React.ReactNode;
+    /** Whole tag click handler */
+    onClick?: React.MouseEventHandler;
+    /** Shows close button */
+    closable?: boolean;
+    /** Close button handler */
+    onClickClose?: React.MouseEventHandler;
+    /** Custom CSS class */
+    className?: string;
+    /** Content */
+    children: React.ReactNode;
+    [key: string]: any;
+}

package/dist/TextField/TextField.cjs.js

@@ -0,0 +1,100 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+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 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] = React.useState(false);
+  const inputRef = React.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__ */ jsxRuntime.jsxs(styles.TextFieldWrapper, { className, id, "data-testid": "text-field", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, children: [
+      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 })
+  ] });
+};
+module.exports = TextField;

package/dist/TextField/TextField.d.ts

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