torgbox-ui 1.0.7 → 1.0.9

package/dist/esm/Pages/ResetPasswordPage/index.js

@@ -0,0 +1 @@
+export { ResetPasswordPage } from './ResetPasswordPage';

package/dist/esm/Pages/ResetPasswordPage/resetPasswordPage.scss

@@ -0,0 +1,41 @@
+$page-background:  $surface-bright;
+$text:             $neutral-middle;
+$title:            $neutral-high;
+
+.reset-password-page {
+  background-color: $page-background;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  box-sizing: border-box;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 24px 40px;
+
+  &__title {
+    text-align: center;
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $title;
+  }
+
+  &__text {
+    color: $text;
+  }
+
+  &__form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .reset-password-page {
+    max-width: 320px;
+    padding: 24px 16px;
+  }
+}

package/dist/esm/Pages/StartPage/StartPage.d.ts

@@ -0,0 +1,4 @@
+export interface IStartPage {
+    email: string;
+}
+export declare const StartPage: (props: IStartPage) => JSX.Element;

package/dist/esm/Pages/StartPage/StartPage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAppDispatch } from '../../app/store';
+import { logout } from '../../entities/user';
+import { Button } from '../../Inputs';
+export const StartPage = (props) => {
+    const { email } = props;
+    const dispatch = useAppDispatch();
+    const [createLoading, setCreateLoading] = useState(false);
+    const [joinLoading, setJoinLoading] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setCreateLoading(false);
+            setJoinLoading(false);
+        }, 2000);
+    });
+    return (_jsxs("div", { className: 'start-page', children: [(createLoading || joinLoading) && _jsx("div", { className: 'start-page__overlay' }), _jsxs("h1", { className: 'start-page__title', children: ["\u0414\u043E\u0431\u0440\u043E \u043F\u043E\u0436\u0430\u043B\u043E\u0432\u0430\u0442\u044C!", _jsx("br", {}), "\u0427\u0442\u043E \u0436\u0435\u043B\u0430\u0435\u0442\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C?"] }), _jsxs("div", { className: 'start-page__text-wrapper', children: [_jsxs("p", { className: 'start-page__text', children: ["\u0412\u044B \u0432\u043E\u0448\u043B\u0438 \u043A\u0430\u043A ", _jsx("span", { className: 'start-page__email', children: email })] }), _jsx("p", { className: 'start-page__text', children: "\u0420\u044B\u0431\u0430\u0442\u0435\u043A\u0441\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u0438\u0437\u0430\u0439\u043D\u0435\u0440\u0430\u043C\u0438, \u043F\u0440\u043E\u0435\u043A\u0442\u0438\u0440\u043E\u0432\u0449\u0438\u043A\u0430\u043C\u0438 \u0438 \u0444\u0440\u043E\u043D\u0442\u0435\u043D\u0434\u0435\u0440\u0430\u043C\u0438, \u043A\u043E\u0433\u0434\u0430 \u043D\u0443\u0436\u043D\u043E \u0431\u044B\u0441\u0442\u0440\u043E \u0437\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u043C\u0430\u043A\u0435\u0442\u044B \u0438\u043B\u0438 \u043F\u0440\u043E\u0442\u043E\u0442\u0438\u043F\u044B." })] }), _jsx(Button, { label: '\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u043A\u043E\u043C\u0430\u043D\u0434\u0443', size: 'large', state: createLoading ? 'loading' : 'idle', tabIndex: 1, onClick: () => {
+                    setCreateLoading(true);
+                }, fullWidth: true }), _jsx(Button, { label: '\u0412\u0441\u0442\u0443\u043F\u0438\u0442\u044C \u0432 \u043A\u043E\u043C\u0430\u043D\u0434\u0443', size: 'large', state: joinLoading ? 'loading' : 'idle', variant: 'outlined-color', tabIndex: 2, onClick: () => {
+                    setJoinLoading(true);
+                }, fullWidth: true }), _jsx(Button, { label: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u0441\u0438\u0441\u0442\u0435\u043C\u044B', size: 'large', variant: 'clear-neutral', tabIndex: 3, onClick: () => dispatch(logout()), fullWidth: true })] }));
+};

package/dist/esm/Pages/StartPage/index.d.ts

@@ -0,0 +1 @@
+export { StartPage } from './StartPage';

package/dist/esm/Pages/StartPage/index.js

@@ -0,0 +1 @@
+export { StartPage } from './StartPage';

package/dist/esm/Pages/StartPage/startPage.scss

@@ -0,0 +1,58 @@
+$page-background:  $surface-bright;
+$bold-text:        $neutral-high;
+$text:             $neutral-middle;
+
+.start-page {
+  background-color: $page-background;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  box-sizing: border-box;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 24px 40px;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: $page-background;
+    opacity: 0.6;
+    z-index: 1;
+  }
+
+  &__title {
+    text-align: center;
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $bold-text;
+  }
+
+  &__text-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  &__text {
+    text-align: center;
+    color: $text;
+  }
+
+  &__email {
+    color: $bold-text;
+    font-weight: 700;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .start-page {
+    max-width: 320px;
+    padding: 24px 16px;
+  }
+}

package/dist/esm/Pages/index.d.ts

@@ -0,0 +1,6 @@
+export { RegisterPage } from './RegisterPage';
+export { EmailConfirmationPage } from './EmailConfirmationPage';
+export { CreatePasswordPage } from './CreatePasswordPage';
+export { LoginPage } from './LoginPage';
+export { StartPage } from './StartPage';
+export { ContentPage } from './ContentPage';

package/dist/esm/Pages/index.js

@@ -0,0 +1,6 @@
+export { RegisterPage } from './RegisterPage';
+export { EmailConfirmationPage } from './EmailConfirmationPage';
+export { CreatePasswordPage } from './CreatePasswordPage';
+export { LoginPage } from './LoginPage';
+export { StartPage } from './StartPage';
+export { ContentPage } from './ContentPage';

package/dist/esm/Pages/index.scss

@@ -0,0 +1,9 @@
+@import './RegisterPage/registerPage';
+@import './CreatePasswordPage/createPasswordPage';
+@import './EmailConfirmationPage/emailConfirmationPage';
+@import './LoginPage/loginPage';
+@import './StartPage/startPage';
+@import './CreateTeamPage/createTeamPage';
+@import './JoinTeamPage/joinTeamPage';
+@import './ResetPasswordPage/resetPasswordPage';
+@import './ContentPage/contentPage';

package/dist/esm/Utils/Divider/Divider.d.ts

@@ -0,0 +1 @@
+export declare const Divider: () => JSX.Element;

package/dist/esm/Utils/Divider/Divider.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Divider = () => _jsx("hr", { className: 'divider' });

package/dist/esm/Utils/Divider/divider.scss

@@ -0,0 +1,11 @@
+@use 'sass:color';
+
+$line-color: $global-color-neutral-80;
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 12px 0;
+  background-color: $line-color;
+  border: none;
+}

package/dist/esm/Utils/ErrorBanner/ErrorBanner.d.ts

@@ -0,0 +1,4 @@
+export interface IErrorBanner {
+    error: string;
+}
+export declare const ErrorBanner: (props: IErrorBanner) => JSX.Element;

package/dist/esm/Utils/ErrorBanner/ErrorBanner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WarningIcon from '../../assets/img/warning.svg';
+export const ErrorBanner = (props) => {
+    const { error } = props;
+    return (_jsxs("div", { className: 'error-banner', children: [_jsx("div", { className: 'error-banner__icon', children: _jsx(WarningIcon, {}) }), _jsx("p", { className: 'error-banner__text', children: error })] }));
+};

package/dist/esm/Utils/ErrorBanner/errorBanner.scss

@@ -0,0 +1,24 @@
+$error-content: $error-high;
+$error-background: $error-border-low;
+
+.error-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background-color: $error-background;
+  border-radius: 4px;
+  padding: 14px;
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: 16px;
+
+  &__icon {
+    fill: $error-content;
+    width: 16px;
+    height: 16px;
+  }
+
+  &__text {
+    color: $error-content;
+  }
+}

package/dist/esm/Utils/ErrorBanner/index.d.ts

@@ -0,0 +1 @@
+export { ErrorBanner } from './ErrorBanner';

package/dist/esm/Utils/ErrorBanner/index.js

@@ -0,0 +1 @@
+export { ErrorBanner } from './ErrorBanner';

package/dist/esm/Utils/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, AnchorHTMLAttributes } from 'react';
+export interface ILink extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    label: string;
+    iconComponent?: ReactNode;
+    iconClassName?: string;
+}
+export declare const Link: ({ iconComponent, label, iconClassName, ...props }: ILink) => JSX.Element;

package/dist/esm/Utils/Link/Link.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+export const Link = ({ iconComponent, label, iconClassName, ...props }) => {
+    return (_jsxs("a", { href: '#', className: 'link', ...props, children: [iconComponent && (_jsx("div", { className: cn('link__icon', [iconClassName]), children: iconComponent })), label] }));
+};

package/dist/esm/Utils/Link/index.d.ts

@@ -0,0 +1 @@
+export { Link, type ILink } from './Link';

package/dist/esm/Utils/Link/index.js

@@ -0,0 +1 @@
+export { Link } from './Link';

package/dist/esm/Utils/Link/index.scss

@@ -0,0 +1 @@
+@import './Link/link';

package/dist/esm/Utils/Link/link.scss

@@ -0,0 +1,21 @@
+.link {
+  color: $primary-high;
+  font-size: 14px;
+  line-height: 20px;
+  display: flex;
+  gap: 4px;
+
+  &:hover,
+  &:focus {
+    cursor: pointer;
+    text-decoration: underline $primary-middle;
+  }
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    fill: $primary-high;
+    width: 20px;
+  }
+}

