@alume/alume-design-system 4.13.21

package/dist/components/range-input/rangeInput.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface RangeInputProps {
+    value?: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    max: number;
+    step?: number;
+    min?: number;
+    disabled?: boolean;
+}
+export declare const RangeInput: React.FunctionComponent<RangeInputProps>;
+export {};

package/dist/components/range-input/rangeInput.component.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Input, InputContainer, Title } from "./rangeInput.styled";
+export const RangeInput = (_a) => {
+    var { value, onChange, max, min = 0, step = 1, disabled } = _a, rest = __rest(_a, ["value", "onChange", "max", "min", "step", "disabled"]);
+    const handleChange = (event) => {
+        const { value } = event.currentTarget;
+        Number(value) >= min && Number(value) <= max && onChange(event);
+    };
+    const verifiedValue = Number(value) || min;
+    return (React.createElement(InputContainer, null,
+        React.createElement(Title, { disabled: disabled }, `R$ ${verifiedValue},00`),
+        React.createElement(Input, Object.assign({ type: "range", step: step, sliderValue: verifiedValue, value: verifiedValue, max: max, min: min, disabled: disabled, onChange: handleChange }, rest))));
+};

package/dist/components/range-input/rangeInput.styled.d.ts

@@ -0,0 +1,13 @@
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface InputProps {
+    sliderValue: number;
+    max: number;
+    min: number;
+    disabled?: boolean;
+}
+export declare const Input: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+interface TitleProps {
+    disabled?: boolean;
+}
+export declare const Title: import("styled-components").StyledComponent<"h2", any, TitleProps, never>;
+export {};

package/dist/components/range-input/rangeInput.styled.js

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { H2 } from "../typography";
+import { colors } from "../../constants";
+export const InputContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+export const Input = styled.input `
+  ${({ sliderValue, max, min, disabled }) => {
+    const fillPercent = (((sliderValue - min) / (max - min)) * 100).toFixed(0);
+    return `
+      display: flex;
+      justify-content: center;
+      -webkit-appearance: none;
+      appearance: none;
+      cursor: ${!disabled && "pointer"};
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 24px;
+        width: 24px;
+        margin: -11px 0;
+        background: ${disabled ? colors.softGrey : colors.lightGreen};
+        border: none;
+        border-radius: 50%;
+      }
+      &::-moz-range-thumb {
+        -webkit-appearance: none;
+        height: 24px;
+        width: 24px;
+        background: ${disabled ? colors.softGrey : colors.lightGreen};
+        border-radius: 50%;
+      }
+
+      &::-webkit-slider-runnable-track {
+        background: ${`
+        linear-gradient(to right, ${disabled ? colors.softGrey : colors.lightGreen} 0%, ${disabled ? colors.softGrey : colors.lightGreen} ${fillPercent}%, ${disabled ? colors.softGrey : colors.softGrey} ${fillPercent}%, ${disabled ? colors.softGrey : colors.softGrey} 100%)
+        `};
+        border: 0;
+        border-radius: 25px;
+        width: 100%;
+        height: 2px;
+        cursor: ${!disabled && "pointer"};
+      }
+    `;
+}};
+`;
+export const Title = styled(H2) `
+  text-align: center;
+  margin-bottom: 24px;
+  ${({ disabled }) => `color: ${disabled ? colors.softGrey : colors.darkGreen};`};
+
+  span {
+    font-size: 16px;
+  }
+`;

package/dist/components/select/index.d.ts

@@ -0,0 +1 @@
+export * from "./select.component";

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export * from "./select.component";

package/dist/components/select/select.component.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface OptionData {
+    label: string;
+    value: string;
+}
+interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+    options: Array<OptionData>;
+    value?: string;
+    label?: string;
+    stretch?: boolean;
+}
+export declare const Select: React.FunctionComponent<SelectProps>;
+export {};

