@quen-ui/components 0.0.14

package/dist/InputNumber/InputNumber.cjs.js

@@ -0,0 +1,145 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const InputNumber = ({
+  label,
+  size = "m",
+  required,
+  disabled,
+  error,
+  min,
+  max,
+  className,
+  classNameInput,
+  onBlur,
+  onFocus,
+  defaultValue,
+  id,
+  name,
+  placeholder,
+  step,
+  allowNegative = true,
+  decimalSeparator,
+  rightContent,
+  value,
+  onChange,
+  parser,
+  formatter,
+  leftContent,
+  isAutoFocus,
+  clearable,
+  onClear,
+  ...props
+}) => {
+  const [focus, setFocus] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const rightContentRef = React.useRef(null);
+  const [widthRightContent, setWidthRightContent] = React.useState(0);
+  const _min = React.useMemo(() => {
+    if (!allowNegative || (min ?? 0) > 0) {
+      return min || 0;
+    }
+    return min;
+  }, [min, allowNegative]);
+  React.useLayoutEffect(() => {
+    const element = rightContentRef.current;
+    if (!element) return;
+    setWidthRightContent(element.clientWidth ?? 0);
+    const observer = new ResizeObserver((entries) => {
+      var _a;
+      const width = ((_a = entries[0]) == null ? void 0 : _a.contentRect.width) ?? 0;
+      setWidthRightContent(width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [rightContent, clearable]);
+  const handleClick = () => {
+    var _a;
+    setFocus(true);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleBlur = (event) => {
+    setFocus(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleFocus = (event) => {
+    setFocus(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleClearClick = (event) => {
+    event.stopPropagation();
+    onChange == null ? void 0 : onChange(null);
+    onClear == null ? void 0 : onClear(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.InputNumberWrapper, { className, ...props, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size, as: "label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "quen-ui--input-number__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      styles.InputNumberContainer,
+      {
+        size,
+        focus,
+        disabled,
+        onClick: handleClick,
+        error,
+        children: [
+          leftContent,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            styles.InputNumberStyled,
+            {
+              "data-testid": "input",
+              widthRight: widthRightContent,
+              ref: inputRef,
+              onChange,
+              value,
+              parser,
+              formatter,
+              decimalSeparator,
+              autoFocus: isAutoFocus,
+              placeholder,
+              name,
+              id,
+              defaultValue,
+              disabled,
+              className: classNameInput,
+              min: _min,
+              max,
+              onClick: handleClick,
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              keyboard: true,
+              step,
+              required,
+              changeOnWheel: true,
+              upHandler: "+",
+              downHandler: "-",
+              addonAfter: clearable || rightContent ? /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "xs", align: "center", ref: rightContentRef, children: [
+                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
+              ] }) : void 0
+            }
+          )
+        ]
+      }
+    ),
+    typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "quen-ui--input-number__error-message", size: "xs", children: error })
+  ] });
+};
+module.exports = InputNumber;

package/dist/InputNumber/InputNumber.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IInputNumberProps } from './types';
+declare const InputNumber: ({ label, size, required, disabled, error, min, max, className, classNameInput, onBlur, onFocus, defaultValue, id, name, placeholder, step, allowNegative, decimalSeparator, rightContent, value, onChange, parser, formatter, leftContent, isAutoFocus, clearable, onClear, ...props }: IInputNumberProps) => React.ReactElement;
+export default InputNumber;

package/dist/InputNumber/InputNumber.es.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useLayoutEffect } from "react";
+import { InputNumberWrapper, InputNumberContainer, InputNumberStyled } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Button from "../Button/Button.es.js";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+import Flex from "../Flex/Flex.es.js";
+const InputNumber = ({
+  label,
+  size = "m",
+  required,
+  disabled,
+  error,
+  min,
+  max,
+  className,
+  classNameInput,
+  onBlur,
+  onFocus,
+  defaultValue,
+  id,
+  name,
+  placeholder,
+  step,
+  allowNegative = true,
+  decimalSeparator,
+  rightContent,
+  value,
+  onChange,
+  parser,
+  formatter,
+  leftContent,
+  isAutoFocus,
+  clearable,
+  onClear,
+  ...props
+}) => {
+  const [focus, setFocus] = useState(false);
+  const inputRef = useRef(null);
+  const rightContentRef = useRef(null);
+  const [widthRightContent, setWidthRightContent] = useState(0);
+  const _min = useMemo(() => {
+    if (!allowNegative || (min ?? 0) > 0) {
+      return min || 0;
+    }
+    return min;
+  }, [min, allowNegative]);
+  useLayoutEffect(() => {
+    const element = rightContentRef.current;
+    if (!element) return;
+    setWidthRightContent(element.clientWidth ?? 0);
+    const observer = new ResizeObserver((entries) => {
+      var _a;
+      const width = ((_a = entries[0]) == null ? void 0 : _a.contentRect.width) ?? 0;
+      setWidthRightContent(width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [rightContent, clearable]);
+  const handleClick = () => {
+    var _a;
+    setFocus(true);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleBlur = (event) => {
+    setFocus(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleFocus = (event) => {
+    setFocus(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleClearClick = (event) => {
+    event.stopPropagation();
+    onChange == null ? void 0 : onChange(null);
+    onClear == null ? void 0 : onClear(event);
+  };
+  return /* @__PURE__ */ jsxs(InputNumberWrapper, { className, ...props, children: [
+    label && /* @__PURE__ */ jsxs(Text, { size, as: "label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "quen-ui--input-number__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      InputNumberContainer,
+      {
+        size,
+        focus,
+        disabled,
+        onClick: handleClick,
+        error,
+        children: [
+          leftContent,
+          /* @__PURE__ */ jsx(
+            InputNumberStyled,
+            {
+              "data-testid": "input",
+              widthRight: widthRightContent,
+              ref: inputRef,
+              onChange,
+              value,
+              parser,
+              formatter,
+              decimalSeparator,
+              autoFocus: isAutoFocus,
+              placeholder,
+              name,
+              id,
+              defaultValue,
+              disabled,
+              className: classNameInput,
+              min: _min,
+              max,
+              onClick: handleClick,
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              keyboard: true,
+              step,
+              required,
+              changeOnWheel: true,
+              upHandler: "+",
+              downHandler: "-",
+              addonAfter: clearable || rightContent ? /* @__PURE__ */ jsxs(Flex, { gap: "xs", align: "center", ref: rightContentRef, children: [
+                clearable && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "data-testid": "clearable-button",
+                    view: "icon",
+                    size: "xs",
+                    onClick: handleClearClick,
+                    disabled,
+                    children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16, height: 16 })
+                  }
+                ),
+                rightContent
+              ] }) : void 0
+            }
+          )
+        ]
+      }
+    ),
+    typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "quen-ui--input-number__error-message", size: "xs", children: error })
+  ] });
+};
+export {
+  InputNumber as default
+};

package/dist/InputNumber/index.d.ts

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

package/dist/InputNumber/styles.cjs.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const RcInputNumber = require("rc-input-number");
+const polished = require("polished");
+const InputNumberWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: max-content;
+
+  .quen-ui--input-number__required {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+
+  .quen-ui--input-number__error-message {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+`;
+const InputNumberContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "focus", "error", "disabled"].includes(prop)
+})`
+  height: ${({ size, theme }) => theme.control.height[size]};
+  border-radius: ${({ theme }) => theme.control.radius};
+  border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
+  border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[5]}`};
+  display: flex;
+  align-items: center;
+  padding-left: 0.75rem;
+  gap: 0.5rem;
+  
+  svg {
+    color: ${({ theme }) => theme.colors.gray[9]};
+  }
+
+  .rc-input-number-handler {
+    height: ${({ size, theme }) => polished.math(`${theme.control.height[size]} / 2`)};
+  }
+
+  input {
+    background: transparent;
+    font-size: ${({ theme, size }) => theme.fonts.text.size[size]};
+    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size]};
+  }
+
+  &:hover {
+    ${({ theme, focus }) => !focus && styled.css`
+        border-bottom: ${theme.control.borderWidth} solid
+          ${theme.colors[theme.primaryColor][9]};
+      `}
+  }
+
+  ${({ focus }) => focus && styled.css`
+      border-bottom: ${({ theme }) => `${polished.math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
+    `};
+
+  ${({ error, theme }) => error && styled.css`
+      border-bottom: ${polished.math(`${theme.control.borderWidth} * 2`)} solid
+        ${theme.colors.red[9]};
+    `};
+
+  ${({ disabled, theme }) => disabled && styled.css`
+      background: ${theme.colors.gray[2]};
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.colors.gray[4]}!important;
+      input {
+        background: ${theme.colors.gray[2]};
+        pointer-events: none;
+        color: ${theme.colors.gray[4]};
+      }
+    `};
+`;
+const InputNumberStyled = styled(RcInputNumber).withConfig({
+  shouldForwardProp: (prop) => !["widthRight"].includes(prop)
+})`
+  color: ${({ theme }) => theme.colors.gray[9]};
+  &,
+  .rc-input-number {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+  }
+
+  .rc-input-number-wrapper.rc-input-number-group:has(
+      .rc-input-number-group-addon
+    ) {
+    display: flex;
+
+    .rc-input-number-handler-wrap {
+      position: relative;
+      right: ${({ widthRight }) => `-${widthRight - 1}px`};
+    }
+
+    .rc-input-number-group-addon {
+      position: relative;
+      right: 30px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .rc-input-number-input {
+    box-sizing: border-box;
+    outline: none;
+    border: none;
+    color: ${({ theme }) => theme.colors.gray[9]};
+  }
+
+  .rc-input-number-handler-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-left: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+    height: 100%;
+    justify-content: center;
+  }
+
+  .rc-input-number-handler {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    cursor: pointer;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  .rc-input-number-handler-up {
+    border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+  }
+`;
+exports.InputNumberContainer = InputNumberContainer;
+exports.InputNumberStyled = InputNumberStyled;
+exports.InputNumberWrapper = InputNumberWrapper;

package/dist/InputNumber/styles.d.ts

@@ -0,0 +1,21 @@
+import { TQuenSize } from '../types/size';
+export declare const InputNumberWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InputNumberContainer: 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 InputNumberStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('rc-input-number').InputNumberProps<import('rc-input-number').ValueType> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<HTMLInputElement>;
+}, {
+    widthRight: number;
+}>> & string & Omit<(<T extends import('rc-input-number').ValueType = import('rc-input-number').ValueType>(props: import('rc-input-number').InputNumberProps<T> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.ReactElement) & {
+    displayName?: string;
+}, keyof import('react').Component<any, {}, any>>;

package/dist/InputNumber/styles.es.js

@@ -0,0 +1,136 @@
+import styled, { css } from "styled-components";
+import RcInputNumber from "rc-input-number";
+import { math } from "polished";
+const InputNumberWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: max-content;
+
+  .quen-ui--input-number__required {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+
+  .quen-ui--input-number__error-message {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+`;
+const InputNumberContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "focus", "error", "disabled"].includes(prop)
+})`
+  height: ${({ size, theme }) => theme.control.height[size]};
+  border-radius: ${({ theme }) => theme.control.radius};
+  border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
+  border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[5]}`};
+  display: flex;
+  align-items: center;
+  padding-left: 0.75rem;
+  gap: 0.5rem;
+  
+  svg {
+    color: ${({ theme }) => theme.colors.gray[9]};
+  }
+
+  .rc-input-number-handler {
+    height: ${({ size, theme }) => math(`${theme.control.height[size]} / 2`)};
+  }
+
+  input {
+    background: transparent;
+    font-size: ${({ theme, size }) => theme.fonts.text.size[size]};
+    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size]};
+  }
+
+  &:hover {
+    ${({ theme, focus }) => !focus && css`
+        border-bottom: ${theme.control.borderWidth} solid
+          ${theme.colors[theme.primaryColor][9]};
+      `}
+  }
+
+  ${({ focus }) => focus && css`
+      border-bottom: ${({ theme }) => `${math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
+    `};
+
+  ${({ error, theme }) => error && css`
+      border-bottom: ${math(`${theme.control.borderWidth} * 2`)} solid
+        ${theme.colors.red[9]};
+    `};
+
+  ${({ disabled, theme }) => disabled && css`
+      background: ${theme.colors.gray[2]};
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.colors.gray[4]}!important;
+      input {
+        background: ${theme.colors.gray[2]};
+        pointer-events: none;
+        color: ${theme.colors.gray[4]};
+      }
+    `};
+`;
+const InputNumberStyled = styled(RcInputNumber).withConfig({
+  shouldForwardProp: (prop) => !["widthRight"].includes(prop)
+})`
+  color: ${({ theme }) => theme.colors.gray[9]};
+  &,
+  .rc-input-number {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+  }
+
+  .rc-input-number-wrapper.rc-input-number-group:has(
+      .rc-input-number-group-addon
+    ) {
+    display: flex;
+
+    .rc-input-number-handler-wrap {
+      position: relative;
+      right: ${({ widthRight }) => `-${widthRight - 1}px`};
+    }
+
+    .rc-input-number-group-addon {
+      position: relative;
+      right: 30px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .rc-input-number-input {
+    box-sizing: border-box;
+    outline: none;
+    border: none;
+    color: ${({ theme }) => theme.colors.gray[9]};
+  }
+
+  .rc-input-number-handler-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-left: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+    height: 100%;
+    justify-content: center;
+  }
+
+  .rc-input-number-handler {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    cursor: pointer;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  .rc-input-number-handler-up {
+    border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+  }
+`;
+export {
+  InputNumberContainer,
+  InputNumberStyled,
+  InputNumberWrapper
+};

package/dist/InputNumber/types.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { InputNumberProps } from 'rc-input-number';
+import { TQuenSize } from '../types/size';
+export type TInputNumberFormatter = InputNumberProps["formatter"];
+export type TInputNumberParser = InputNumberProps["parser"];
+export interface IInputNumberProps {
+    /** Initial uncontrolled value */
+    defaultValue?: number;
+    /** Controlled input value */
+    value?: number | null;
+    /** Decimal separator character */
+    decimalSeparator?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disable input interaction */
+    disabled?: boolean;
+    /** Maximum allowed value */
+    max?: number;
+    /** Minimum allowed value */
+    min?: number;
+    /** Control input size */
+    size?: TQuenSize;
+    /** Increment/decrement step value */
+    step?: number;
+    /** Allow negative values */
+    allowNegative?: boolean;
+    /** Value change handler */
+    onChange?: (value: number | string | null) => void;
+    /** Input label text */
+    label?: string;
+    /** Mark as required field */
+    required?: boolean;
+    /** Error message or error state flag */
+    error?: string | boolean;
+    /** Left adornment (icon/prefix) */
+    leftContent?: React.ReactNode;
+    /** 	Right adornment (icon/suffix) */
+    rightContent?: React.ReactNode;
+    /** DOM ID for label association */
+    id?: string;
+    /** Form input name */
+    name?: string;
+    /** Container class name */
+    className?: string;
+    /** Blur event handler */
+    onBlur?: React.FocusEventHandler;
+    /** Focus event handler */
+    onFocus?: React.FocusEventHandler;
+    /** Input element class name */
+    classNameInput?: string;
+    /** 	Show clear button */
+    clearable?: boolean;
+    /** Auto-focus on mount */
+    isAutoFocus?: boolean;
+    /** Value display formatter (value: number) => strin */
+    formatter?: TInputNumberFormatter;
+    /** Input parser (displayValue: string) => number */
+    parser?: TInputNumberParser;
+    onClear?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    [key: string]: any;
+}

package/dist/Layout/Content.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Content = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.ContentStyled, { className, children });
+};
+module.exports = Content;

package/dist/Layout/Content.d.ts

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

package/dist/Layout/Content.es.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { ContentStyled } from "./styles.es.js";
+const Content = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(ContentStyled, { className, children });
+};
+export {
+  Content as default
+};

package/dist/Layout/Footer.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Footer = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.FooterStyled, { children });
+};
+module.exports = Footer;

package/dist/Layout/Footer.d.ts

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