package/dist/esm/Utils/Modal/Modal.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export interface IModal {
+    opened: boolean;
+    onCloseModal: () => void;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Modal: (props: IModal) => JSX.Element;

package/dist/esm/Utils/Modal/Modal.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useCallback, useEffect, } from 'react';
+import { Portal } from '../Portal/Portal';
+export const Modal = (props) => {
+    const { opened, onCloseModal, children, className, } = props;
+    const onContentHandler = (e) => {
+        e.stopPropagation();
+    };
+    const onKeydownHandler = useCallback((e) => {
+        if (e.key === 'Escape') {
+            onCloseModal();
+        }
+    }, [onCloseModal]);
+    useEffect(() => {
+        if (opened) {
+            window.addEventListener('keydown', onKeydownHandler);
+        }
+        return () => {
+            window.removeEventListener('keydown', onKeydownHandler);
+        };
+    }, [opened, onKeydownHandler]);
+    return (_jsx(Portal, { children: _jsx("div", { className: cn('modal', className), children: _jsx("div", { className: 'modal__overlay', onClick: onCloseModal, children: _jsx("div", { className: 'modal__content', onClick: onContentHandler, children: children }) }) }) }));
+};

package/dist/esm/Utils/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal, type IModal } from './Modal';

package/dist/esm/Utils/Modal/index.js

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/esm/Utils/Modal/modal.scss

