@quen-ui/components 0.0.14 → 1.0.0

package/dist/InputDate/helpers.cjs.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers = require("../Calendar/helpers.cjs.js");
+const formatDate = (date, format, valueFormatter) => {
+  const dd = String(date.getDate()).padStart(2, "0");
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const yyyy = date.getFullYear();
+  if (valueFormatter) {
+    return valueFormatter(`${yyyy}-${mm}-${dd}`);
+  }
+  switch (format) {
+    case "dd.mm.yyyy":
+      return `${dd}.${mm}.${yyyy}`;
+    case "yyyy-mm-dd":
+      return `${yyyy}-${mm}-${dd}`;
+    case "mm/dd/yyyy":
+      return `${mm}/${dd}/${yyyy}`;
+    default:
+      return `${dd}.${mm}.${yyyy}`;
+  }
+};
+const parseDate = (str, format) => {
+  const parts = str.split(/[./-]/);
+  let day, month, year = "";
+  switch (format) {
+    case "dd.mm.yyyy":
+      [day, month, year] = parts;
+      break;
+    case "yyyy-mm-dd":
+      [year, month, day] = parts;
+      break;
+    case "mm/dd/yyyy":
+      [month, day, year] = parts;
+      break;
+    default:
+      return null;
+  }
+  const d = new Date(Number(year), Number(month) - 1, Number(day));
+  return isNaN(d.getTime()) ? null : d;
+};
+const autoFormatInput = (value, format, valueFormatter) => {
+  const clean = value.replace(/\D/g, "");
+  if (valueFormatter) {
+    return valueFormatter(
+      `${clean.slice(0, 4)}-${clean.slice(4, 6)}-${clean.slice(6, 8)}`
+    );
+  }
+  if (format === "dd.mm.yyyy") {
+    if (clean.length <= 2) return clean;
+    if (clean.length <= 4) return `${clean.slice(0, 2)}.${clean.slice(2)}`;
+    return `${clean.slice(0, 2)}.${clean.slice(2, 4)}.${clean.slice(4, 8)}`;
+  }
+  if (format === "yyyy-mm-dd") {
+    if (clean.length <= 4) return clean;
+    if (clean.length <= 6) return `${clean.slice(0, 4)}-${clean.slice(4)}`;
+    return `${clean.slice(0, 4)}-${clean.slice(4, 6)}-${clean.slice(6, 8)}`;
+  }
+  if (format === "mm/dd/yyyy") {
+    if (clean.length <= 2) return clean;
+    if (clean.length <= 4) return `${clean.slice(0, 2)}/${clean.slice(2)}`;
+    return `${clean.slice(0, 2)}/${clean.slice(2, 4)}/${clean.slice(4, 8)}`;
+  }
+  return value;
+};
+const getDate = (date) => {
+  if (date) {
+    return date.toLocaleDateString("en-CA");
+  }
+  return "";
+};
+const checkRangeDate = (date, minDate, maxDate) => {
+  return date && (!minDate || !helpers.isBefore(date, new Date(minDate))) && (!maxDate || !helpers.isAfter(date, new Date(maxDate)));
+};
+exports.autoFormatInput = autoFormatInput;
+exports.checkRangeDate = checkRangeDate;
+exports.formatDate = formatDate;
+exports.getDate = getDate;
+exports.parseDate = parseDate;

package/dist/InputDate/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const formatDate: (date: Date, format: string, valueFormatter?: (raw: string) => string) => string;
+export declare const parseDate: (str: string, format: string) => Date | null;
+export declare const autoFormatInput: (value: string, format: string, valueFormatter?: (raw: string) => string) => string;
+export declare const getDate: (date?: Date | null) => string;
+export declare const checkRangeDate: (date: Date | null, minDate?: Date | string | null, maxDate?: Date | string | null) => boolean | null;

package/dist/InputDate/helpers.es.js