package/dist/components/select/select.component.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, useRef, useEffect } from "react";
+import { DropdownSelectIcon, OptionsContainer, OptionStyled, SelectLabel, SelectContainerStyled, ContainerText, FocusInput, } from "./select.styled";
+export const Select = (_a) => {
+    var _b;
+    var { options, value, onChange, label, name, disabled } = _a, props = __rest(_a, ["options", "value", "onChange", "label", "name", "disabled"]);
+    const selectorRef = useRef(null);
+    const hasLabel = label && label !== "";
+    const [isOpen, setIsOpen] = useState(false);
+    const validateValue = (value) => value !== null && value !== undefined && value !== "";
+    const handleSelectClick = () => {
+        setIsOpen(!disabled && !isOpen);
+    };
+    const handleInputFocus = () => {
+        selectorRef.current.scrollIntoView({
+            block: "center",
+        });
+        setIsOpen(true);
+    };
+    const handleOptionClick = (event, value) => {
+        setIsOpen(false);
+        onChange &&
+            onChange(Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { name,
+                    value }) }));
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (selectorRef.current && !selectorRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [selectorRef]);
+    const optionLabel = ((_b = options.find((option) => option.value === value)) === null || _b === void 0 ? void 0 : _b.label) || "";
+    return (React.createElement(SelectContainerStyled, Object.assign({ onClick: handleSelectClick, ref: selectorRef, hasLabel: hasLabel, disabled: disabled }, props),
+        hasLabel && (React.createElement(SelectLabel, { disabled: disabled, riseLabel: isOpen || validateValue(value) }, label)),
+        React.createElement(DropdownSelectIcon, { changeDirection: isOpen }),
+        React.createElement(ContainerText, null, optionLabel),
+        React.createElement(FocusInput, { onFocus: handleInputFocus }),
+        React.createElement(OptionsContainer, { isOpen: isOpen }, options.map((option, index) => (React.createElement(OptionStyled, { onClick: (event) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                handleOptionClick(event, option.value);
+            }, key: index }, option.label))))));
+};

package/dist/components/select/select.styled.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export interface SelectStyledProps {
+    stretch?: boolean;
+    hasLabel?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export declare const SelectContainerStyled: import("styled-components").StyledComponent<"div", any, SelectStyledProps, never>;
+interface OptionsContainerProps {
+    isOpen?: boolean;
+}
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, OptionsContainerProps, never>;
+export declare const OptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface SelectLabelProps {
+    riseLabel?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+}
+export declare const SelectLabel: import("styled-components").StyledComponent<"span", any, SelectLabelProps, never>;
+interface DropdownSelectIconProps {
+    changeDirection?: boolean;
+}
+export declare const DropdownSelectIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").SVGAttributes<HTMLOrSVGElement>>, any, DropdownSelectIconProps, never>;
+export declare const ContainerText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const FocusInput: import("styled-components").StyledComponent<"select", any, {}, never>;
+export {};

package/dist/components/select/select.styled.js

@@ -0,0 +1,86 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+import { DropdownIcon } from "../../assets/icons";
+export const SelectContainerStyled = styled.div `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: transparent;
+  border: 0;
+  &:focus {
+    outline: none;
+  }
+  position: relative;
+  top: 2px;
+  font-size: 16px;
+  color: ${colors.textGreen};
+  border-bottom: 1px solid ${colors.lightGrey};
+  width: ${({ stretch }) => (stretch ? "100%" : "auto")};
+  box-sizing: content-box;
+  height: 26px;
+  cursor: ${({ disabled }) => (!disabled ? "pointer" : "default")};
+`;
+export const OptionsContainer = styled.div `
+  max-height: 250px;
+  overflow-y: scroll;
+  height: auto;
+  padding: 4px 0;
+  z-index: 9;
+  position: relative;
+  top: 3px;
+  transform-origin: top left;
+  transform: scale(${({ isOpen }) => (isOpen ? "1" : "0")});
+  transition: transform 0.1s ease-out;
+  transform-style: preserve-3d;
+  width: 100%;
+  background-color: ${colors.white};
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+`;
+export const OptionStyled = styled.div `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 8px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${colors.softGrey};
+  }
+`;
+export const SelectLabel = styled.span `
+  position: absolute;
+  color: ${colors.textLightGreen};
+  cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
+  transition: transform 0.4s, font-size 0.4s;
+  transition-timing-function: ease;
+  transform: translateY(0);
+  font-size: 16px;
+  ${({ riseLabel }) => riseLabel &&
+    `
+    transform: translateY(-17px);
+    font-size: 12px;
+  `}
+  ${({ disabled }) => disabled && `color: ${colors.lightGrey};`}
+  ${({ hasError }) => hasError && `color: ${colors.red};`}
+`;
+export const DropdownSelectIcon = styled(DropdownIcon) `
+  float: right;
+  height: 20px;
+  transition: transform 0.4s, font-size 0.4s;
+  transition-timing-function: ease;
+  transform: rotate(
+    ${({ changeDirection }) => (changeDirection ? "180" : "0")}deg
+  );
+`;
+export const ContainerText = styled.span `
+  position: absolute;
+  bottom: 2px;
+`;
+export const FocusInput = styled.select `
+  background-color: transparent;
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+`;

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export * from "./table.component";

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export * from "./table.component";

package/dist/components/table/table.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { StyledHeaderCellProps, StyledCellProps, StyledRowProps } from "./table.styled";
+declare type TableType = {
+    Header: React.FunctionComponent;
+    Row: React.FunctionComponent<StyledRowProps>;
+    HeaderCell: React.FunctionComponent<StyledHeaderCellProps>;
+    Body: React.FunctionComponent;
+    Cell: React.FunctionComponent<StyledCellProps>;
+};
+export declare const Table: React.FunctionComponent & TableType;
+export {};

package/dist/components/table/table.component.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { StyledTable, StyledHeader, StyledHeaderCell, StyledCell, StyledRow, } from "./table.styled";
+export const Table = ({ children }) => {
+    return React.createElement(StyledTable, null, children);
+};
+const Header = ({ children }) => {
+    return React.createElement(StyledHeader, null, children);
+};
+Table.Header = Header;
+const Row = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(StyledRow, Object.assign({}, props), children);
+};
+Table.Row = Row;
+const HeaderCell = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(StyledHeaderCell, Object.assign({}, props), children);
+};
+Table.HeaderCell = HeaderCell;
+const Body = ({ children }) => {
+    return React.createElement("tbody", null, children);
+};
+Table.Body = Body;
+const Cell = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(StyledCell, Object.assign({}, props), children);
+};
+Table.Cell = Cell;