@@ -0,0 +1,33 @@
+@use 'sass:color';
+
+$modal-background-color: $global-color-neutral-100;
+$modal-overlay-color:    $neutral-A48;
+$modal-border-color:     $global-color-neutral-20;
+
+.modal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
+
+  &__overlay {
+    width: 100%;
+    height: 100%;
+    background-color: $modal-overlay-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__content {
+    width: 440px;
+    padding: 32px 32px 24px 32px;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 16px;
+    background-color: $modal-background-color;
+    border-radius: 8px;
+    border: 1px solid $modal-border-color;
+  }
+}

package/dist/esm/Utils/Portal/Portal.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+interface IPortal {
+    children?: ReactNode;
+    element?: HTMLElement;
+}
+export declare const Portal: (props: IPortal) => JSX.Element;
+export {};

package/dist/esm/Utils/Portal/Portal.js

@@ -0,0 +1,5 @@
+import { createPortal } from 'react-dom';
+export const Portal = (props) => {
+    const { children, element = document.body } = props;
+    return createPortal(children, element);
+};

package/dist/esm/Utils/SectionPlaceholder/SectionPlaceholder.d.ts

@@ -0,0 +1,5 @@
+interface SectionPlaceholderProps {
+    label?: string;
+}
+export declare const SectionPlaceholder: ({ label }: SectionPlaceholderProps) => JSX.Element;
+export {};

package/dist/esm/Utils/SectionPlaceholder/SectionPlaceholder.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SectionPlaceholder = ({ label = 'Placeholder' }) => (_jsx("section", { className: 'section-placeholder', children: _jsx("div", { className: 'placeholder', children: label }) }));

