@ludo.ninja/components 1.1.4 → 1.1.6

package/dist/system/CardsHolderWithSkeleton/CardsHolder/index.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import CardsGrid from '@/system/Cards/CardsGrid';
+import CardsError from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsError';
+import CardsNoResults from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
+// Styles
+var StyledCardsHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: 24px;\n  overflow: hidden;\n\n  ", " {\n    gap: 16px;\n  }\n\n  ", " {\n    gap: 12px;\n    grid-template-columns: ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: 24px;\n  overflow: hidden;\n\n  ", " {\n    gap: 16px;\n  }\n\n  ", " {\n    gap: 12px;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
+    return props.isOneColumn || props.isForVirtualize ? '1fr' : 'repeat( 4, 1fr)';
+}, mediaQuery.desktop, mediaQuery.tablet, function (props) {
+    return props.isOneColumn || props.isForVirtualize ? '1fr' : 'repeat( 2, 1fr)';
+});
+// Component
+var CardsHolder = function (_a) {
+    var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot;
+    var renderCardsWithGrid = function (component, isEmptyGallery, forVirtualize) {
+        return (_jsx(CardsGrid, { isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isEmptyGallery: isEmptyGallery, isForVirtualize: forVirtualize, tabsSlot: tabsSlot, children: component }));
+    };
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return null;
+    if (error)
+        return renderCardsWithGrid(_jsx(CardsError, { refetch: refetchQuery }), true);
+    if (!items.length)
+        return renderCardsWithGrid(_jsx(CardsNoResults, { noFoundText: notFoundText }), true, isForVirtualize);
+    return (_jsx(StyledCardsHolder, { isOneColumn: isOneColumn, isForVirtualize: isForVirtualize, children: renderCardsWithGrid(children, false, isForVirtualize) }));
+};
+// Export
+export default CardsHolder;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/index.js

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { rotate } from '@/styles/animations';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import LoaderIcon from '@/public/cardsHolderLoader/loader.svg';
+// Styles
+var StyledCardsHolderLoader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 24px;\n\n  .loader {\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  ", " {\n    padding-top: ", ";\n  }\n\n  /* &.virtual {\n  position: fixed;\n    bottom: 90px;\n    right: 30px;\n } */\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 24px;\n\n  .loader {\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  ", " {\n    padding-top: ", ";\n  }\n\n  /* &.virtual {\n  position: fixed;\n    bottom: 90px;\n    right: 30px;\n } */\n"])), rotate, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
+// Component
+var CardsHolderLoader = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (_jsx(StyledCardsHolderLoader, { style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }), children: _jsx(LoaderIcon, { className: 'loader' }) }));
+};
+// Export
+export default CardsHolderLoader;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CardsGrid from '@/system/Cards/CardsGrid';
+import CardsHolder from '@/system/CardsHolderWithSkeleton/CardsHolder';
+import CardSkeletonWrapper from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
+// Component
+var CardsHolderWithSkeleton = function (_a) {
+    var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot;
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return (_jsx(CardsGrid, { isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isEmptyGallery: false, tabsSlot: tabsSlot, children: _jsx(CardSkeletonWrapper, { cardCount: 40 }) }));
+    return (_jsx(CardsHolder, { items: items, refetchQuery: refetchQuery, error: error, loading: loading, notFoundText: notFoundText, isOneColumn: isOneColumn, isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isForVirtualize: isForVirtualize, likesArray: likesArray, tabsSlot: tabsSlot, children: children }));
+};
+// Export
+export default CardsHolderWithSkeleton;

package/dist/system/DropDown/DropDown.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import DropDown from '../DropDown';
+jest.mock('@/public/dropDown/arrow_down.svg', function () { return 'div'; });
+describe('DropDown Component', function () {
+    test('renders with caption and closed by default', function () {
+        var _a;
+        var mockFallback = jest.fn();
+        render(_jsx("div", { "data-testid": 'test_container', children: _jsx(DropDown, { caption: "Test Dropdown", fallBackOnClose: mockFallback, children: _jsx("div", { children: "Dropdown Content" }) }) }));
+        var captionElement = screen.getByText('Test Dropdown');
+        expect(captionElement).toBeInTheDocument();
+        var contentElement = (_a = screen
+            .queryByTestId('test_container')) === null || _a === void 0 ? void 0 : _a.querySelector('.dropDownContent');
+        expect(contentElement).toHaveStyle('grid-template-rows:0fr');
+        fireEvent.click(captionElement);
+        expect(contentElement).toHaveStyle('grid-template-rows:1fr');
+    });
+    test('calls fallback function when closed', function () {
+        var mockFallback = jest.fn();
+        render(_jsx(DropDown, { caption: "Test Dropdown", fallBackOnClose: mockFallback, children: _jsx("div", { children: "Dropdown Content" }) }));
+        var captionElement = screen.getByText('Test Dropdown');
+        fireEvent.click(captionElement);
+        fireEvent.click(captionElement);
+        expect(mockFallback).toHaveBeenCalledWith(null);
+    });
+    test('renders with active prop', function () {
+        var mockFallback = jest.fn();
+        render(_jsx(DropDown, { caption: "Test Dropdown", fallBackOnClose: mockFallback, active: true, children: _jsx("div", { children: "Dropdown Content" }) }));
+        var openedContentElement = screen.getByText('Dropdown Content');
+        expect(openedContentElement).toBeInTheDocument();
+    });
+});