@@ -0,0 +1,78 @@
+import { isBefore, isAfter } from "../Calendar/helpers.es.js";
+const formatDate = (date, format, valueFormatter) => {
+  const dd = String(date.getDate()).padStart(2, "0");
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const yyyy = date.getFullYear();
+  if (valueFormatter) {
+    return valueFormatter(`${yyyy}-${mm}-${dd}`);
+  }
+  switch (format) {
+    case "dd.mm.yyyy":
+      return `${dd}.${mm}.${yyyy}`;
+    case "yyyy-mm-dd":
+      return `${yyyy}-${mm}-${dd}`;
+    case "mm/dd/yyyy":
+      return `${mm}/${dd}/${yyyy}`;
+    default:
+      return `${dd}.${mm}.${yyyy}`;
+  }
+};
+const parseDate = (str, format) => {
+  const parts = str.split(/[./-]/);
+  let day, month, year = "";
+  switch (format) {
+    case "dd.mm.yyyy":
+      [day, month, year] = parts;
+      break;
+    case "yyyy-mm-dd":
+      [year, month, day] = parts;
+      break;
+    case "mm/dd/yyyy":
+      [month, day, year] = parts;
+      break;
+    default:
+      return null;
+  }
+  const d = new Date(Number(year), Number(month) - 1, Number(day));
+  return isNaN(d.getTime()) ? null : d;
+};
+const autoFormatInput = (value, format, valueFormatter) => {
+  const clean = value.replace(/\D/g, "");
+  if (valueFormatter) {
+    return valueFormatter(
+      `${clean.slice(0, 4)}-${clean.slice(4, 6)}-${clean.slice(6, 8)}`
+    );
+  }
+  if (format === "dd.mm.yyyy") {
+    if (clean.length <= 2) return clean;
+    if (clean.length <= 4) return `${clean.slice(0, 2)}.${clean.slice(2)}`;
+    return `${clean.slice(0, 2)}.${clean.slice(2, 4)}.${clean.slice(4, 8)}`;
+  }
+  if (format === "yyyy-mm-dd") {
+    if (clean.length <= 4) return clean;
+    if (clean.length <= 6) return `${clean.slice(0, 4)}-${clean.slice(4)}`;
+    return `${clean.slice(0, 4)}-${clean.slice(4, 6)}-${clean.slice(6, 8)}`;
+  }
+  if (format === "mm/dd/yyyy") {
+    if (clean.length <= 2) return clean;
+    if (clean.length <= 4) return `${clean.slice(0, 2)}/${clean.slice(2)}`;
+    return `${clean.slice(0, 2)}/${clean.slice(2, 4)}/${clean.slice(4, 8)}`;
+  }
+  return value;
+};
+const getDate = (date) => {
+  if (date) {
+    return date.toLocaleDateString("en-CA");
+  }
+  return "";
+};
+const checkRangeDate = (date, minDate, maxDate) => {
+  return date && (!minDate || !isBefore(date, new Date(minDate))) && (!maxDate || !isAfter(date, new Date(maxDate)));
+};
+export {
+  autoFormatInput,
+  checkRangeDate,
+  formatDate,
+  getDate,
+  parseDate
+};

package/dist/InputDate/index.d.ts

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

package/dist/InputDate/styles.cjs.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const InputBase = require("../InputBase/InputBase.cjs.js");
+const InputBaseStyled = styled(InputBase)`
+  input {
+    background: transparent;
+    font-size: ${({ theme, size }) => theme.fonts.text.size[size || "m"]};
+    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size || "m"]};
+  }
+  
+  .quen-ui__inputs-date-wrapper {
+    width: 100%;
+  }
+
+
+  ${({ disabled, theme }) => disabled && styled.css`
+      input {
+        background: ${theme.components.Input.disabledBackground};
+        pointer-events: none;
+        color: ${theme.components.Input.disabledColor};
+      }
+    `};
+`;
+const InputDateStyled = styled.input`
+  color: ${({ theme }) => theme.components.Input.color};
+  border: none;
+  outline: none;
+  &.quen-ui__input-date--input {
+    width: 100%;
+    text-align: center;
+  }
+`;
+exports.InputBaseStyled = InputBaseStyled;
+exports.InputDateStyled = InputDateStyled;

package/dist/InputDate/styles.d.ts

@@ -0,0 +1,5 @@
+import { IInputBaseProps } from '../InputBase';
+export declare const InputBaseStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<IInputBaseProps & {
+    children?: import('react').ReactNode | undefined;
+}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const InputDateStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/InputDate/styles.es.js

@@ -0,0 +1,35 @@
+import styled, { css } from "styled-components";
+import InputBase from "../InputBase/InputBase.es.js";
+const InputBaseStyled = styled(InputBase)`
+  input {
+    background: transparent;
+    font-size: ${({ theme, size }) => theme.fonts.text.size[size || "m"]};
+    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size || "m"]};
+  }
+  
+  .quen-ui__inputs-date-wrapper {
+    width: 100%;
+  }
+
+
+  ${({ disabled, theme }) => disabled && css`
+      input {
+        background: ${theme.components.Input.disabledBackground};
+        pointer-events: none;
+        color: ${theme.components.Input.disabledColor};
+      }
+    `};
+`;
+const InputDateStyled = styled.input`
+  color: ${({ theme }) => theme.components.Input.color};
+  border: none;
+  outline: none;
+  &.quen-ui__input-date--input {
+    width: 100%;
+    text-align: center;
+  }
+`;
+export {
+  InputBaseStyled,
+  InputDateStyled
+};