package/dist/esm/Utils/SectionPlaceholder/sectionPlaceholder.scss

@@ -0,0 +1,22 @@
+@use 'sass:color';
+
+$section-background-color: $global-color-neutral-80;
+$border-dash-color:        $global-color-neutral-40;
+
+.section-placeholder {
+  width: 100%;
+  height: calc(100vh - $header-height);
+  padding: 24px;
+  box-sizing: border-box;
+  background-color: $section-background-color;
+
+  .placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    border: 1px dashed $border-dash-color;
+  }
+}

package/dist/esm/Utils/Spinner/Spinner.d.ts

@@ -0,0 +1,5 @@
+interface ISpinner {
+    className?: string;
+}
+export declare const Spinner: ({ className }: ISpinner) => JSX.Element;
+export {};

package/dist/esm/Utils/Spinner/Spinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+export const Spinner = ({ className }) => {
+    return (_jsx("div", { className: cn('spinner', className), children: _jsx("svg", { viewBox: '25 25 50 50', children: _jsx("circle", { cx: '50', cy: '50', r: '20' }) }) }));
+};

package/dist/esm/Utils/Spinner/spinner.scss

@@ -0,0 +1,41 @@
+.spinner {
+  display: flex;
+  align-items: center;
+}
+
+.spinner svg {
+  transform-origin: center;
+  animation: rotate 2s linear infinite;
+}
+
+.spinner circle {
+  fill: none;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-width: 4;
+
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35px;
+  }
+
+  100% {
+    stroke-dashoffset: -125px;
+  }
+}

package/dist/esm/Utils/api.d.ts

@@ -0,0 +1 @@
+export declare const baseApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, {}, "baseApi", never, typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;

package/dist/esm/Utils/api.js

@@ -0,0 +1,7 @@
+import { createApi, fetchBaseQuery, } from '@reduxjs/toolkit/query/react';
+import { BASE_URL } from '@/shared/model';
+export const baseApi = createApi({
+    reducerPath: 'baseApi',
+    baseQuery: fetchBaseQuery({ baseUrl: BASE_URL }),
+    endpoints: () => ({}),
+});

package/dist/esm/Utils/index.d.ts

@@ -0,0 +1,7 @@
+export { Spinner } from './Spinner/Spinner';
+export { Portal } from './Portal/Portal';
+export { Link } from './Link/Link';
+export { ErrorBanner } from './ErrorBanner';
+export { Modal } from './Modal/Modal';
+export { Divider } from './Divider/Divider';
+export { SectionPlaceholder } from './SectionPlaceholder/SectionPlaceholder';

package/dist/esm/Utils/index.js

@@ -0,0 +1,7 @@
+export { Spinner } from './Spinner/Spinner';
+export { Portal } from './Portal/Portal';
+export { Link } from './Link/Link';
+export { ErrorBanner } from './ErrorBanner';
+export { Modal } from './Modal/Modal';
+export { Divider } from './Divider/Divider';
+export { SectionPlaceholder } from './SectionPlaceholder/SectionPlaceholder';

package/dist/esm/Utils/index.scss

@@ -0,0 +1,6 @@
+@import './Spinner/spinner';
+@import './Link/link';
+@import './ErrorBanner/errorBanner';;
+@import './Modal/modal';
+@import './Divider/divider';
+@import './SectionPlaceholder/sectionPlaceholder';

package/dist/esm/Widgets/Header/Header.d.ts

@@ -0,0 +1,7 @@
+export interface IHeader {
+    onShowSidebar: () => void;
+    onCloseSidebar: () => void;
+    sidebarOpened: boolean;
+    sidebarPinned: boolean;
+}
+export declare const Header: (props: IHeader) => JSX.Element;