package/dist/system/DropDown/index.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { InactiveButtonColor } from '@/styles/colors';
+import ArrowDownIcon from '@/public/dropDown/arrow_down.svg';
+// Styles
+var StyledDropDown = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ", ";\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ", ";\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ", ";\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ", ";\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n"])), InactiveButtonColor, function (props) {
+    return props.isActive ? 'rotate(180deg)' : 'rotate(0deg)';
+}, function (props) { return (props.isActive ? '1fr' : '0fr'); });
+// Component
+var DropDown = function (_a) {
+    var caption = _a.caption, children = _a.children, fallBackOnClose = _a.fallBackOnClose, active = _a.active;
+    var _b = useState(false), isActive = _b[0], setActive = _b[1];
+    useEffect(function () {
+        if (active) {
+            setActive(true);
+        }
+    }, []);
+    return (_jsxs(StyledDropDown, { isActive: isActive, children: [_jsxs("div", { className: 'dropDownTab', onClick: function () {
+                    setActive(!isActive);
+                    if (!isActive)
+                        fallBackOnClose(null);
+                }, children: [_jsx("span", { className: 'dropDownTabCaption', children: caption }), _jsx(ArrowDownIcon, { className: 'dropDownTabIcon' })] }), _jsx("div", { className: 'dropDownContent', children: _jsx("div", { className: 'gridDown', children: children }) })] }));
+};
+// Export
+export default DropDown;
+var templateObject_1;

package/dist/system/Filters/helpers.js

@@ -1,18 +1,4 @@
-export var findDefaultFilterValue = function (
-  queryValue,
-  selectionsArr,
-  defaultSelectionValue
-) {
-  var findedValue =
-    selectionsArr &&
-    selectionsArr.find(function (value) {
-      return (
-        queryValue === (value === null || value === void 0 ? void 0 : value.id)
-      );
-    });
-  return (
-    (findedValue === null || findedValue === void 0
-      ? void 0
-      : findedValue.id) || defaultSelectionValue
-  );
+export var findDefaultFilterValue = function (queryValue, selectionsArr, defaultSelectionValue) {
+    var findedValue = selectionsArr && selectionsArr.find(function (value) { return queryValue === (value === null || value === void 0 ? void 0 : value.id); });
+    return (findedValue === null || findedValue === void 0 ? void 0 : findedValue.id) || defaultSelectionValue;
 };

package/dist/system/Flex/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/system/Forms/Checkbox/Checkbox.test.js

@@ -0,0 +1,85 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import CheckboxInput from '@/system/Forms/Checkbox';
+jest.mock('../ErrorLabel', function () { return ({
+    __esModule: true,
+    default: function (_a) {
+        var children = _a.children;
+        return (_jsx("div", { "data-testid": "error-label", children: children }));
+    },
+}); });
+var mockRegister = {
+    name: 'test-checkbox',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+var mockInnerTextInputRef = {
+    name: 'inner-text-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+var renderComponent = function (props) {
+    return render(_jsx(CheckboxInput, __assign({}, props)));
+};
+describe('CheckboxInput Component', function () {
+    test('renders correctly with provided props', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+        });
+        var checkboxElement = screen.getByRole('checkbox');
+        var labelElement = screen.getByText('Test Label');
+        expect(checkboxElement).toBeInTheDocument();
+        expect(labelElement).toBeInTheDocument();
+    });
+    test('toggles text input field based on checkbox', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            withInput: true,
+            innerTextInputRef: mockInnerTextInputRef,
+        });
+        var checkboxElement = screen.getByRole('checkbox');
+        var textInputElement = screen.getByRole('textbox');
+        expect(textInputElement).toBeDisabled();
+        fireEvent.click(checkboxElement);
+        expect(textInputElement).not.toBeDisabled();
+    });
+    test('displays error message when there is an error', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: true, message: 'Error message' },
+        });
+        var errorLabel = screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+    test('does not display error message when there is no error', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: false, message: '' },
+        });
+        var errorLabel = screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+});

