@homecode/ui 4.11.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Oleh Apostol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+[![npm](https://img.shields.io/npm/dm/@foreverido/uilib?style=flat-square)](https://www.npmjs.com/package/@foreverido/uilib)
+
+# UILIB
+
+Design system that makes building web applications with ReactJS faster and easier.
+
+It's a collection of pre-built components, guidelines, and best practices that help you create high-quality user interfaces with less code.
+
+## Best practices
+
+Codebase are folows software development principles: DRY, KISS, SOLID.
+
+### Tree shakable
+
+UILIB is designed to make your web application run faster by only including the components that are actually used in your code. This reduces the amount of code that needs to be loaded, which makes your application load faster and run more smoothly.
+
+### Typescript support
+
+UILIB is designed to work well with Typescript, which is a popular programming language that helps you write more reliable and maintainable code. With UILIB, you get all the benefits of Typescript, like better error messages and more accurate code completion, to make your development experience smoother and more productive.
+
+### SSR compatible
+
+The components can be used in projects with SSR enabled. Check the test project [uilib-next](https://github.com/foreverido/uilib-nextjs)
+
+## Perspective
+
+There's still a lot of work to be done to make it shine ✨
+
+Always welcome to contact me if you have any ideas - [Twitter](https://twitter.com/vpostol), [Telegram](https://t.me/apostol) or create issue/PR in [GitHub](https://github.com/foreverido/uilib/pulls).

package/dist/esm/index.js

@@ -0,0 +1,78 @@
+export { AssistiveText } from './src/components/AssistiveText/AssistiveText.js';
+export { Button } from './src/components/Button/Button.js';
+export { ButtonGroup } from './src/components/ButtonGroup/ButtonGroup.js';
+export { Checkbox } from './src/components/Checkbox/Checkbox.js';
+export { Container } from './src/components/Container/Container.js';
+export { DateTime, formatDate } from './src/components/DateTime/DateTime.js';
+export { Draggable } from './src/components/Draggable/Draggable.js';
+export { Expand } from './src/components/Expand/Expand.js';
+export { Form } from './src/components/Form/Form.js';
+export { Gallery } from './src/components/Gallery/Gallery.js';
+export { Heading } from './src/components/Heading/Heading.js';
+export { Icon, icons } from './src/components/Icon/Icon.js';
+export { Input } from './src/components/Input/Input.js';
+export { InputFile } from './src/components/InputFile/InputFile.js';
+export { Label } from './src/components/Label/Label.js';
+export { Lazy } from './src/components/Lazy/Lazy.js';
+export { LightBox } from './src/components/LightBox/LightBox.js';
+export { Notifications, NotificationsStore } from './src/components/Notifications/Notifications.js';
+export { Paranja } from './src/components/Paranja/Paranja.js';
+export { ANIMATION_DURATION, Popup } from './src/components/Popup/Popup.js';
+export { Portal } from './src/components/Portal/Portal.js';
+export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
+export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
+export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
+export { Select, SelectHelpers } from './src/components/Select/Select.js';
+export { Scroll } from './src/components/Scroll/Scroll.js';
+export { Spinner } from './src/components/Spinner/Spinner.js';
+export { Table } from './src/components/Table/Table.js';
+export { Tabs } from './src/components/Tabs/Tabs.js';
+export { H1, H2, H3, H4, H5, H6 } from './src/components/Text/Text.js';
+export { Theme } from './src/components/Theme/Theme.js';
+export { VH } from './src/components/VH/VH.js';
+export { default as Virtualized } from './src/components/Virtualized/Virtualized.js';
+export { default as VirtualizedList } from './src/components/Virtualized/List/List.js';
+export { default as VirtualizedListScroll } from './src/components/Virtualized/List/ListScroll.js';
+import * as Virtualized_types from './src/components/Virtualized/Virtualized.types.js';
+export { Virtualized_types as VirtualizedTypes };
+import * as i18n from './src/services/i18n.js';
+export { i18n };
+import * as env from './src/tools/env.js';
+export { env };
+export { config } from './src/tools/config.js';
+import * as array from './src/tools/array.js';
+export { array };
+import * as string from './src/tools/string.js';
+export { string };
+import * as number from './src/tools/number.js';
+export { number };
+import * as object from './src/tools/object.js';
+export { object };
+import * as file from './src/tools/file.js';
+export { file };
+import * as uid from './src/tools/uid.js';
+export { uid };
+import * as dom from './src/tools/dom.js';
+export { dom };
+export { default as rangeMap } from './src/tools/rangeMap.js';
+import * as scroll from './src/tools/scroll.js';
+export { scroll };
+export { default as throttle } from './src/tools/throttle.js';
+export { default as debounce } from './src/tools/debounce.js';
+export { default as LS } from './src/tools/localStorage.js';
+import * as resizeObserver from './src/tools/resizeObserver.js';
+export { resizeObserver };
+import * as queryParams from './src/tools/queryParams.js';
+export { queryParams };
+import * as Form_types from './src/components/Form/Form.types.js';
+export { Form_types as FormTypes };
+export { SubmitButtons } from './src/components/Form/SubmitButtons/SubmitButtons.js';
+import * as InputFile_types from './src/components/InputFile/InputFile.types.js';
+export { InputFile_types as InputFileTypes };
+export { Route } from './src/components/Router/Route.js';
+export { Redirect } from './src/components/Router/Redirect.js';
+export { Link } from './src/components/Router/Link/Link.js';
+import * as Theme_helpers from './src/components/Theme/Theme.helpers.js';
+export { Theme_helpers as ThemeHelpers };
+import * as Theme_defaults from './src/components/Theme/Theme.defaults.js';
+export { Theme_defaults as ThemeDefaults };

package/dist/esm/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,28 @@
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };

package/dist/esm/src/components/AssistiveText/AssistiveText.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './AssistiveText.styl.js';
+
+function AssistiveText(props) {
+    const { className, size = 'm', variant = 'default', children, ...rest } = props;
+    return (jsx("div", { className: cn(S.root, S[`size-${size}`], S[`variant-${variant}`], className), ...rest, children: children }));
+}
+
+export { AssistiveText };

package/dist/esm/src/components/AssistiveText/AssistiveText.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".AssistiveText_root__OI3ju{font-size:80%;line-height:1.5em;margin-bottom:.2em}.AssistiveText_size-s__gsuS-{padding:0 10px}.AssistiveText_size-m__PDlkc{padding:0 12px}.AssistiveText_size-l__D-9pQ{padding:0 14px}.AssistiveText_variant-danger__N8sGS{color:var(--danger-color)}";
+var S = {"root":"AssistiveText_root__OI3ju","size-s":"AssistiveText_size-s__gsuS-","size-m":"AssistiveText_size-m__PDlkc","size-l":"AssistiveText_size-l__D-9pQ","variant-danger":"AssistiveText_variant-danger__N8sGS"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Button/Button.helpers.js

@@ -0,0 +1,12 @@
+// Safari and Firefox not fire focus on click
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+function focusOnClick(buttonElem) {
+    const ua = navigator.userAgent.toLowerCase();
+    const isSafari = ua.indexOf('safari') > -1 && ua.indexOf('chrome') === -1;
+    const isFirefox = /firefox/.test(ua);
+    if (isSafari || isFirefox) {
+        buttonElem?.focus();
+    }
+}
+
+export { focusOnClick };

package/dist/esm/src/components/Button/Button.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { Spinner } from '../Spinner/Spinner.js';
+import S from './Button.styl.js';
+import { focusOnClick } from './Button.helpers.js';
+
+function Button(props) {
+    const { className, loading, checked, square, onMouseUp, children, type = 'button', variant = 'default', size = 'm', prefixElem, postfixElem, onRef, ...rest } = props;
+    const { disabled } = props;
+    const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], loading && S.loading, checked && S.checked, square && S.square, className);
+    const [buttonElem, setButtonElem] = useState(null);
+    const onRefHandler = useCallback(elem => {
+        if (onRef)
+            onRef(elem);
+        setButtonElem(elem);
+    }, []);
+    // @ts-ignore
+    rest.onMouseUp = useCallback(e => {
+        if (onMouseUp)
+            onMouseUp(e);
+        focusOnClick(buttonElem);
+    }, [onMouseUp, buttonElem]);
+    if (disabled)
+        rest.tabIndex = -1;
+    useEffect(() => {
+        const activeElement = document.activeElement;
+        if (!disabled || !activeElement)
+            return;
+        if (buttonElem && buttonElem === activeElement)
+            activeElement?.blur(); // eslint-disable-line
+    }, [disabled]);
+    return (
+    // @ts-ignore
+    jsxs("button", { className: classes, ...rest, type: type, ref: onRefHandler, children: [prefixElem && jsx("div", { className: S.prefix, children: prefixElem }), typeof children === 'string' ? jsx("span", { children: children }) : children, postfixElem && jsx("div", { className: S.postfix, children: postfixElem }), loading && jsx(Spinner, { className: cn(S.spinner, S.postfix), size: size })] }));
+}
+
+export { Button };

package/dist/esm/src/components/Button/Button.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Button_root__SZns2{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;justify-content:center;line-height:1em;text-decoration:none;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Button_root__SZns2:focus,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-100)}.Button_root__SZns2[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Button_root__SZns2:active,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-300)}.Button_root__SZns2:active{opacity:.7}.Button_root__SZns2.Button_loading__c4pdo{pointer-events:none}.Button_root__SZns2.Button_checked__X7f58,.Button_root__SZns2.Button_checked__X7f58:hover{background-color:var(--accent-color);box-shadow:none;color:var(--decent-color)}.Button_root__SZns2.Button_checked__X7f58:hover{background-color:var(--accent-color-alpha-900)}.Button_root__SZns2.Button_checked__X7f58 path{fill:var(--decent-color)}.Button_postfix__DwG-n,.Button_prefix__czqd5{display:flex}.Button_prefix__czqd5:not(:last-child){margin-right:.5em}.Button_postfix__DwG-n:not(:first-child){margin-left:.5em}.Button_size-s__-SIY1{border-radius:4px;font-size:12px;min-height:30px;min-width:30px;padding:0 10px}.Button_size-s__-SIY1.Button_square__eYSY3{max-height:30px;width:30px}.Button_size-m__TBXc-{border-radius:6px;font-size:16px;min-height:40px;min-width:40px;padding:0 12px}.Button_size-m__TBXc-.Button_square__eYSY3{max-height:40px;width:40px}.Button_size-l__Sx37T{border-radius:8px;font-size:20px;min-height:50px;min-width:50px;padding:0 14px}.Button_size-l__Sx37T.Button_square__eYSY3{max-height:50px}.Button_square__eYSY3{justify-content:center;padding:0}.Button_variant-clear__z1HZm:focus,.Button_variant-clear__z1HZm:hover,.Button_variant-default__vbo51:focus,.Button_variant-default__vbo51:hover{background-color:var(--active-color-alpha-300)}.Button_variant-clear__z1HZm{background-color:transparent}.Button_variant-default__vbo51{background-color:var(--accent-color-alpha-100)}.Button_variant-outlined__shnIq{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_variant-outlined__shnIq:focus{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Button_variant-primary__zhEQI{background-color:var(--active-color);color:var(--accent-color-alpha-900)}.Button_variant-primary__zhEQI:hover{background-color:var(--active-color-alpha-800)}.Button_variant-primary__zhEQI:focus{background-color:var(--active-color);box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_spinner__ttaMr{margin-left:var(--indent-s)}";
+var S = {"root":"Button_root__SZns2","loading":"Button_loading__c4pdo","checked":"Button_checked__X7f58","prefix":"Button_prefix__czqd5","postfix":"Button_postfix__DwG-n","size-s":"Button_size-s__-SIY1","square":"Button_square__eYSY3","size-m":"Button_size-m__TBXc-","size-l":"Button_size-l__Sx37T","variant-clear":"Button_variant-clear__z1HZm","variant-default":"Button_variant-default__vbo51","variant-outlined":"Button_variant-outlined__shnIq","variant-primary":"Button_variant-primary__zhEQI","spinner":"Button_spinner__ttaMr"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './ButtonGroup.styl.js';
+
+function ButtonGroup(props) {
+    const { children, className, ...rest } = props;
+    return (jsx("div", { className: cn(S.root, className), ...rest, children: children }));
+}
+
+export { ButtonGroup };

package/dist/esm/src/components/ButtonGroup/ButtonGroup.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ButtonGroup_root__DGOTX{display:flex}.ButtonGroup_root__DGOTX>button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.ButtonGroup_root__DGOTX>button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}";
+var S = {"root":"ButtonGroup_root__DGOTX"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Checkbox/Checkbox.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import cn from 'classnames';
+import { createStore } from 'justorm/react';
+import { Icon } from '../Icon/Icon.js';
+import { generateUID } from '../../tools/uid.js';
+import S from './Checkbox.styl.js';
+
+class Checkbox extends Component {
+    id;
+    store;
+    static defaultProps = {
+        size: 'm',
+        variant: 'default',
+        label: '',
+        checked: false,
+    };
+    constructor(props) {
+        super(props);
+        this.id = props.id || generateUID();
+        this.store = createStore(this, { isActive: false, isFocused: false });
+    }
+    onMouseDown = () => {
+        this.store.isActive = true;
+    };
+    onMouseUp = () => {
+        this.store.isActive = false;
+    };
+    onFocus = (e) => {
+        const { onFocus } = this.props;
+        this.store.isFocused = true;
+        onFocus?.(e);
+    };
+    onBlur = (e) => {
+        const { onBlur } = this.props;
+        this.store.isFocused = false;
+        onBlur?.(e);
+    };
+    render() {
+        const { className, label, size, variant, error, ...props } = this.props;
+        const { checked, disabled } = props;
+        const { isActive, isFocused } = this.store;
+        const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], checked && S.checked, disabled && S.disabled, error && S.hasError, isActive && S.isActive, isFocused && S.isFocused, className);
+        return (jsxs("label", { className: classes, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, children: [jsxs("div", { className: S.controlWrapper, children: [jsx("input", { className: S.control, ...props, onFocus: this.onFocus, onBlur: this.onBlur, id: this.id, type: "checkbox", tabIndex: 0 }), jsx(Icon, { type: "check", className: S.checkmark, size: size })] }), label] }));
+    }
+}
+
+export { Checkbox };

package/dist/esm/src/components/Checkbox/Checkbox.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Checkbox_root__4nsMp{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Checkbox_disabled__mcg2G{opacity:.4;pointer-events:none}.Checkbox_controlWrapper__bHYKO{border-radius:var(--border-radius-m);display:block;margin-right:1em;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.Checkbox_variant-default__ck-xT .Checkbox_controlWrapper__bHYKO{background-color:var(--accent-color-alpha-100)}.Checkbox_variant-outlined__dtjX- .Checkbox_controlWrapper__bHYKO{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Checkbox_root__4nsMp:hover .Checkbox_controlWrapper__bHYKO{background-color:var(--active-color-alpha-100)}.Checkbox_isActive__uu6VN .Checkbox_controlWrapper__bHYKO,.Checkbox_isFocused__fMPy3 .Checkbox_controlWrapper__bHYKO{box-shadow:inset 0 0 0 2px var(--active-color)!important}.Checkbox_hasError__YUP6n .Checkbox_controlWrapper__bHYKO{box-shadow:inset 0 0 0 2px var(--danger-color)!important}.Checkbox_isActive__uu6VN .Checkbox_controlWrapper__bHYKO{background-color:var(--active-color-alpha-100);opacity:.7}.Checkbox_control__SAuxo{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;transition:.1s ease-out;transition-property:background-color,color}.Checkbox_control__SAuxo:focus,.Checkbox_control__SAuxo:hover{background-color:var(--active-color-alpha-100)}.Checkbox_control__SAuxo[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Checkbox_checkmark__FrCws{height:100%!important;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:scale(.6) rotateY(-90deg);transition:.1s ease-in;transition-property:transform,opacity;width:100%!important}.Checkbox_checked__ZREOF .Checkbox_checkmark__FrCws{opacity:1;transform:scale(.6)}.Checkbox_size-s__T8-y2{font-size:12px}.Checkbox_size-s__T8-y2 .Checkbox_controlWrapper__bHYKO{border-radius:4px;min-height:30px;min-width:30px}.Checkbox_size-m__LCe6f{font-size:16px}.Checkbox_size-m__LCe6f .Checkbox_controlWrapper__bHYKO{border-radius:6px;min-height:40px;min-width:40px}.Checkbox_size-l__U-WS4{font-size:20px}.Checkbox_size-l__U-WS4 .Checkbox_controlWrapper__bHYKO{border-radius:8px;min-height:50px;min-width:50px}";
+var S = {"root":"Checkbox_root__4nsMp","disabled":"Checkbox_disabled__mcg2G","controlWrapper":"Checkbox_controlWrapper__bHYKO","variant-default":"Checkbox_variant-default__ck-xT","variant-outlined":"Checkbox_variant-outlined__dtjX-","isActive":"Checkbox_isActive__uu6VN","isFocused":"Checkbox_isFocused__fMPy3","hasError":"Checkbox_hasError__YUP6n","control":"Checkbox_control__SAuxo","checkmark":"Checkbox_checkmark__FrCws","checked":"Checkbox_checked__ZREOF","size-s":"Checkbox_size-s__T8-y2","size-m":"Checkbox_size-m__LCe6f","size-l":"Checkbox_size-l__U-WS4"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Container/Container.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './Container.styl.js';
+
+function Container(props) {
+    const { className, children, size, alignItemsCenter, justifyContentCenter, vertical, fullHeight, fullWidth, scrolledX, scrolledY, style, ...rest } = props;
+    const classes = cn(S.root, size && S[`size-${size}`], alignItemsCenter && S.alignItemsCenter, justifyContentCenter && S.justifyContentCenter, vertical && S.vertical, scrolledX && S.scrolledX, scrolledY && S.scrolledY, fullHeight && S.fullHeight, fullWidth && S.fullWidth, className);
+    const stylesObj = { ...style };
+    return (jsx("div", { className: classes, ...rest, style: stylesObj, children: children }));
+}
+
+export { Container };

package/dist/esm/src/components/Container/Container.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Container_root__ZumTN{display:flex;margin:0 auto}@media (min-width:var(--tablet )){.Container_root__ZumTN{padding:var(--indent-m)}}@media (min-width:var(--desktop )){.Container_root__ZumTN{padding:var(--indent-l)}}.Container_size-s__zyPBS{padding:var(--indent-s)}.Container_size-m__MGaiX{padding:var(--indent-m)}.Container_size-l__hHWPx{padding:var(--indent-l)}.Container_size-xl__1X88n{padding:50px}.Container_vertical__Xzag9{flex-direction:column}.Container_justifyContentCenter__t2p2K{justify-content:center}.Container_alignItemsCenter__gVolL{align-items:center}.Container_fullHeight__5dBZa{height:100%;width:100%}.Container_fullWidth__javSY{width:100%}.Container_scrolledX__FFZpZ{overflow-x:auto}.Container_scrolledY__0HKdO{overflow-y:auto}";
+var S = {"root":"Container_root__ZumTN","size-s":"Container_size-s__zyPBS","size-m":"Container_size-m__MGaiX","size-l":"Container_size-l__hHWPx","size-xl":"Container_size-xl__1X88n","vertical":"Container_vertical__Xzag9","justifyContentCenter":"Container_justifyContentCenter__t2p2K","alignItemsCenter":"Container_alignItemsCenter__gVolL","fullHeight":"Container_fullHeight__5dBZa","fullWidth":"Container_fullWidth__javSY","scrolledX":"Container_scrolledX__FFZpZ","scrolledY":"Container_scrolledY__0HKdO"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/DateTime/DateTime.js

@@ -0,0 +1,17 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import moment from 'moment';
+
+function formatDate({ value, format, locale = 'en' }) {
+    const d = moment(value).locale(locale);
+    if (format) {
+        if (d[format])
+            return d[format]();
+        return d.format(format);
+    }
+    return d.toString();
+}
+function DateTime({ value = new Date(), format, locale }) {
+    return jsx(Fragment, { children: formatDate({ value, format, locale }) });
+}
+
+export { DateTime, formatDate };

package/dist/esm/src/components/Draggable/Draggable.js

@@ -0,0 +1,136 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { createStore } from 'justorm/react';
+import cn from 'classnames';
+import Time from 'timen';
+import 'nanoid';
+import '../../tools/dom.js';
+import debounce from '../../tools/debounce.js';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+import S from './Draggable.styl.js';
+
+class Draggable extends Component {
+    store;
+    startPos = null;
+    draggingElem = null;
+    draggingElemBounds = null;
+    dragStartFired = false;
+    timers = Time.create();
+    constructor(props) {
+        super(props);
+        this.store = createStore(this, {
+            draggingId: null,
+            underId: null,
+            underOffset: '',
+        });
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.items.join(',') !== this.props.items.join(',')) {
+            this.dropUnder();
+        }
+    }
+    componentWillUnmount() {
+        this.timers.clear();
+    }
+    onPointerDown = e => {
+        const { clientX: x, clientY: y, currentTarget } = e;
+        e.stopPropagation();
+        this.timers.clear();
+        this.startPos = { x, y };
+        this.draggingElem = currentTarget;
+        this.draggingElemBounds = currentTarget.getBoundingClientRect();
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
+    onPointerMove = e => {
+        if (!this.draggingElem)
+            return;
+        const { clientX: x, clientY: y } = e;
+        if (!this.store.draggingId) {
+            this.store.draggingId = this.draggingElem.dataset.id;
+        }
+        if (!this.dragStartFired) {
+            this.dragStartFired = true;
+            this.props.onDragStart?.(this.store.draggingId);
+        }
+        const dx = x - this.startPos.x;
+        const dy = y - this.startPos.y;
+        this.transformInner(this.draggingElem, `translate(${dx}px, ${dy}px)`);
+        this.checkUnderElem(x, y);
+    };
+    checkUnderElem = debounce((x, y) => {
+        const underItem = document.elementFromPoint(x, y)?.closest(`.${S.item}`);
+        if (!underItem) {
+            this.store.underOffset = '';
+            this.store.underId = null;
+            return;
+        }
+        // @ts-ignore
+        const { id } = underItem.dataset;
+        const { draggingId, underId } = this.store;
+        if (!this.startPos || id === draggingId || id === underId)
+            return;
+        const { x: x1, y: y1 } = this.draggingElemBounds;
+        const { x: x2, y: y2 } = this.selectInner(underItem).getBoundingClientRect();
+        const dx = x1 - x2;
+        const dy = y1 - y2;
+        this.store.underOffset = `translate(${dx}px, ${dy}px)`;
+        this.store.underId = id;
+    }, 100);
+    onPointerOut = ({ target }) => {
+        const { id } = target.dataset;
+        if (!id || id === this.store.draggingId)
+            return;
+        this.transformInner(target, null);
+        this.dropUnder();
+    };
+    onPointerUp = e => {
+        const { underId, draggingId } = this.store;
+        const { onChange, onDragEnd } = this.props;
+        const { id } = this.draggingElem.dataset;
+        if (draggingId) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        this.dragStartFired = false;
+        this.startPos = null;
+        this.store.draggingId = null;
+        if (underId && onChange) {
+            const newItems = [...this.props.items];
+            const draggingIndex = newItems.indexOf(id);
+            const underIndex = newItems.indexOf(underId);
+            newItems[underIndex] = id;
+            newItems[draggingIndex] = underId;
+            onChange(newItems);
+        }
+        this.dropUnder();
+        this.timers.after(100, () => {
+            if (this.draggingElem) {
+                this.selectInner(this.draggingElem).style.transform = null;
+                this.draggingElem = null;
+            }
+            onDragEnd?.(draggingId);
+        });
+    };
+    selectInner = elem => elem.querySelector('& > div');
+    transformInner(elem, str) {
+        if (!elem)
+            return;
+        this.selectInner(elem).style.transform = str;
+    }
+    dropUnder() {
+        this.store.underId = null;
+        this.store.underOffset = null;
+    }
+    render() {
+        const { items, className, itemClassName, renderItem, children } = this.props;
+        const { draggingId, underId, underOffset } = this.store;
+        return (jsxs("div", { className: cn(S.root, draggingId && S.dragging, className), children: [items.map(id => (jsx("div", { className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: this.onPointerDown, "data-id": id, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, id === draggingId) }) }, id))), children] }));
+    }
+}
+
+export { Draggable };

package/dist/esm/src/components/Draggable/Draggable.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Draggable_root__S1BgI{display:flex;flex-wrap:wrap;position:relative;touch-action:none}.Draggable_item__Z1pXk{display:flex}.Draggable_inner__c4syM{height:100%;transition:transform .2s ease-out;width:100%}.Draggable_dragging__M8qhF .Draggable_active__XcFM3,.Draggable_dragging__M8qhF .Draggable_inner__c4syM{pointer-events:none}.Draggable_dragging__M8qhF .Draggable_active__XcFM3 .Draggable_inner__c4syM{transition-duration:0s;z-index:1}";
+var S = {"root":"Draggable_root__S1BgI","item":"Draggable_item__Z1pXk","inner":"Draggable_inner__c4syM","dragging":"Draggable_dragging__M8qhF","active":"Draggable_active__XcFM3"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Expand/Expand.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import S from './Expand.styl.js';
+
+function Expand(props) {
+    const { className, size = 'm', header, headerClassName, content, contentProps = {}, isOpen: initialOpen = false, onChange, } = props;
+    const [isOpen, setIsOpen] = useState(initialOpen);
+    const onHeaderClick = useCallback(() => {
+        const value = !isOpen;
+        setIsOpen(value);
+        onChange?.(value);
+    }, [isOpen]);
+    useEffect(() => {
+        setIsOpen(initialOpen);
+    }, [initialOpen]);
+    return (jsxs("div", { className: cn(S.root, isOpen && S.isOpen, className), children: [jsxs(Button, { variant: "clear", className: cn(S.header, headerClassName), size: size, onClick: onHeaderClick, children: [header, "\u00A0", jsx(Icon, { type: "chevronRight", size: size, className: S.headerIcon })] }), isOpen &&
+                // @ts-ignore
+                (content?.(contentProps) || jsx("div", { ...contentProps, children: content }))] }));
+}
+
+export { Expand };

package/dist/esm/src/components/Expand/Expand.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Expand_root__zxSvx{display:flex;flex-direction:column}.Expand_root__zxSvx+.Expand_root__zxSvx{margin-top:var(--indent-s)}.Expand_header__LxAel{justify-content:space-between}.Expand_headerIcon__CXlwY{transition:transform .2s ease-out}.Expand_isOpen__k6lyZ .Expand_header__LxAel{background-color:var(--active-color-alpha-500)}.Expand_isOpen__k6lyZ .Expand_headerIcon__CXlwY{transform:rotate(90deg)}";
+var S = {"root":"Expand_root__zxSvx","header":"Expand_header__LxAel","headerIcon":"Expand_headerIcon__CXlwY","isOpen":"Expand_isOpen__k6lyZ"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Form/Form.helpers.js

@@ -0,0 +1,42 @@
+import compare from 'compareq';
+import { clone } from '../../tools/object.js';
+
+function patchWithCustomMessages(checkRes, validationSchema) {
+    return checkRes.reduce((acc, { field, ...rest }) => {
+        const customMessage = validationSchema[field]?.message ??
+            validationSchema[field]?.messages?.[rest.type];
+        if (customMessage)
+            rest.message = customMessage;
+        return { ...acc, [field]: rest };
+    }, {});
+}
+function dropFocusFromSubmit() {
+    const focusedSubmit = document.querySelector('button[type=submit]:focus');
+    focusedSubmit?.blur(); // eslint-disable-line
+}
+function getInitialTouched(initialValues) {
+    return Object.keys(initialValues).reduce((acc, name) => ({ ...acc, [name]: false }), {});
+}
+function getNotEmpty(_defaultValues, values) {
+    const defaultValues = _defaultValues || values;
+    return Object.entries(values).reduce((acc, [field, val]) => compare(defaultValues[field], val) ? acc : { ...acc, [field]: true }, {});
+}
+function getVal(e, val, valField) {
+    if (val !== undefined)
+        return val;
+    return e?.target ? e.target[valField] : e;
+}
+function cloneValue(val) {
+    if (typeof val === 'object' && val !== null) {
+        // date
+        if (val?._isAMomentObject)
+            return val.clone();
+        return clone(val);
+    }
+    return val;
+}
+function cloneValues(values) {
+    return Object.entries(values).reduce((acc, [name, val]) => ({ ...acc, [name]: cloneValue(val) }), {});
+}
+
+export { cloneValues, dropFocusFromSubmit, getInitialTouched, getNotEmpty, getVal, patchWithCustomMessages };