package/dist/esm/Widgets/Header/Header.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useState } from 'react';
+import BeltIcon from '../../assets/img/belt.svg';
+import BurgerMenuIcon from '../../assets/img/burger-menu.svg';
+import CrossIcon from '../../assets/img/cross.svg';
+import SampleLogoIcon from '../../assets/img/sample-logo.svg';
+import { Button, TextField } from '../../Inputs';
+import { Avatar } from '../../shared/ui';
+import { Link } from '../../Utils';
+export const Header = (props) => {
+    const { onShowSidebar, onCloseSidebar, sidebarOpened, sidebarPinned, } = props;
+    const [searchQuery, setSearchQuery] = useState('');
+    return (_jsxs("header", { className: 'header', children: [_jsxs("div", { className: 'header__logo-search-wrapper', children: [_jsxs("div", { className: cn('header__logo-search-wrapper__logo-box', {
+                            'header__logo-search-wrapper__logo-box--noButton': sidebarPinned,
+                        }), children: [!sidebarPinned &&
+                                (_jsx(Button, { size: 'large', variant: 'clear-neutral', iconComponent: sidebarOpened ? _jsx(CrossIcon, {}) : _jsx(BurgerMenuIcon, {}), onClick: sidebarOpened ? onCloseSidebar : onShowSidebar })), _jsx(Link, { label: '', iconComponent: _jsx(SampleLogoIcon, {}), iconClassName: 'link--wide' })] }), _jsx(TextField, { onChange: setSearchQuery, className: 'search-field', state: 'idle', type: 'text', value: searchQuery, placeholder: '\u0418\u0441\u043A\u0430\u0442\u044C \u0447\u0442\u043E \u0443\u0433\u043E\u0434\u043D\u043E...', searchIcon: true, ...props })] }), _jsxs("div", { className: 'header__user-controls', children: [_jsx(Button, { size: 'large', variant: 'clear-neutral', iconComponent: _jsx(BeltIcon, {}) }), _jsx(Avatar, { label: '\u0418\u0424', size: 'lg' })] })] }));
+};

package/dist/esm/Widgets/Header/header.scss

@@ -0,0 +1,50 @@
+@use 'sass:color';
+
+$border-color-neutral: $neutral-middle;
+
+.header {
+  width: 100%;
+  height: $header-height;
+  padding-right: 23px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $border-color-neutral;
+
+  &__logo-search-wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &__logo-box {
+      height: 100%;
+      width: 260px;
+      padding: 0 16px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: 17px;
+
+      &--noButton {
+        padding: 0;
+        justify-content: center;
+      }
+
+      .link--wide {
+        width: auto;
+      }
+    }
+
+    .search-field {
+      border: none;
+      gap: 10px;
+    }
+  }
+
+  &__user-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+}

package/dist/esm/Widgets/Header/index.d.ts

@@ -0,0 +1 @@
+export { Header, type IHeader } from './Header';

package/dist/esm/Widgets/Header/index.js

@@ -0,0 +1 @@
+export { Header } from './Header';

package/dist/esm/Widgets/Sidebar/Sidebar.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface ISidebar {
+    pinned: boolean;
+    onPinSidebar: () => void;
+    onUnpinSidebar: () => void;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Sidebar: (props: ISidebar) => JSX.Element;

package/dist/esm/Widgets/Sidebar/Sidebar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect, useRef } from 'react';
+import LeftArrowIcon from '../../assets/img/left-arrow.svg';
+import RightArrowIcon from '../../assets/img/right-arrow.svg';
+import { Button } from '../../Inputs';
+import { Divider } from '../../Utils';
+export const Sidebar = (props) => {
+    const { children, className, pinned, onPinSidebar, onUnpinSidebar, } = props;
+    const sidebarRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (sidebarRef.current &&
+                !sidebarRef.current.contains(event.target) &&
+                !pinned) {
+                onUnpinSidebar();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [onUnpinSidebar, pinned]);
+    return (_jsxs("aside", { className: cn('sidebar', className), ref: sidebarRef, children: [_jsx("div", { className: 'sidebar__content', children: children }), _jsx(Divider, {}), _jsx("div", { className: 'sidebar__control', children: _jsx(Button, { className: 'sidebar-button', size: 'large', variant: 'clear-neutral', label: pinned ? 'Скрыть меню' : 'Закрепить меню', iconComponent: pinned ? _jsx(LeftArrowIcon, {}) : _jsx(RightArrowIcon, {}), onClick: pinned ? onUnpinSidebar : onPinSidebar, fullWidth: true }) })] }));
+};

package/dist/esm/Widgets/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar, type ISidebar } from './Sidebar';

package/dist/esm/Widgets/Sidebar/index.js

@@ -0,0 +1 @@
+export { Sidebar } from './Sidebar';