package/dist/components/table/table.styled.d.ts

@@ -0,0 +1,19 @@
+declare type CellAlignment = "left" | "center" | "right";
+declare type TextBehaviour = "nowrap" | "ellipsis" | "normal";
+export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export interface StyledRowProps {
+    customColor?: string;
+}
+export declare const StyledRow: import("styled-components").StyledComponent<"tr", any, StyledRowProps, never>;
+export interface StyledHeaderCellProps {
+    alignment?: CellAlignment;
+}
+export declare const StyledHeaderCell: import("styled-components").StyledComponent<"th", any, StyledHeaderCellProps, never>;
+export interface StyledCellProps {
+    alignment?: CellAlignment;
+    textBehavior?: TextBehaviour;
+    minWidth?: string;
+}
+export declare const StyledCell: import("styled-components").StyledComponent<"td", any, StyledCellProps, never>;
+export {};

package/dist/components/table/table.styled.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+const cellsPadding = "10px 5px";
+const cellsDefaultAlignment = "center";
+const cssByTextBehaviour = {
+    ellipsis: `
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+    nowrap: "white-space: nowrap;",
+    normal: "white-space: normal;",
+};
+export const StyledTable = styled.table `
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+`;
+export const StyledHeader = styled.thead `
+  background-color: ${colors.floatingNav};
+`;
+export const StyledRow = styled.tr `
+  color: ${({ customColor }) => customColor || colors.tableText};
+`;
+export const StyledHeaderCell = styled.th `
+  border: none;
+  font-weight: normal;
+  padding: ${cellsPadding};
+  text-align: ${({ alignment }) => alignment || cellsDefaultAlignment};
+  white-space: nowrap;
+`;
+export const StyledCell = styled.td `
+  border-bottom: 1px solid ${colors.softGrey};
+  padding: ${cellsPadding};
+  font-weight: normal;
+  text-align: ${({ alignment }) => alignment || cellsDefaultAlignment};
+
+  ${({ textBehavior = "nowrap" }) => cssByTextBehaviour[textBehavior]};
+
+  ${({ minWidth }) => `min-width: ${minWidth};`}
+`;

package/dist/components/text-area-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./textAreaInput.component";

package/dist/components/text-area-input/index.js

@@ -0,0 +1 @@
+export * from "./textAreaInput.component";

package/dist/components/text-area-input/textAreaInput.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface TextAreaInputProps extends React.ButtonHTMLAttributes<HTMLTextAreaElement> {
+    label: string;
+    error?: string;
+    rows?: number;
+    maxChars?: number;
+}
+export declare const TextAreaInput: React.FunctionComponent<TextAreaInputProps>;
+export {};

package/dist/components/text-area-input/textAreaInput.component.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from "react";
+import { StyledCharQuantitySpan, StyledTextAreaInputContainer, StyleErrorSpan, StyledTextAreaInput, } from "./textAreaInput.styled";
+export const TextAreaInput = (_a) => {
+    var { label, error, disabled, value, name, onChange, rows = 5, maxChars = 500 } = _a, props = __rest(_a, ["label", "error", "disabled", "value", "name", "onChange", "rows", "maxChars"]);
+    const [charactersQuantity, setCharactersQuantity] = useState(0);
+    const handleOnChange = (event) => {
+        const eventCharQuantity = event.currentTarget.value.length;
+        if (eventCharQuantity > maxChars)
+            return;
+        setCharactersQuantity(eventCharQuantity);
+        onChange && onChange(event);
+    };
+    return (React.createElement(StyledTextAreaInputContainer, { hasError: !!error },
+        React.createElement(StyledCharQuantitySpan, null, ` ${charactersQuantity}/${maxChars}`),
+        React.createElement(StyledTextAreaInput, Object.assign({}, props, { name: name, value: value, hasError: !!error, disabled: disabled, autoComplete: "off", rows: rows, onChange: handleOnChange, placeholder: label })),
+        error && React.createElement(StyleErrorSpan, null, error)));
+};

package/dist/components/text-area-input/textAreaInput.styled.d.ts

@@ -0,0 +1,11 @@
+interface StyledTextAreaInputContainerProps {
+    hasError?: boolean;
+}
+export declare const StyledTextAreaInputContainer: import("styled-components").StyledComponent<"div", any, StyledTextAreaInputContainerProps, never>;
+export declare const StyledCharQuantitySpan: import("styled-components").StyledComponent<"span", any, {}, never>;
+interface StyledTextAreaInputProps {
+    hasError?: boolean;
+}
+export declare const StyledTextAreaInput: import("styled-components").StyledComponent<"textarea", any, StyledTextAreaInputProps, never>;
+export declare const StyleErrorSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/dist/components/text-area-input/textAreaInput.styled.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const StyledTextAreaInputContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  ${({ hasError }) => hasError && `color: ${colors.red};`}
+`;
+export const StyledCharQuantitySpan = styled.span `
+  color: grey;
+  position: relative;
+  top: 20px;
+  text-align: right;
+  padding-right: 4px;
+  font-size: 12px;
+`;
+export const StyledTextAreaInput = styled.textarea `
+  padding: 4px;
+  padding-top: 20px;
+  border: 1px solid ${colors.lightGrey};
+  border-radius: 4px;
+  line-height: 20px;
+  color: ${colors.textGreen};
+  font-size: 16px;
+  resize: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: transparent;
+  }
+
+  ${({ hasError }) => hasError &&
+    `
+  border-color: ${colors.red};
+  color: ${colors.red};
+  `}
+`;
+export const StyleErrorSpan = styled.span `
+  position: absolute;
+  align-self: flex-end;
+  transform: translateY(17px);
+  font-size: 12px;
+`;

package/dist/components/text-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./textInput.component";

package/dist/components/text-input/index.js

@@ -0,0 +1 @@
+export * from "./textInput.component";

package/dist/components/text-input/textInput.component.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import IMask from "imask";
+export interface ValueInterceptor {
+    beforeSetValue?: (value?: string | number | readonly string[]) => string;
+    onChange?: (value?: string | number | readonly string[]) => string;
+    onKeyDown?: (value?: string | number | readonly string[], event?: React.KeyboardEvent<HTMLInputElement>) => string;
+}
+declare type InputValueCase = "lowercase" | "uppercase";
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    error?: string;
+    mask?: string | IMask.AnyMaskedOptions;
+    interceptors?: ValueInterceptor;
+    valueCase?: InputValueCase;
+    stretch?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const TextInput: React.FunctionComponent<TextInputProps>;
+export {};

package/dist/components/text-input/textInput.component.js

@@ -0,0 +1,84 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useRef, useState, useEffect } from "react";
+import IMask from "imask";
+import { StyledTextInputContainer, StyledTextInputLabel, StyleErrorSpan, StyleTextInput, } from "./textInput.styled";
+const convertByCase = {
+    lowercase: (value) => value.toLowerCase(),
+    uppercase: (value) => value.toUpperCase(),
+};
+export const TextInput = (_a) => {
+    var { label, error, disabled, onChange, onBlur, onFocus, onKeyDown, mask, interceptors, valueCase, value, name, stretch } = _a, props = __rest(_a, ["label", "error", "disabled", "onChange", "onBlur", "onFocus", "onKeyDown", "mask", "interceptors", "valueCase", "value", "name", "stretch"]);
+    const inputRef = useRef();
+    const [isFocused, setIsFocused] = useState(false);
+    const [hasValue, setHasValue] = useState(false);
+    const validateValue = (value) => value !== null && value !== undefined && value !== "";
+    const maskInstance = mask && IMask.createMask(typeof mask === "string" ? { mask } : mask);
+    const maskValue = (value) => value && maskInstance
+        ? maskInstance.resolve(value.toString())
+        : (value === null || value === void 0 ? void 0 : value.toString()) || "";
+    const handleLabelClick = (event) => {
+        var _a;
+        event.stopPropagation();
+        if (disabled)
+            return;
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleInputFocus = (event) => {
+        var _a;
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            block: "center",
+        });
+        onFocus && onFocus(event);
+        setIsFocused(true);
+    };
+    const handleInputBlur = (event) => {
+        onBlur && onBlur(event);
+        setIsFocused(false);
+    };
+    const handleValueChange = (event) => {
+        event.target.value = valueCase
+            ? convertByCase[valueCase](event.target.value)
+            : event.target.value;
+        event.target.value = maskValue(event.target.value);
+        event.target.value = (interceptors === null || interceptors === void 0 ? void 0 : interceptors.onChange)
+            ? interceptors === null || interceptors === void 0 ? void 0 : interceptors.onChange(event.target.value)
+            : event.target.value;
+        onChange && onChange(event);
+        setHasValue(validateValue(event.target.value));
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown && onKeyDown(event);
+        const changeEventValue = (interceptors === null || interceptors === void 0 ? void 0 : interceptors.onKeyDown)
+            ? interceptors === null || interceptors === void 0 ? void 0 : interceptors.onKeyDown(value, event)
+            : value;
+        const changeEvent = {
+            target: { name, value: changeEventValue.toString() },
+        };
+        handleValueChange(changeEvent);
+    };
+    useEffect(() => {
+        setHasValue(validateValue(value));
+        const event = {
+            target: { name, value: value.toString() },
+        };
+        handleValueChange(event);
+    }, [value]);
+    value = maskValue(value);
+    value = (interceptors === null || interceptors === void 0 ? void 0 : interceptors.beforeSetValue)
+        ? interceptors === null || interceptors === void 0 ? void 0 : interceptors.beforeSetValue(value)
+        : value;
+    return (React.createElement(StyledTextInputContainer, { stretch: stretch, hasError: !!error },
+        React.createElement(StyledTextInputLabel, { onClick: handleLabelClick, hasError: !!error, disabled: disabled, riseLabel: isFocused || hasValue }, label),
+        React.createElement(StyleTextInput, Object.assign({}, props, { name: name, value: value, hasError: !!error, disabled: disabled, ref: inputRef, onChange: handleValueChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, autoComplete: "off" })),
+        error && React.createElement(StyleErrorSpan, null, error)));
+};

package/dist/components/text-input/textInput.styled.d.ts

@@ -0,0 +1,17 @@
+interface StyledTextInputContainerProps {
+    hasError?: boolean;
+    stretch?: boolean;
+}
+export declare const StyledTextInputContainer: import("styled-components").StyledComponent<"div", any, StyledTextInputContainerProps, never>;
+interface StyledTextInputLabelProps {
+    riseLabel?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+}
+export declare const StyledTextInputLabel: import("styled-components").StyledComponent<"label", any, StyledTextInputLabelProps, never>;
+interface StyleTextInputProps {
+    hasError?: boolean;
+}
+export declare const StyleTextInput: import("styled-components").StyledComponent<"input", any, StyleTextInputProps, never>;
+export declare const StyleErrorSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};