package/dist/InputDate/types.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { IInputBaseProps } from '../InputBase';
+import { TCalendarSingleProps, TCalendarBaseProps, TCalendarRangeProps } from '../Calendar';
+export type TInputDateBaseProps = {
+    /** Placeholder text */
+    placeholder?: string | [string, string];
+    /** Form input name */
+    name?: 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;
+    onClear?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    dateFormat?: "dd.mm.yyyy" | "yyyy-mm-dd" | "mm/dd/yyyy";
+    valueFormatter?: (raw: string) => string;
+};
+export type TInputDateProps = (IInputBaseProps & TCalendarBaseProps & TInputDateBaseProps & TCalendarSingleProps) | (IInputBaseProps & TCalendarBaseProps & TInputDateBaseProps & TCalendarRangeProps);

package/dist/InputNumber/InputNumber.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 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");
@@ -34,6 +34,7 @@ const InputNumber = ({
   isAutoFocus,
   clearable,
   onClear,
+  style,
   ...props
 }) => {
   const [focus, setFocus] = React.useState(false);
@@ -51,95 +52,91 @@ const InputNumber = ({
     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;
+      const width = entries[0]?.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();
+    inputRef.current?.focus();
   };
   const handleBlur = (event) => {
     setFocus(false);
-    onBlur == null ? void 0 : onBlur(event);
+    onBlur?.(event);
   };
   const handleFocus = (event) => {
     setFocus(true);
-    onFocus == null ? void 0 : onFocus(event);
+    onFocus?.(event);
   };
   const handleClearClick = (event) => {
     event.stopPropagation();
-    onChange == null ? void 0 : onChange(null);
-    onClear == null ? void 0 : onClear(event);
+    onChange?.(null);
+    onClear?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles.InputNumberWrapper, { className, ...props, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size, as: "label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    styles.InputBaseStyled,
+    {
+      className: helpers.cnMerge(className, {
+        "quen-ui__input-base--focus-input": focus
+      }),
+      id,
+      "data-testid": "input",
+      size,
+      disabled,
+      error,
       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 })
-  ] });
+      style,
+      leftContent,
+      required,
+      ...props,
+      children: /* @__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
+        }
+      )
+    }
+  );
 };
 module.exports = InputNumber;

package/dist/InputNumber/InputNumber.d.ts

@@ -1,4 +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;
+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, style, ...props }: IInputNumberProps) => React.ReactElement;
 export default InputNumber;

package/dist/InputNumber/InputNumber.es.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } 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 { cnMerge } from "@quen-ui/helpers";
+import { InputBaseStyled, InputNumberStyled } from "./styles.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";
@@ -33,6 +33,7 @@ const InputNumber = ({
   isAutoFocus,
   clearable,
   onClear,
+  style,
   ...props
 }) => {
   const [focus, setFocus] = useState(false);
@@ -50,96 +51,92 @@ const InputNumber = ({
     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;
+      const width = entries[0]?.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();
+    inputRef.current?.focus();
   };
   const handleBlur = (event) => {
     setFocus(false);
-    onBlur == null ? void 0 : onBlur(event);
+    onBlur?.(event);
   };
   const handleFocus = (event) => {
     setFocus(true);
-    onFocus == null ? void 0 : onFocus(event);
+    onFocus?.(event);
   };
   const handleClearClick = (event) => {
     event.stopPropagation();
-    onChange == null ? void 0 : onChange(null);
-    onClear == null ? void 0 : onClear(event);
+    onChange?.(null);
+    onClear?.(event);
   };
-  return /* @__PURE__ */ jsxs(InputNumberWrapper, { className, ...props, children: [
-    label && /* @__PURE__ */ jsxs(Text, { size, as: "label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsx(
+    InputBaseStyled,
+    {
+      className: cnMerge(className, {
+        "quen-ui__input-base--focus-input": focus
+      }),
+      id,
+      "data-testid": "input",
+      size,
+      disabled,
+      error,
       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 })
-  ] });
+      style,
+      leftContent,
+      required,
+      ...props,
+      children: /* @__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
+        }
+      )
+    }
+  );
 };
 export {
   InputNumber as default