torgbox-ui 1.0.8 → 1.0.9

package/dist/esm/Pages/CreateTeamPage/createTeamPage.scss

@@ -0,0 +1,82 @@
+$page-background:  $surface-bright;
+$title:            $neutral-high;
+$text:             $neutral-middle;
+
+.create-team-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: $title;
+  }
+
+  &__text-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  &__text {
+    color: $text;
+  }
+
+  &__email {
+    color: $title;
+    font-weight: 400;
+  }
+
+  &__form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &>div:first-child {
+      margin-bottom: 38px;
+    }
+  }
+
+  &__spinner {
+    align-self: center;
+    width: 20px;
+    stroke: $text;
+    z-index: 2;
+    margin-bottom: 26px;
+  }
+
+  &__organization {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .create-team-page {
+    max-width: 320px;
+    padding: 24px 16px;
+  }
+}

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

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

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

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

package/dist/esm/Pages/EmailConfirmationPage/emailConfirmationPage.scss

@@ -0,0 +1,92 @@
+$page-background: $surface-bright;
+$title:           $neutral-high;
+$variant-text:    $neutral-low;
+$main-text:       $neutral-middle;
+$link-text:       $primary-high;
+$link-border:     $primary-border-low;
+
+.email-confirmation-page {
+  position: relative;
+  background-color: $page-background;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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 {
+    margin-bottom: 16px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $title;
+    text-align: center;
+  }
+
+  &__text-wrapper {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__variant-text {
+    font-size: 12px;
+    line-height: 16px;
+    color: $variant-text;
+  }
+
+  &__main-text {
+    color: $main-text;
+  }
+
+  &__email {
+    font-weight: 700;
+  }
+
+  &__form {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 36px;
+    margin: 16px 0;
+  }
+
+  &__spinner {
+    position: absolute;
+    top: 14px;
+    right: -33px;
+    width: 20px;
+    stroke: $main-text;
+    z-index: 2;
+  }
+
+  &__resend {
+    color: $variant-text;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .email-confirmation-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+}

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

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

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

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

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

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

package/dist/esm/Pages/JoinTeamPage/joinTeamPage.scss

@@ -0,0 +1,50 @@
+$page-background:  $surface-bright;
+$text:             $neutral-middle;
+$title:            $neutral-high;
+$link:             $primary-high;
+$underline:        $primary-middle;
+
+.join-team-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-wrapper {
+    color: $text;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  &__link {
+    color: $link;
+    text-decoration: none;
+
+    &:hover, &:focus {
+        cursor: pointer;
+        text-decoration: underline $underline;
+    }
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .join-team-page {
+    max-width: 320px;
+    padding: 24px 16px;
+  }
+}

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

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

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

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

package/dist/esm/Pages/LoginPage/loginPage.scss

@@ -0,0 +1,80 @@
+$page-background:  $surface-bright;
+$title:            $neutral-high;
+$footer-text:      $neutral-low;
+$link:             $primary-high;
+$error-background: $error-border-low;
+$error-content:    $error-high;
+
+.login-page {
+  background-color: $page-background;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  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 {
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $title;
+  }
+
+  &__form {
+    width: 100%;
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+
+  &__input-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__text {
+    font-size: 12px;
+    line-height: 16px;
+    color: $footer-text;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .login-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+    
+    &__footer {
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+}

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

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

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

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

package/dist/esm/Pages/RegisterPage/registerPage.scss

@@ -0,0 +1,72 @@
+.register-page {
+  background-color: $surface-bright;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  box-sizing: border-box;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 24px 40px;
+
+  &__title {
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $neutral-high;
+  }
+
+  &__form {
+    width: 100%;
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__text {
+    font-size: 12px;
+    line-height: 16px;
+    color: $neutral-low;
+  }
+
+  &__link {
+    font-size: 14px;
+    line-height: 20px;
+    color: $primary-high;
+
+    &:hover {
+      text-decoration: underline $primary-border-low;
+    }
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .register-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+    
+    &__footer {
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    &__text {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

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

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

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/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.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.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.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.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/index.d.ts

@@ -0,0 +1 @@
+export { Link, type ILink } 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/index.d.ts

@@ -0,0 +1 @@
+export { Modal, type IModal } 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/SectionPlaceholder/SectionPlaceholder.d.ts

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