package/dist/system/Forms/Checkbox/index.js

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { AccentColor, BorderColorLight, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import BasicErrorLabel from '@/system/Forms/ErrorLabel';
+import { StyledInput } from '@/system/Forms/Input';
+var BasicCheckbox = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ", ";\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ", ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 6px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ", ";\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ", ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 6px;\n  }\n"])), TextGrayColor, AccentColor, WhiteColor, BorderColorLight);
+var CheckboxInput = function (_a) {
+    var data = _a.data, label = _a.label, register = _a.register, error = _a.error, className = _a.className, value = _a.value, withInput = _a.withInput, innerTextInputRef = _a.innerTextInputRef;
+    var _b = useState(true), textInputDisabled = _b[0], setTextInputDisables = _b[1];
+    var renderError = function () {
+        if (error === null || error === void 0 ? void 0 : error.isNeedShowError) {
+            return _jsx(BasicErrorLabel, { children: error === null || error === void 0 ? void 0 : error.message });
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: _jsxs(BasicCheckbox, { className: className, status: error === null || error === void 0 ? void 0 : error.isNeedShowError, children: [_jsx("input", __assign({}, register, { onChange: function (e) {
+                                setTextInputDisables(!e.target.checked);
+                                register.onChange(e);
+                            }, className: "input", type: "checkbox", name: data.name, value: value })), _jsx("p", { className: "checkmark" }), label, withInput && (_jsx(StyledInput, __assign({ status: false }, innerTextInputRef, { disabled: textInputDisabled })))] }) }), renderError()] }));
+};
+export default CheckboxInput;
+var templateObject_1;

package/dist/system/Forms/DatePicker/index.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import 'react-calendar/dist/Calendar.css';
+import ReactDatePicker from 'react-date-picker';
+import 'react-date-picker/dist/DatePicker.css';
+import { Controller } from 'react-hook-form';
+import styled from 'styled-components';
+import { AccentColor, InactiveButtonColor, ProgressColorMedium, TextDarkGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
+import BoxShadow from '@ludo.ninja/ui/build/styles/mixins/boxShadow';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import CalendarIcon from '@/public/calendar.svg';
+import CloseIcon from '@/public/close20.svg';
+import BasicErrorLabel from '../ErrorLabel';
+// Styles
+var StyledReactDatePicker = styled(ReactDatePicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, InactiveButtonColor, TextDarkGrayColor, BorderColorLight, dmsansFontVarCss.css, BoxShadow, ProgressColorMedium, ProgressColorMedium, BoxShadow, AccentColor, WhiteColor, AccentColor, WhiteColor, TextGrayColor, TextGrayColor, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(46), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
+var DatePicker = function (_a) {
+    var name = _a.name, control = _a.control, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return _jsx(BasicErrorLabel, { children: error.message });
+        }
+    };
+    return (_jsx(Controller, { name: name, control: control, render: function (_a) {
+            var field = _a.field;
+            return (_jsxs(_Fragment, { children: [_jsx(StyledReactDatePicker, { onChange: field.onChange, onBlur: field.onBlur, value: field.value, disableCalendar: field.disabled, name: field.name, status: error.isNeedShowError, dayPlaceholder: 'dd', monthPlaceholder: 'mm', yearPlaceholder: 'yy', format: 'dd.MM.yyyy', locale: 'en', clearIcon: field.value ? _jsx(CloseIcon, {}) : null, calendarIcon: _jsx(CalendarIcon, {}) }), renderError()] }));
+        } }));
+};
+export default DatePicker;
+var templateObject_1;

package/dist/system/Forms/ErrorLabel/ErrorLabel.test.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ErrorLabel from '@/system/Forms/ErrorLabel';
+describe('ErrorLabel Component', function () {
+    test('renders correctly with given children and id', function () {
+        React.act(function () {
+            render(_jsx(ErrorLabel, { id: "test-id", children: "Test Label" }));
+        });
+        var labelElement = screen.getByText('Test Label');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).toHaveAttribute('for', 'test-id');
+    });
+    test('renders correctly without id', function () {
+        React.act(function () {
+            render(_jsx(ErrorLabel, { children: "Test Label Without ID" }));
+        });
+        var labelElement = screen.getByText('Test Label Without ID');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).not.toHaveAttribute('for');
+    });
+});

package/dist/system/Forms/ErrorLabel/index.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+var StyledLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ", " {\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"], ["\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ", " {\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(13));
+var BasicErrorLabel = function (_a) {
+    var children = _a.children, id = _a.id;
+    return _jsx(StyledLabel, { htmlFor: id, children: children });
+};
+export default BasicErrorLabel;
+var templateObject_1;

package/dist/system/Forms/Input/Input.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ProgressColorMinimum } from '@/styles/colors';
+import Input from '@/system/Forms/Input';
+jest.mock('../ErrorLabel', function () { return ({
+    __esModule: true,
+    default: function (_a) {
+        var children = _a.children;
+        return (_jsx("div", { "data-testid": "error-label", children: children }));
+    },
+}); });
+var mockRegister = {
+    name: 'test-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+var mockData = {
+    name: 'test-input',
+    placeHolder: 'Enter text...',
+    labelText: 'Test Input',
+};
+var renderComponent = function (error) {
+    return render(_jsx(Input, { data: mockData, register: mockRegister, error: error }));
+};
+describe('Input Component', function () {
+    test('renders input element with correct attributes', function () {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        var inputElement = screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement.name).toBe('test-input');
+        expect(inputElement.id).toBe('test-input');
+    });
+    test('applies error styles when there is an error', function () {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        var inputElement = screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toHaveStyle("border-color: ".concat(ProgressColorMinimum));
+        expect(screen.getByTestId('error-label')).toHaveTextContent('Error message');
+    });
+    test('does not render error label when there is no error', function () {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        var errorLabel = screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+    test('renders error label when there is an error', function () {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        var errorLabel = screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+});

package/dist/system/Forms/Input/index.js

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { DisabledGrayColor, DisabledLightGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+import BasicErrorLabel from '@/system/Forms/ErrorLabel';
+import { dmsansFontVarCss } from '@/fonts/vars';
+// Styles
+export var StyledInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  :disabled {\n    background: ", ";\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  :disabled {\n    background: ", ";\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, TextGrayColor, TextGrayColor, TextGrayColor, DisabledLightGrayColor, DisabledGrayColor, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(46), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
+var Input = function (_a) {
+    var data = _a.data, register = _a.register, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return _jsx(BasicErrorLabel, { children: error.message });
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledInput, __assign({}, register, { status: error.isNeedShowError, id: data.name, name: data.name, autoComplete: 'off', placeholder: data.placeHolder })), renderError()] }));
+};
+export default Input;
+var templateObject_1;

package/dist/system/Forms/Messages/index.js

@@ -1,68 +1,67 @@
 var messages = {
-  galleryName: {
-    maxLength: {
-      value: 30,
-      message: 'The Gallery name is too long 🤟',
+    galleryName: {
+        maxLength: {
+            value: 30,
+            message: 'The Gallery name is too long 🤟',
+        },
+        required: 'Name is required',
     },
-    required: 'Name is required',
-  },
-  galleryDescription: {
-    maxLength: {
-      value: 400,
-      message: 'Please enter no more than 400 characters',
+    galleryDescription: {
+        maxLength: {
+            value: 400,
+            message: 'Please enter no more than 400 characters',
+        },
     },
-  },
-  username: {
-    minLength: {
-      value: 1,
-      message: 'The username is too small 🤟',
+    username: {
+        minLength: {
+            value: 1,
+            message: 'The username is too small 🤟',
+        },
+        maxLength: {
+            value: 42,
+            message: 'The username is too long 🤟',
+        },
     },
-    maxLength: {
-      value: 42,
-      message: 'The username is too long 🤟',
+    about: {
+        minLength: {
+            value: 2,
+            message: 'The bio is too small 🤟',
+        },
+        maxLength: {
+            value: 400,
+            message: 'Please enter no more than 400 characters',
+        },
     },
-  },
-  about: {
-    minLength: {
-      value: 2,
-      message: 'The bio is too small 🤟',
+    userEmail: {
+        pattern: {
+            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+            message: 'Invalid Email address',
+        },
     },
-    maxLength: {
-      value: 400,
-      message: 'Please enter no more than 400 characters',
+    inviteCode: {
+        minLength: {
+            value: 6,
+            message: 'Invite code is too small 🤟',
+        },
+        maxLength: {
+            value: 6,
+            message: 'Please enter no more than 6 characters',
+        },
+        required: 'Invite code is required',
     },
-  },
-  userEmail: {
-    pattern: {
-      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-      message: 'Invalid Email address',
+    userWeb: {
+        minLength: {
+            value: 2,
+            message: 'The website is too small 🤟',
+        },
+        maxLength: {
+            value: 64,
+            message: 'The website is too long 🤟',
+        },
+        pattern: {
+            value: /(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?\/[a-zA-Z0-9]{2,}|((https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?)|(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})?/g,
+            message: 'Invalid Url address',
+        },
     },
-  },
-  inviteCode: {
-    minLength: {
-      value: 6,
-      message: 'Invite code is too small 🤟',
-    },
-    maxLength: {
-      value: 6,
-      message: 'Please enter no more than 6 characters',
-    },
-    required: 'Invite code is required',
-  },
-  userWeb: {
-    minLength: {
-      value: 2,
-      message: 'The website is too small 🤟',
-    },
-    maxLength: {
-      value: 64,
-      message: 'The website is too long 🤟',
-    },
-    pattern: {
-      value:
-        /(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?\/[a-zA-Z0-9]{2,}|((https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?)|(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})?/g,
-      message: 'Invalid Url address',
-    },
-  },
 };
 export default messages;